App开发屏幕适配_app如何匹配不同屏幕-CSDN博客

本文链接：https://blog.csdn.net/baidu_29601793/article/details/57079573

支持不同屏幕尺寸
通过下列方法支持不同的屏幕尺寸：
- 确保您的布局能够根据屏幕适当地调整大小
- 根据屏幕配置提供合适的 UI 布局
- 确保对正确的屏幕应用正确的布局
- 提供可正常缩放的位图
具体适配方案：
1、使用“wrap_content”和“match_parent”
为确保您的布局能够灵活地适应不同的屏幕尺寸，您应该为某些视图组件的宽度和高度使用 “wrap_content” 和 “match_parent”，代替硬编码。
2、使用 RelativeLayout
RelativeLayout允许您根据组件之间的空间关系指定布局。
3、使用尺寸限定符
上述两种方案无法为每一种屏幕尺寸提供最佳用户体验。因此，您的应用不仅应实现灵活布局，还应针对不同的屏幕配置提供多种备选布局；可以利用配置限定符来实现此目的，它允许运行组件根据当前设备配置（如针对不同屏幕尺寸的不同布局设计）自动选择合适的资源。
例如，许多应用都针对大屏幕实现了“双窗格”模式（应用可以在一个窗格中显示项目列表，在另一个窗格中显示项目内容）。平板电脑和 TV 足够大，可在一个屏幕上同时容纳两个窗格，但手机屏幕只能独立显示它们。因此，如需实现这些布局，您可以建立以下文件：
res/layout/main.xml，单窗格（默认）布局：

    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，双窗格布局：

<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 英寸及更大尺寸的平板电脑）上，将选择此布局。对于小型设备，将选择另一个布局（无限定符）。
4、使用最小宽度限定符
Android 在 Android 3.2 中引入了“最小宽度”限定符。允许您将目标锁定在具有特定最小宽度（单位：dp）的屏幕。
例如，典型的 7 英寸平板电脑最小宽度为 600dp，因此，如果您希望您的 UI 在这些屏幕上显示两个窗格（但在较小屏幕上显示单个列表），您同样可以为单窗格布局和双窗格布局使用前文中的两种布局，但不使用 large 尺寸限定符，而是使用 sw600dp 为最小宽度是 600dp 的屏幕指定双窗格布局：

res/layout/main.xml，单窗格（默认）布局：

<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，双窗格布局：

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

这意味着，最小宽度大于或等于 600dp 的设备将选择 layout-sw600dp/main.xml（双窗格）布局，而屏幕较小的设备将选择 layout/main.xml（单窗格）布局。

不过，这种方法在低于 3.2 版本的设备上不太奏效，因为它们无法将 sw600dp 识别为尺寸限定符，所以您仍需使用 large 限定符。因此，您应该建立一个与 res/layout-sw600dp/main.xml 完全相同的、名为 res/layout-large/main.xml 的文件。下文介绍的技巧可让您避免因此而产生重复的布局文件
5、使用布局别名
最小宽度限定符仅在 Android 3.2 及更高版本上提供。因此，您仍应使用兼容早期版本的抽象尺寸容器（小、正常、大和超大）。例如，如果您想让自己设计的 UI 在手机上显示单窗格 UI，但在 7 英寸平板电脑、TV 及其他大屏设备上显示多窗格 UI，则需要提供下列文件：

res/layout/main.xml: 单窗格布局
res/layout-large: 多窗格布局
res/layout-sw600dp: 多窗格布局

后两个文件完全相同，因为其中一个将由 Android 3.2 设备匹配，另一个是为了照顾使用早期版本 Android 的平板电脑和 TV 的需要。

为避免为平板电脑和 TV 产生相同的重复文件（以及由此带来的维护难题），您可以使用别名文件。例如，您可以定义下列布局:

res/layout/main.xml，单窗格布局
res/layout/main_twopanes.xml，双窗格布局

并添加以下两个文件：

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>

后两个文件内容完全相同，但它们实际上并未定义布局，而只是将 main 设置为 main_twopanes 的别名。由于这些文件具有 large 和 sw600dp 选择器，因此它们适用于任何 Android 版本的平板电脑和电视（低于 3.2 版本的平板电脑和电视匹配 large，高于 3.2 版本者将匹配 sw600dp）
6、使用屏幕方向限定符
某些布局在横向和纵向屏幕方向下都表现不错，但其中大多数布局均可通过调整做进一步优化。在 News Reader 示例应用中，以下是布局在各种屏幕尺寸和屏幕方向下的行为：

小屏幕，纵向：单窗格，带徽标
小屏幕，横向：单窗格，带徽标
7 英寸平板电脑，纵向：单窗格，带操作栏
7 英寸平板电脑，横向：双窗格，宽，带操作栏
10 英寸平板电脑，纵向：双窗格，窄，带操作栏
10 英寸平板电脑，横向：双窗格，宽，带操作栏
TV，横向：双窗格，宽，带操作栏
因此，以上每一种布局都在 res/layout/ 目录下的某个 XML 文件中定义。如果之后需要将每一种布局分配给各种屏幕配置，应用会使用布局别名将它们与每一种配置进行匹配：

res/layout/onepane.xml:

<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/onepane_with_bar.xml:

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

res/layout/twopanes.xml：

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

res/layout/twopanes_narrow.xml：

<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="200dp"
              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>

至此所有可能的布局均已定义，现在只需使用配置限定符将正确的布局映射到每一种配置。现在您可以使用布局别名技巧来完成这项工作：

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>

7、使用九宫格位图（.9.png）