Android平板电脑用户界面：多窗格片段或线性布局

Question

我需要创建最初仅适用于平板电脑的应用。我知道“列表和细节”模式，其中有一个列表的东西，点击列表会显示被点击的项目的详细信息。

只要所有布局总是有两个窗格，那就完美了：一个用于项目列表，一个用于所选项目的细节。

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

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

这些是我将拥有的所有可能场景（带红框的左侧部分代表应始终显示的菜单）：

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

2。详细信息窗格由两个相同大小的部分组成，这两个部分没有主 - 细节关系。

第3。详细信息窗格由两部分组成，它们具有主体 - 细节关系，但主要部分比细节部分宽

#Edit：

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

• 服务员从左侧菜单中选择“接订单”选项（让我们假装它是图像中的“第二项”）
• 在详细信息窗格的第一部分，服务员可以从他们所服务的所有食物类别中选择（假装它是顶部的列表），并根据所选类别，下面的列表显示该特定下的所有菜肴类别。
• 一旦服务员点击一个盘子，它就会自动添加到细节窗格的第二部分（第一个场景中隐藏的部分）

4。详细信息窗格由两部分组成，它们具有主体 - 细节关系，但细节部分比主部分宽。

我知道如果想要从不同大小的屏幕和方向重用布局，我必须使用片段，但必须在运行中确定在细节窗格中显示两个或一个部分（片段）或哪个部分将比另一个更广泛似乎是很多工作，说实话我不知道怎么做，因为我现在所知道的是主要的活动，菜单窗格和细节窗格的插槽应该是类似于：

<?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

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

关于在某些情况下有三个窗格：我认为这不是一个好主意。我认为在任何给定时间应该只有一个列表屏幕和一个详细信息屏幕，你应该实现你的应用程序的UI流程来支持这样的成语。实现三窗格布局并不是很困难，但我怀疑它是否有用或具有创新性。

修改

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

Answer 2

我从你的问题中得到的是你想为不同情况设置不同的布局权重吗？如果是这样，那么你可以以编程方式进行，你也想隐藏你的第一个案例的布局，所以使用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);