【Android Advanced Training - 01】适配不同的屏幕[Lesson 1-支持不同的屏幕大小]

最新推荐文章于 2023-02-24 11:20:36 发布

iteye_17686

最新推荐文章于 2023-02-24 11:20:36 发布

阅读量114

点赞数

文章标签：移动开发

Dependencies and prerequisites[前提条件]

Android 1.6 or higher (2.1+ for the sample app)
Basic knowledge ofActivitiesandFragment
Experience building an AndroidUser Interface
Several features require the use of thesupport library

You should also read

Supporting Multiple Screens

Try it out

Download the sample app

NewsReader.zip

Android powers hundreds of device types with several different screen sizes, ranging from small phones to large TV sets. Therefore,it’s important that you design your application to be compatible with all screen sizes so it’s available to as many users as possible.

[显然，Android设备屏幕不一，为了更好的用户体验，我们必须做适配不同屏幕的操作]

Supporting Different Screen Sizes[支持不同的屏幕大小]

This lesson teaches you to

Use "wrap_content" and "match_parent"[使用wrap_content与match_parent而不是hard-coded]

If you use"wrap_content", the width or height of the view is set to the minimum size necessary to fit the content within that view, while"match_parent"(also known as"fill_parent"before API level 8) makes the component expand to match the size of its parent view.

wrap_content：宽高根据内容大小调整

match_parent：伸展至与父控件一致

显然我们不能hard-coded（写死大小）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout android:layout_width="match_parent" 
                  android:id="@+id/linearLayout1"  
                  android:gravity="center"
                  android:layout_height="50dp">
        <ImageView android:id="@+id/imageView1" 
                   android:layout_height="wrap_content"
                   android:layout_width="wrap_content"
                   android:src="@drawable/logo"
                   android:paddingRight="30dp"
                   android:layout_gravity="left"
                   android:layout_weight="0" />
        <View android:layout_height="wrap_content" 
              android:id="@+id/view1"
              android:layout_width="wrap_content"
              android:layout_weight="1" />
        <Button android:id="@+id/categorybutton"
                android:background="@drawable/button_bg"
                android:layout_height="match_parent"
                android:layout_weight="0"
                android:layout_width="120dp"
                style="@style/CategoryButtonStyle"/>
    </LinearLayout>

    <fragment android:id="@+id/headlines" 
              android:layout_height="fill_parent"
              android:name="com.example.android.newsreader.HeadlinesFragment"
              android:layout_width="match_parent" />
</LinearLayout>

下面是相应的layout出现的屏幕

Use RelativeLayout[使用相对布局]

[如果我们需要一个相对的位置而不是仅仅是直线型的布局，那么我们可以使用RelativeLayout]

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Type here:"/>
    <EditText
        android:id="@+id/entry"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/label"/>
    <Button
        android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/entry"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dp"
        android:text="OK" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/ok"
        android:layout_alignTop="@id/ok"
        android:text="Cancel" />
</RelativeLayout>

上面图片是：Screenshot on a QVGA screen (small screen).

上面图片是：Screenshot on a WSVGA screen (large screen).

Use Size Qualifiers[使用大小标识符]

[虽然我们可以用上面的方法定义布局文件，让其在不同的情况下进行拉伸等动作，可是在某些比较大的屏幕，比如平板与TV上面还是不太适合，我们最好可以在这种情况下使用两套不同的布局文件来适配大小，我们可以使用大小标示符来标记不同的布局，让机器在运行程序的时候根据自身的大小来选择显示哪个布局]

[通常在Tablets and TVs的AP上使用"twopane"的布局，这样]

res/layout/main.xml, single-pane (default) layout:

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

    <fragment android:id="@+id/headlines"
              android:layout_height="fill_parent"
              android:name="com.example.android.newsreader.HeadlinesFragment"
              android:layout_width="match_parent" />
</LinearLayout>

res/layout-xlarge/main.xml, two-pane layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">
    <fragment android:id="@+id/headlines"
              android:layout_height="fill_parent"
              android:name="com.example.android.newsreader.HeadlinesFragment"
              android:layout_width="400dp"
              android:layout_marginRight="10dp"/>
    <fragment android:id="@+id/article"
              android:layout_height="fill_parent"
              android:name="com.example.android.newsreader.ArticleFragment"
              android:layout_width="fill_parent" />
</LinearLayout>

[“xlarge”可以用来标示哪些屏幕比较大的情况，在那些设备上，系统会自动选择two-pane的布局，对于其他小点的设备就会自动选择default的布局]

