Android 平板电脑 UI ：multi-pane 片段或线性布局

Question

我需要创建最初仅适用于平板电脑的应用程序。我知道“List-and-Detail”模式，其中有一个列表，点击列表会显示所点击项目的详细信息。

只要所有布局始终有两个窗格，那就太完美了：一个用于项目列表，一个用于所选项目的详细信息。

好吧，在我的应用程序中，我想使用通常用于项目列表的第一个窗格作为应用程序中所有可用选项的菜单和第二个窗格，它占据了大部分可用 space，以根据第一个片段中选择的选项显示特定布局。

问题是第二个窗格并不总是由一个部分组成。

这些是我可能遇到的所有场景（左边红框部分代表应该一直显示的菜单）：

1.由单个部分组成的详细信息窗格：

2。由大小相同的两部分组成的详细信息窗格，它们没有 master-detail 关系。

3。由两部分组成的详细信息窗格，它们确实具有 mater-detail 关系，但主要部分比详细信息部分宽

#编辑：

由于我的应用程序的主要目标是帮助服务员接单，因此第三种情况在以下情况下发挥作用：

服务员从左边的菜单中选择选项"Take order"（假设是图中的"Item two"）
在详细信息窗格的第一部分，服务员可以在他们提供的所有食物类别中进行选择（假装它是顶部的列表）并且根据所选的类别，下面的列表显示了下面的所有菜肴该特定类别。
服务员点击一道菜后，它会自动添加到详细信息窗格的第二部分（第一个场景中隐藏的部分）

4。详细信息面板由两部分组成，它们确实有 mater-detail 关系，但详细信息部分比主要部分宽。

我知道，如果想在不同尺寸的屏幕和方向上重用布局，我必须使用片段，但必须即时确定在详细信息窗格中显示两个或一个部分（片段）或哪个一部分会比另一部分宽似乎需要做很多工作，老实说，我不确定该怎么做，因为我现在所知道的是主要 activity，带有菜单窗格插槽的那个详细信息窗格应与此类似：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/menu"
android:layout_weight="30"
android:layout_width="0px"
android:layout_height="match_parent"
/>
<FrameLayout
android:id="@+id/content"
android:layout_weight="70"
android:layout_width="0px"
android:layout_height="match_parent"
/>
</LinearLayout>

您认为可以在这里给出一些 UI 指导方针吗？也许我想太多了我应该用一个单一的线性布局和我需要的部分数量。

提前致谢。

Answer 1

我从你的问题中得到的是，你想为不同的情况设置不同的布局权重，对吧？如果是这样，那么您可以通过编程方式进行，您还想隐藏第一种情况的布局，因此对菜单使用 3 种布局，content1 和 content2 将第一种情况的 content2 隐藏为

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/menu"
android:layout_weight="30"
android:layout_width="0px"
android:layout_height="match_parent"
/>
<FrameLayout
android:id="@+id/content2"
android:layout_width="0px"
android:layout_height="match_parent"
/>
<FrameLayout
android:id="@+id/content2"
android:layout_width="0px"
android:layout_height="match_parent"
/>
</LinearLayout>

第一种情况使用：

LinearLayout.LayoutParams paramsmenu = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,   LinearLayout.LayoutParams.MATCH_PARENT);
paramsmenu.weight = 30f;
FrameLayout frameLayoutmenu = (FrameLayout)findViewById(R.id.menu);
frameLayoutmenu.setLayoutParams(paramsmenu);
LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,   LinearLayout.LayoutParams.MATCH_PARENT);
params1.weight = 70f;
FrameLayout frameLayoutContent1 = (FrameLayout)findViewById(R.id.content1);
frameLayoutContent1.setLayoutParams(params1);
FrameLayout frameLayoutContent2 = (FrameLayout)findViewById(R.id.content2);
frameLayoutContent2.setVisibility(View.GONE);

