第004天：APP在平板上的UI布局设计

        当今是移动设备发展非常迅速的时代，不仅手机已经成为了生活必需品，就连平板电脑也变 得越来越普及。平板电脑和手机最大的区别就在于屏幕的大小，一般手机屏幕的大小会在3英寸 到6英寸之间，而一般平板电脑屏幕的大小会在7英寸到10英寸之间。屏幕大小差距过大有可 能会让同样的界面在视觉效果上有较大的差异，比如一些界面在手机上看起来非常美观，但在平 板电脑上看起来就可能会有控件被过分拉长、元素之间空隙过大等情况。

        作为一名专业的Android开发人员，能够同时兼顾手机和平板的开发是我们必须做到的事情。 Android自3.0版本开始引入了碎片的概念，它可以让界面在平板上更好地展示，下面我们就来一 起学习一下。

4.1碎片是什么

        碎片（Fragment）是一种可以嵌入在活动当中的UI片段，它能让程序更加合理和充分地利 用大屏幕的空间，因而在平板上应用得非常广泛。虽然碎片对你来说应该是个全新的概念，但我 相信你学习起来应该毫不费力，因为它和活动实在是太像了，同样都能包含布局，同样都有自己 的生命周期。你甚至可以将碎片理解成一个迷你型的活动，虽然这个迷你型的活动有可能和普通 的活动是一样大的。

        那么究竟要如何使用碎片才能充分地利用平板屏幕的空间呢？想象我们正在开发一个新闻 应用，其中一个界面使用RecyclerView展示了一组新闻的标题，当点击了其中一个标题时，就打 开另一个界面显示新闻的详细内容。如果是在手机中设计，我们可以将新闻标题列表放在一个活 动中，将新闻的详细内容放在另一个活动中，如图4.1所示。

可是如果在平板上也这么设计，那么新闻标题列表将会被拉长至填充满整个平板的屏幕，而 新闻的标题一般都不会太长，这样将会导致界面上有大量的空白区域，如图4.2所示。

因此,更好的设计方案是将新闻标题列表界面和新闻详细内容界面分别放在两个碎片中, 然后在同一个活动里引入这两个碎片，这样就可以将屏幕空间充分地利用起来了，如图4.3 所示。

4.2碎片的使用方式

介绍了这么多抽象的东西，也是时候学习一下碎片的具体用法了。你已经知道，碎片通常都 是在平板开发中使用的，因此我们首先要做的就是创建一个平板模拟器。创建模拟器的方法我们 在第1章已经学过了，创建完成后启动平板模拟器，效果如图4.4所示。

好了，准备工作都完成了，接着新建一个FragmentTest项目，然后开始我们的碎片探索之 旅吧。

4.2.1碎片的简单用法

这里我们准备先写一个最简单的碎片示例来练练手，在一个活动当中添加两个碎片，并让这 两个碎片平分活动空间。

新建一个左侧碎片布局left fragment.xml,代码如下所示：

这个布局非常简单，只放置了一个按钮，并让它水平居中显示。然后新建右侧碎片布局 right fragment.xml,代码如下所示：

可以看到，我们将这个布局的背景色设置成了绿色，并放置了一个TextView用于显示一段 文本。

接着新建一个LeftFragment类，并让它继承自Fragmento注意，这里可能会有两个不同包 下的Fragment供你选择，一个是系统内置的android.app.Fragment, 一个是support-v4库中的 android.support.v4.app.Fragmento这里我强烈建议你使用support-v4库中的Fragment,因为它可 以让碎片在所有Android系统版本中保持功能一致性。比如说在Fragment中嵌套使用Fragment, 这个功能是在Android 4.2系统中才开始支持的，如果你使用的是系统内置的Fragment,那么很 遗憾，4.2系统之前的设备运行你的程序就会崩溃。而使用support・v4库中的Fragment就不会出 现这个问题，只要你保证使用的是最新的support-v4库就可以了。另外，我们并不需要在 build.gradle文件中添加support-v4库的依赖，因为build.gradle文件中已经添加了 appcompat-v7 库的依赖，而这个库会将support-v4库也一起引入进来。

现在编写一下LeftFragment中的代码，如下所示：

这里仅仅是重写了 Fragment的onC「eateView()方法，然后在这个方法中通过Layoutlnflater 的inflate()方法将刚才定义的left fragment布局动态加载进来，整个方法简单明了。接着我们 用同样的方法再新建一个RightFragment,代码如下所示：

基本上代码都是相同的，相信已经没有必要再做什么解释了。接下来修改activity_main.xml 中的代码，如下所示：

可以看到，我们使用了＜fragment＞标签在布局中添加碎片，其中指定的大多数属性都是你 熟悉的，只不过这里还需要通过android:name属性来显式指明要添加的碎片类名，注意一定要 将类的包名也加上。

这样最简单的碎片示例就已经写好了，现在运行一下程序，效果如图4.5所示。