Use the Smallest-width Qualifier [使用最小宽度标识符]

在很多时候我们不方便判断具体多大的屏幕才叫做large[比如5“与7”的设备]，所以在Android 3.2之后引入了sw600dp，这样的方式来表示那些屏幕宽度至少是600dp以上的设备[通常7“的设备都至少会有600dp的宽]，

我们这可以这样定义一个布局文件：res/layout-sw600dp/main.xml(这是一个two-pane的布局)，这样设置之后，系统会在设备屏幕宽至少600dp的时候自动选择显示这个布局文件，当然小于的情况下就会选择默认的res/layout/main.xml布局文件。

However,我们不能在Android 3.2之前的设备上使用这样的表示方法，仍然需要使用xlarge来处理这样的大屏幕情况

Use Layout Aliases [使用布局文件别名]

因为3.2之前不支持使用Smallest-width的标识符，为了兼容之前的设备，我们仍然需要使用一些抽象的大小标识符(small, normal, large and xlarge)，有时候我们会出现定义了重复的布局文件的情况，比如

res/layout/main.xml:single-pane layout
res/layout-xlarge:multi-pane layout （这个文件是用来兼容3.2之前的设备）
res/layout-sw600dp:multi-pane layout （这个文件可以在3.2上进行使用，但是与上面的布局文件一致，都是two-pane的布局）

为了避免这样的duplication(重复的)文件，我们可以为重复的布局取个别名

res/layout/main.xml, single-pane layout
res/layout/main_twopanes.xml, two-pane layout

这样以后，我们可以这样重新定义上面那两个布局文件

res/values-xlarge/layout.xml:

<resources> <item name="main" type="layout">@layout/main_twopanes</item> </resources>

res/values-sw600dp/layout.xml:

<resources> <item name="main" type="layout">@layout/main_twopanes</item> </resources>

这样一来，就只需写一份two-pane的布局文件，两个布局设置都引用它 [这个设计很容易理解，通常很多地方我们都有这样做过]

Use Orientation Qualifiers [使用方向标识符]

一些布局可以很好的自动适配横屏landscape与竖屏portrait，但是我们最好是针对不同的方向设置不同的布局会比较好

比如我们现在有这样一个需求：

small screen, portrait:singlepane, with logo
small screen, landscape:single pane, with logo
7" tablet, portrait:single pane, with action bar
7" tablet, landscape:dualpane, wide, with action bar
10" tablet, portrait:dual pane, narrow, with action bar
10" tablet, landscape:dual pane, wide, with action bar

我们可以使用上面说的别名方法，对上面的需求抽取出一些公共的布局元素，定义下面几个布局：

res/layout/onepane.xml:

res/layout/onepane_with_bar.xml:

res/layout/twopanes.xml:

res/layout/twopanes_narrow.xml:

这样以来，我们需要在setContentView的时候选择main_layout就可以了，系统会选择到相应的Value里面取出对应的布局文件进行显示

res/values/layouts.xml:

<resources> <item name="main_layout" type="layout">@layout/onepane_with_bar</item> <bool name="has_two_panes">false</bool> </resources>

res/values-sw600dp-land/layouts.xml:

<resources> <item name="main_layout" type="layout">@layout/twopanes</item> <bool name="has_two_panes">true</bool> </resources>

res/values-sw600dp-port/layouts.xml:

<resources> <item name="main_layout" type="layout">@layout/onepane</item> <bool name="has_two_panes">false</bool> </resources>

res/values-xlarge-land/layouts.xml:

<resources> <item name="main_layout" type="layout">@layout/twopanes</item> <bool name="has_two_panes">true</bool> </resources>

res/values-xlarge-port/layouts.xml:

<resources> <item name="main_layout" type="layout">@layout/twopanes_narrow</item> <bool name="has_two_panes">true</bool> </resources>

Use Nine-patch Bitmaps[使用9-patch图片]

nine-patchbitmaps：which are speciallyformattedPNG files thatindicatewhich areas can and cannot be stretched. [一种有限制的可伸缩的图片格式，为了避免通常的图片在伸缩后出现的不某些不适配，比如图片中有个logo,你不希望这个logo随拉伸而拉伸，那么我们就应该使用这种格式的图片来定义哪些区域可以拉伸]

我们可以使用draw9patch这个工具（位于tools/目录下）来把普通图片转换为9-patch格式的图片。