支持不同屏幕尺寸——Supporting Different Screen Sizes

最新推荐文章于 2025-12-16 17:19:50 发布

翻译最新推荐文章于 2025-12-16 17:19:50 发布 · 677 阅读

文章标签：

#android #翻译Training #支持不同的屏幕尺寸

androidDeveloper官网_Training 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Android应用如何根据不同屏幕尺寸进行适配的方法，包括使用wrap_content和match_parent、RelativeLayout、尺寸修饰语、最小宽度修饰语等技术手段。

今天翻译的内容链接如下：http://developer.android.com/training/multiscreen/screensizes.html

老样子，不再赘述。进入正题：（每次都是分割线以下是翻译内容）

===============================================================================================================

（一）Use "wrap_content" and "match_parent"使用“包裹内容”和“填充父视图”

主要意思是：尽量使用这两个属性，而不是写死的硬编码尺寸。下面是sample代码：

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

下面是横竖屏的样图：

（二）Use 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>

（三）Use Size Qualifiers使用尺寸修饰语

这个说白了就是指定不同的layout修饰符，比如手机不能一屏显示两个内容块（例如fragment），而平板，电视足够大，可以同时显示两个块儿。那么请看sample：

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-large/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>
注意： large修饰符适用于：7寸平板及以上屏幕，其他的没有任何修饰符的layout将适配更小尺寸的屏幕（7寸以下）

（四）Use the Smallest-width Qualifier使用最小宽度修饰语

这个意思是：在SDK3.2以前，开发者想在所谓的，大家认为的大屏幕（5寸和7寸）上边显示不同的布局，我们知道上边小节三讲到的方法是用large修饰符，那么很显然这里不能用了（都会加载layout文件夹下的布局），于是从3.2开始谷歌增加了“samllest-width”修饰符，用在程序里用首字母：sw+指定的dp 例如：sw600dp 即：屏幕的宽度要不小于600dp才能加载此layout中的布局。

sample继续：

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-sw600dp/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>
特别注意：这个修饰符在SDK3.2之前是不识别的，所以嘛，还是乖乖地用layout-large吧。

（五）Use Layout Aliases 使用布局别名（暂时没有更好的译法 - -！）

SDK3.2以前，我们还是要用这些标签（small，normal，large and xlarge）来兼容更早的版本，那么如果我们还是兼容3.2以前和3.2之后的SDK，两种布局，我们要构造如下layout：

res/layout/main.xml: single-pane layout
res/layout-large: multi-pane layout
res/layout-sw600dp: multi-pane layout
最后两个是一样的布局，那位了避免这样子繁琐的定义，而且维护不方便，谷歌推出本小节要讲的方法（目前无上佳叫法）：

老样子直接看sample：

先给layout文件夹指定两种布局

res/layout/main.xml, single-pane layout
res/layout/main_twopanes.xml, two-pane layout
再在res下增加如下两个文件夹：

res/values-large/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>
上述两个XML并不定义布局，它们只是把 main “指向”了 main_twopanes这个布局的名字，其实意思就是不管什么屏幕，都要加载layout这个一个布局文件，只不过上面定义的文件夹有large和sw600dp这两个修饰符，相当于选择器，它会自动帮我们选择布局，3.2之前的加载large，3.2之后的加载sw600dp，所以这就不用担心适配的平台是几点几了。

（六）Use Orientation Qualifiers 使用布局别名

这个就是定义好几套你要用到的layout布局文件，我就不一一列出了，大家自己下载谷歌提供的sample代码查看。

之后做的事情就是映射别名到布局文件的名字，下面上sample：

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-large-land/layouts.xml :
<resources>
    <item name="main_layout" type="layout">@layout/twopanes</item>
    <bool name="has_two_panes">true</bool>
</resources>
res/values-large-port/layouts.xml :
<resources>
    <item name="main_layout" type="layout">@layout/twopanes_narrow</item>
    <bool name="has_two_panes">true</bool>
</resources>