面向更大屏幕的片段

目前为止,只做过小屏幕设备运行应用。
本文中将创建灵活的用户界面,根据运行应用的设备让应用有不同的外观和行为。
之前我们创建了在手机上运行的Workout应用版本。但是在一个平板上运行这个应用时,应用的表现几乎是一样的。不过由于屏幕更大,所以用户界面中有大量空置的空间,可以更好的利用一下这些空间。

面向更大界面的设计

一种办法是把训练项目的详细信息显示在训练项目列表右边。用户单击其中一个项目信息是,这个训练项目详细信息可以显示在同一个屏幕上,而无需启动第二个活动。

回顾应用的手机版本

1、应用启动时会启动MainActivity。
MainActivity使用activity_main.xml作为它的布局,其中包含一个名为WorkoutListFragment的片段。
2、WorkoutListFragment显示一个训练项目列表。
3、用户单击其中一个训练项目时,DetailActivity启动。
DetailActivity使用activity_detail.xml作为它的布局,其中包含一个名为WorkoutListFragment的片段。
4、WorkoutDetailFragment使用fragment_workout_detail.xml作为它的布局。
5、WorkoutListFragment和WorkoutDetailFragment从Workout.java获得它们的训练项目数据。

应用的平板电脑版本

1、应用启动时启动MainActivity。
2、MainActivity的布局显示两个片段,WorkoutListFragment和WorkoutDetailFragment。
3、WorkoutListFragment显示一个训练项目列表。这是一个列表片段,所以没有额外的布局文件。
4、用户单击其中一个训练项目时,它的详细信息会显示在WorkoutDetailFragment中。
5、两个片段都是从Workout.java获得它们的训练数据。

新建一个平板模拟器

面向更大屏幕的片段_第1张图片面向更大屏幕的片段_第2张图片面向更大屏幕的片段_第3张图片
选择Landscape水平选项,使AVD启动时为水平方向。

创建一个平板电脑使用的activity_main大布局版本

面向更大屏幕的片段_第4张图片
完成创建之后的布局应该时这样的:
面向更大屏幕的片段_第5张图片
layout-large版本的布局要显示两个片段,为此我们要把这两个片增加到一个线性布局中,方向设置为水平,另外还需要调整片段宽度,使WorkoutListFragment占可用空间的五分之二,WorkoutDetailFragment占五分之三。
修改activity_main.xml(large)如下:


<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:name="com.hfad.workout.WorkoutListFragment"
        android:id="@+id/list_frag"
        android:layout_width="0dp"
        android:layout_weight="2"
        android:layout_height="match_parent"/>

    <fragment
        android:name="com.hfad.workout.WorkoutListFragment"
        android:id="@+id/detail_frag"
        android:layout_width="0dp"
        android:layout_weight="3"
        android:layout_height="match_parent" />
LinearLayout>

现在可以试着运行一下应用:
面向更大屏幕的片段_第6张图片
面向更大屏幕的片段_第7张图片
可以看到同一个应用在不同的设备上的显示效果时不一样的。

你可能感兴趣的:(Android实践,android)