第二种情况使用：

    LinearLayout.LayoutParams paramsmenu = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,   LinearLayout.LayoutParams.MATCH_PARENT);
    paramsmenu.weight = 30f;
    FrameLayout frameLayoutmenu = (FrameLayout)findViewById(R.id.menu);
    frameLayoutmenu.setLayoutParams(paramsmenu);
    LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,   LinearLayout.LayoutParams.MATCH_PARENT);
    params1.weight = 35f;
    FrameLayout frameLayoutContent1 = (FrameLayout)findViewById(R.id.content1);
    frameLayoutContent1.setLayoutParams(params1);
    FrameLayout frameLayoutContent2 = (FrameLayout)findViewById(R.id.content2);
    LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,   LinearLayout.LayoutParams.MATCH_PARENT);
    params2.weight = 35f;
    frameLayoutContent2.setLayoutParams(params2);

第三种情况使用：

    LinearLayout.LayoutParams paramsmenu = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,   LinearLayout.LayoutParams.MATCH_PARENT);
    paramsmenu.weight = 30f;
    FrameLayout frameLayoutmenu = (FrameLayout)findViewById(R.id.menu);
    frameLayoutmenu.setLayoutParams(paramsmenu);
    LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,   LinearLayout.LayoutParams.MATCH_PARENT);
    params1.weight = 40f;
    FrameLayout frameLayoutContent1 = (FrameLayout)findViewById(R.id.content1);
    frameLayoutContent1.setLayoutParams(params1);
    FrameLayout frameLayoutContent2 = (FrameLayout)findViewById(R.id.content2);
    LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,   LinearLayout.LayoutParams.MATCH_PARENT);
    params2.weight = 30f;
    frameLayoutContent2.setLayoutParams(params2);

第四种情况使用：

    LinearLayout.LayoutParams paramsmenu = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,   LinearLayout.LayoutParams.MATCH_PARENT);
    paramsmenu.weight = 30f;
    FrameLayout frameLayoutmenu = (FrameLayout)findViewById(R.id.menu);
    frameLayoutmenu.setLayoutParams(paramsmenu);
    LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,   LinearLayout.LayoutParams.MATCH_PARENT);
    params1.weight = 20f;
    FrameLayout frameLayoutContent1 = (FrameLayout)findViewById(R.id.content1);
    frameLayoutContent1.setLayoutParams(params1);
    FrameLayout frameLayoutContent2 = (FrameLayout)findViewById(R.id.content2);
    LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,   LinearLayout.LayoutParams.MATCH_PARENT);
    params2.weight = 50f;
    frameLayoutContent2.setLayoutParams(params2);

Answer 2

您看到 Retrieving a List of Contacts 示例了吗？在这里，他们展示了如何正确实施多窗格主从流程。相同的代码在平板电脑上提供多窗格横向布局，在普通手机上提供单窗格纵向布局。这是一个有趣但稍微复杂的示例。

关于在某些情况下拥有三个窗格：我认为这不是个好主意。我认为在任何给定时间都应该只有一个列表屏幕和一个详细信息屏幕，并且您应该实现应用程序的 UI 流程以支持这种习惯用法。实施三窗格布局不会很困难，但我怀疑它是否有用或创新。

编辑：

我已经理解你的要求，但我不得不承认我没有意识到这种用法的可能性。这是一个很好的设计。我的感觉是，您真的不需要考虑三个窗格：而是将左侧列表视为列表窗格，将整个右侧视为一个细节-窗格。在这个详细信息窗格中，您可以为三个单独的区域设置三个嵌套的 Fragment。或者，由于嵌套的 Fragment 有时会产生比它们解决的问题更多的问题，因此可以设置三个 LinearLayout。那会更容易处理，我正在尝试做的是简化布局，使其正常工作并且没有复杂的代码。

Android 平板电脑 UI ：multi-pane 片段或线性布局

Android Tablet UI : multi-pane fragment or linear layout

android

master-detail

android-ui

android-layout

android-fragments

#编辑：