正如我们所期待的一样，两个碎片平分了整个活动的布局。不过这个例子实在是太简单了， 在真正的项目中很难有什么实际的作用，因此我们马上来看一看，关于碎片更加高级的使用技巧。

4.2.2动态添加碎片

在上一节当中，你已经学会了在布局文件中添加碎片的方法，不过碎片真正的强大之处在于, 它可以在程序运行时动态地添加到活动当中。根据具体情况来动态地添加碎片，你就可以将程序 界面定制得更加多样化。

我们还是在上一节代码的基础上继续完善，新建another_right_fi*agment.xml,代码如下所示:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:background="#ffff00"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content" android ：layout_gravity=''center_horizontal" android:textSize="20sp"

android:text="This is another right fragment"

/>

</LinearLayout>

这个布局文件的代码和right_fi*agment.xml中的代码基本相同，只是将背景色改成了黄色，并 将显示的文字改了改。然后新建AnotherRightFragment作为另一个右侧碎片，代码如下所示：

public class AnotherRightFragment extends Fragment {

(aOverride

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedlnstanceState) {

View view = inflater.inflate(R.layout.anotherrightfragment, container, false);

return view;

}

}

代码同样非常简单，在onCreateView()方法中加载了刚刚创建的another_right_firagment布 局。这样我们就准备好了另一个碎片，接下来看一下如何将它动态地添加到活动当中。修改 activity_main.xml,代码如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="match_pa rent" android:layout_height="match_parent" >

<fragment

android:id="@+id/left_f ragment"

android:name="com.example.fragmenttest.LeftFragment"

android: layout_width=,,0dp"

android:layout_height="match_parent"

android:layout_weight="l" />

<FrameLayout

android:id="@+id/right_layout"

android :layout__width="Odp"

android:layout_height="match_parent” android:layout_weight="l" >

</FrameLayout>

</LinearLayout>

可以看到，现在将右侧碎片替换成了一个FrameLayout中，还记得这个布局吗？在上一章中 我们学过，这是Android中最简单的一种布局，所有的控件默认都会摆放在布局的左上角。由于 这里仅需要在布局里放入一个碎片，不需要任何定位，因此非常适合使用FrameLayout。

下面我们将在代码中向FrameLayout里添加内容，从而实现动态添加碎片的功能。修改 MainActivity中的代码，如下所示：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

(QOverride

protected void onCreate(Bundle savedlnstanceState) { super.onCreate(savedlnstanceState); setContentView(R.layout.activity_main);

Button button = (Button) findViewById(R.id.button); button. setOnClickListener(this); replaceFragment(new RightFragment());

}

©Override

public void onClick(View v) { switch (v.getldO) { case R.id.button:

replaceFragment(new AnotherRightFragment()); break;

default:

break;

}

}

private void replaceFragment(Fragment fragment) {

FragmentManager fragmentManager = getSupportFragmentManager();

FragmentTransaction transaction = fragmentManager.beginTransaction(): transaction.replace(R.id.right_layoutf fragment);

transaction.commit();

}

}

可以看到，首先我们给左侧碎片中的按钮注册了一个点击事件，然后调用 replaceFragmentO方法动态添加了 RightFragment这个碎片。当点击左侧碎片中的按钮时，又 会调用replaceFragmentO方 法将右侧碎片替换成 AnotherRightFragment o结 合 replaceFragmentO方法中的代码可以看出,动态添加碎片主要分为5步。

1. 创建待添加的碎片实例。
2. 获取 FragmentManager,在活动中可以直接通过调用 getSupportFragmentManager()方 法得到。
3. 开启一个事务，通过调用beginTransactionO方法开启。
4. 向容器内添加或替换碎片，一般使用replace ()方法实现，需要传入容器的id和待添加 的碎片实例。
5. 提交事务，调用commit ()方法来完成。

这样就完成了在活动中动态添加碎片的功能，重新运行程序，可以看到和之前相同的界面， 然后点击一下按钮，效果如图4.6所示。

 

图4.6动态添加碎片的效果

4.2.3在碎片中模拟返回栈

在上一小节中，我们成功实现了向活动中动态添加碎片的功能，不过你尝试一下就会发现， 通过点击按钮添加了一个碎片之后，这时按下Back键程序就会直接退出。如果这里我们想模仿 类似于返回栈的效果，按下Back键可以回到上一个碎片，该如何实现呢？

其实很简单，FragmentTransaction中提供了一个addToBackStack()方法，可以用于将一个 事务添加到返回栈中，修改MainActivity中的代码，如下所示：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private void replaceFragment(Fragment fragment) { FragmentManager fragmentManager = getSupportFragmentManagerf); Fragment!ransaction transaction = fragmentManager.beginTransaction(); transaction.replace(R.id.rightlayout, fragment);

transaction.addToBackStack(null); transaction.commit();

}

}

这里我们在事务提交之前调用了 FragmentTransaction的addToBackStack()方法，它可以接 收一个名字用于描述返回栈的状态，一般传入null即可。现在重新运行程序，并点击按钮将 AnotherRightFragment添加到活动中