需要复杂的Android UI设计指南（片段）

Question

我正在开发针对平板电脑和谷歌电视的应用程序。它就像许多标准的Google TV应用程序一样，具有LeftNavBar和顶级搜索栏，这对所有应用程序屏幕都是通用的。它看起来像下图：

主屏幕

所有其他屏幕的RED区域将不同。它可能包含以下屏幕模型的数据：

活动一加载到主容器

活动二加载到主容器

因此，您可以看到主区域中可以加载完全不同的部分。

在屏幕2中选择任何列表项时（例如在片段列表中），可以将屏幕3作为详细部分加载，或者可以在选择选项卡（将出现在LeftNavBar中）时加载它。

以下是我尝试实施它的方法。

第1步。我使用以下XML创建了一个主要活动：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#9ccc" >

        <!-- Top Bar -->

    </LinearLayout>

    <FrameLayout
        android:id="@+id/mainContainer"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <!-- main Red Container that will load other Activities -->

    </FrameLayout>
</LinearLayout>

mainContainer是我要加载活动的RED容器。 LeftNavBar将作为其所有者的父级添加到此活动中。

第2步我创建了ActivityOne＆amp; ActivityTwo有两个＆amp;其中分别有三个碎片（如上面第二和第三张图所示）。

*第3步我正在尝试在主页的 mainContainer FrameLayout中加载ActivityOne ...但我无法添加它。

我尝试将ActivityOne添加到mainContainer，如下所示：

View v = (new ActivityOne()).getWindow().getDecorView();
FrameLayout mainContainer = (FrameLayout) findViewById(R.id.mainContainer);
mainContainer.addView(v);

但getWindow()会返回null ....

出现其他问题，因为所有数据都来自远程服务 ..所以请同时建议我如何能够在mainContainer中保存对所有已加载活动的引用堆栈...所以我可以重新加载已经加载的活动而不是创建它的新实例..这将在按下按钮时使用。

或

我不应该将活动加载到上面的RED容器中，而应该创建两个活动，每个活动都有自己的Fragments＆amp;一个LeftNavBar。这可能比上述方法更容易。或者这可能是唯一的解决方案....但我觉得保存BACK按钮的状态可能会变得混乱..但我会尝试实现这个

如果必须创建此类应用程序，您会怎么做？ 您将如何设计UI布局以获得最佳性能/实践？

我非常感谢您帮助我设置此应用程序布局的建议。

Answer 1

<强>声明

这是片段变得棘手的地方。如果活动1＆amp; 2具有相同的布局，因此您可以简单地附加/分离片段并使用片段后栈来展开。

因为您需要2个独特的布局来容纳您的片段，所以事情会更复杂一些。如果可能的话，我会尝试使用相同的布局，以便您可以采取简单的方法。

作为另一种选择，您可以使用上面概述的两个活动，并使用Intents来回发送数据。

那就是说，如果我真的必须按照书面形式实施这个解决方案，这就是我要做的。 注意我不是在提倡这个解决方案，但我自己并不知道更好的做事方式。

解决方案

创建一个FragmentActivity，其视图将是您在上面定义的主屏幕。主屏幕的布局包含：

• 左侧导航栏
• 顶栏
• 2个布局。 layout1和layout2。这些将包含在父布局中，即RelativeLayout或LinearLayout，并包含片段所需的FrameLayout元素。

使用XML的示例（注意，标签有点简短）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#9ccc" >

        <!-- Top Bar -->

    </LinearLayout>

    <LinearLayout android:id="@+id/layout1">
        <FrameLayout android:id="@+id/listFragment" />
        <FrameLayout android:id="@+id/contentFragment" />
    </LinearLayout>

    <LinearLayout android:id="@+id/layout2">
        <FrameLayout android:id="@+id/imageFragment" />
        <FrameLayout android:id="@+id/boxFragment1" />
        <FrameLayout android:id="@+id/boxFragment2" />
        <FrameLayout android:id="@+id/boxFragment3" />
    </LinearLayout>

</LinearLayout>

主要的想法是你然后显示/隐藏layout1＆amp; layout2，即根据你的应用程序的状态设置android：visibility =“gone”。

这种方法的缺点是：

• 使用片段后台堆栈可能是不可能的，相反，您必须跟踪用户在UI流程中的位置并管理后退按钮以显示/隐藏布局
• 您可能需要特别注意在显示/隐藏其父视图时附加/分离片段以减少片段不可见时的资源消耗

优点是：

• 片段与基本活动之间的轻松沟通，因为只使用了一项活动

Answer 2

Re：嵌套片段问题

要解决我们的应用程序中的'嵌套片段'问题（正如您正确注意到的那样）Fragment s无法添加Fragment我在下面托管了一个模板片段该活动的唯一目的是为其他要锚定的片段定义一组占位符。在此点之后向活动添加更多片段时，我使用模板片段的视图占位符+@id来标识要添加的片段的“根”或父视图ID。

    getSupportFragmentManager().beginTransaction().add(#someIdFromTheTemplateFrag, fragment, fragmentTag).commit();

我正在添加的片段然后知道在当前布局中锚定自己的位置，当然然后开始添加它的视图的快乐方式。这具有将片段附加到另一片段的效果，从而实现期望的视觉“嵌套”......