Android多屏尺寸适配实战技巧 从布局设计到资源管理从代码实现到性能优化全面解析如何让你的应用在各种尺寸设备上都能提供一致且流畅的用户体验

威震华夏关云长

引言

在Android开发中，多屏适配是一个永恒的话题。由于Android设备的碎片化特性，市场上存在着各种不同尺寸、不同分辨率、不同屏幕比例的设备。从4英寸的小屏手机到7英寸的平板，再到10英寸以上的大屏设备，甚至还有折叠屏等新兴形态，如何让应用在这些设备上都能提供一致且流畅的用户体验，是每个Android开发者都需要面对的挑战。

本文将从布局设计、资源管理、代码实现和性能优化四个方面，全面解析Android多屏尺寸适配的实战技巧，帮助开发者打造适配各种屏幕尺寸的高质量应用。

Android屏幕适配基础

在开始深入探讨适配技巧之前，我们需要了解一些Android屏幕相关的基础概念：

屏幕尺寸（Screen Size）

屏幕尺寸指的是屏幕物理对角线的长度，通常以英寸为单位。Android系统将屏幕尺寸分为以下几个类别：

• 小屏（small）：至少2.5英寸
• 普通屏（normal）：至少4英寸
• 大屏（large）：至少5英寸
• 超大屏（xlarge）：至少7英寸

屏幕密度（Screen Density）

屏幕密度指的是屏幕上单位面积内的像素数量，通常以dpi（dots per inch）为单位。Android系统将屏幕密度分为以下几个类别：

• ldpi（低密度）：约120dpi
• mdpi（中密度）：约160dpi
• hdpi（高密度）：约240dpi
• xhdpi（超高密度）：约320dpi
• xxhdpi（超超高密度）：约480dpi
• xxxhdpi（超超超高密度）：约640dpi

分辨率（Resolution）

分辨率指的是屏幕在水平和垂直方向上的像素数量，例如1920x1080。

独立像素（dp/sp）

为了解决不同屏幕密度带来的显示问题，Android引入了独立像素的概念：

• dp（Density-independent Pixel）：密度无关像素，用于定义UI元素的尺寸
• sp（Scale-independent Pixel）：可缩放像素，用于定义字体大小

dp与px的转换关系为：px = dp * (dpi / 160)

布局设计技巧

使用约束布局（ConstraintLayout）

ConstraintLayout是Android官方推荐的一种布局方式，它允许开发者通过定义控件之间的约束关系来创建灵活且复杂的布局，非常适合多屏适配。

2. <androidx.constraintlayout.widget.ConstraintLayout
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     xmlns:app="http://schemas.android.com/apk/res-auto"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent">
8.     <Button
9.         android:id="@+id/button1"
10.         android:layout_width="0dp"
11.         android:layout_height="wrap_content"
12.         android:text="Button 1"
13.         app:layout_constraintLeft_toLeftOf="parent"
14.         app:layout_constraintRight_toLeftOf="@+id/button2"
15.         app:layout_constraintTop_toTopOf="parent"
16.         app:layout_constraintHorizontal_weight="1" />
18.     <Button
19.         android:id="@+id/button2"
20.         android:layout_width="0dp"
21.         android:layout_height="wrap_content"
22.         android:text="Button 2"
23.         app:layout_constraintLeft_toRightOf="@+id/button1"
24.         app:layout_constraintRight_toRightOf="parent"
25.         app:layout_constraintTop_toTopOf="parent"
26.         app:layout_constraintHorizontal_weight="1" />
28.     <TextView
29.         android:id="@+id/textView"
30.         android:layout_width="wrap_content"
31.         android:layout_height="wrap_content"
32.         android:text="Hello World!"
33.         app:layout_constraintLeft_toLeftOf="parent"
34.         app:layout_constraintRight_toRightOf="parent"
35.         app:layout_constraintTop_toBottomOf="@+id/button1"
36.         app:layout_constraintBottom_toBottomOf="parent" />
38. </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

在上面的例子中，我们使用ConstraintLayout创建了两个等宽的按钮和一个居中的文本。通过设置layout_width="0dp"和layout_constraintHorizontal_weight属性，我们可以让两个按钮平分父容器的宽度。而文本视图则通过约束在父容器和按钮之间，实现了居中显示。

ConstraintLayout还支持百分比定位、基线对齐、链式布局等高级功能，可以满足各种复杂的布局需求。

使用百分比布局（PercentLayout）

百分比布局允许开发者使用百分比来定义子视图的尺寸和位置，非常适合多屏适配。虽然PercentFrameLayout和PercentRelativeLayout已经在Android Support Library 26.0.0中被标记为过时，但我们可以使用ConstraintLayout的百分比功能来实现类似的效果。

2. <androidx.constraintlayout.widget.ConstraintLayout
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     xmlns:app="http://schemas.android.com/apk/res-auto"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent">
8.     <View
9.         android:id="@+id/view1"
10.         android:layout_width="0dp"
11.         android:layout_height="0dp"
12.         android:background="@color/colorPrimary"
13.         app:layout_constraintWidth_percent="0.5"
14.         app:layout_constraintHeight_percent="0.3"
15.         app:layout_constraintTop_toTopOf="parent"
16.         app:layout_constraintLeft_toLeftOf="parent" />
18.     <View
19.         android:id="@+id/view2"
20.         android:layout_width="0dp"
21.         android:layout_height="0dp"
22.         android:background="@color/colorAccent"
23.         app:layout_constraintWidth_percent="0.5"
24.         app:layout_constraintHeight_percent="0.3"
25.         app:layout_constraintTop_toTopOf="parent"
26.         app:layout_constraintRight_toRightOf="parent" />
28. </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

在上面的例子中，我们使用ConstraintLayout的百分比功能创建了两个等大的视图，它们各占父容器宽度的一半和高度的30%。

使用线性布局（LinearLayout）和权重

LinearLayout是一种简单但强大的布局方式，通过使用权重（weight）属性，我们可以实现子视图按比例分配空间的效果。

2. <LinearLayout
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent"
6.     android:orientation="vertical">
8.     <TextView
9.         android:layout_width="match_parent"
10.         android:layout_height="0dp"
11.         android:layout_weight="1"
12.         android:gravity="center"
13.         android:text="Header"
14.         android:background="@color/colorPrimary" />
16.     <TextView
17.         android:layout_width="match_parent"
18.         android:layout_height="0dp"
19.         android:layout_weight="2"
20.         android:gravity="center"
21.         android:text="Content"
22.         android:background="@color/colorAccent" />
24.     <TextView
25.         android:layout_width="match_parent"
26.         android:layout_height="0dp"
27.         android:layout_weight="1"
28.         android:gravity="center"
29.         android:text="Footer"
30.         android:background="@color/colorPrimaryDark" />
32. </LinearLayout>

复制代码

在上面的例子中，我们使用LinearLayout的权重属性创建了三个部分，它们的高度比例为1:2:1。无论屏幕高度如何变化，这个比例都会保持不变。

使用帧布局（FrameLayout）

FrameLayout是一种简单的布局方式，它将所有子视图叠加在一起，后添加的子视图会覆盖在先添加的子视图之上。虽然看起来简单，但FrameLayout在某些场景下非常有用，例如实现覆盖效果或作为Fragment的容器。

2. <FrameLayout
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent">
7.     <ImageView
8.         android:layout_width="match_parent"
9.         android:layout_height="match_parent"
10.         android:scaleType="centerCrop"
11.         android:src="@drawable/background" />
13.     <TextView
14.         android:layout_width="wrap_content"
15.         android:layout_height="wrap_content"
16.         android:layout_gravity="center"
17.         android:text="Hello World!"
18.         android:textSize="24sp"
19.         android:textColor="@android:color/white" />
21. </FrameLayout>

复制代码

在上面的例子中，我们使用FrameLayout创建了一个背景图片和居中显示的文本。无论屏幕尺寸如何变化，文本都会保持在屏幕中央。

使用表格布局（TableLayout）

TableLayout允许开发者以表格形式排列子视图，适合显示表格数据。

2. <TableLayout
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent"
6.     android:stretchColumns="*">
8.     <TableRow>
9.         <TextView
10.             android:layout_width="wrap_content"
11.             android:layout_height="wrap_content"
12.             android:text="Name"
13.             android:padding="8dp"
14.             android:textStyle="bold" />
15.         <TextView
16.             android:layout_width="wrap_content"
17.             android:layout_height="wrap_content"
18.             android:text="Age"
19.             android:padding="8dp"
20.             android:textStyle="bold" />
21.         <TextView
22.             android:layout_width="wrap_content"
23.             android:layout_height="wrap_content"
24.             android:text="Occupation"
25.             android:padding="8dp"
26.             android:textStyle="bold" />
27.     </TableRow>
29.     <TableRow>
30.         <TextView
31.             android:layout_width="wrap_content"
32.             android:layout_height="wrap_content"
33.             android:text="John"
34.             android:padding="8dp" />
35.         <TextView
36.             android:layout_width="wrap_content"
37.             android:layout_height="wrap_content"
38.             android:text="30"
39.             android:padding="8dp" />
40.         <TextView
41.             android:layout_width="wrap_content"
42.             android:layout_height="wrap_content"
43.             android:text="Engineer"
44.             android:padding="8dp" />
45.     </TableRow>
47.     <TableRow>
48.         <TextView
49.             android:layout_width="wrap_content"
50.             android:layout_height="wrap_content"
51.             android:text="Alice"
52.             android:padding="8dp" />
53.         <TextView
54.             android:layout_width="wrap_content"
55.             android:layout_height="wrap_content"
56.             android:text="25"
57.             android:padding="8dp" />
58.         <TextView
59.             android:layout_width="wrap_content"
60.             android:layout_height="wrap_content"
61.             android:text="Designer"
62.             android:padding="8dp" />
63.     </TableRow>
65. </TableLayout>

复制代码

在上面的例子中，我们使用TableLayout创建了一个简单的表格，通过设置android:stretchColumns="*"，所有列都会平均分配可用宽度，使表格在不同屏幕尺寸上都能良好显示。

使用网格布局（GridLayout）

GridLayout允许开发者将子视图排列在网格中，适合创建复杂的网格状布局。

2. <GridLayout
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent"
6.     android:columnCount="3"
7.     android:rowCount="3">
9.     <Button
10.         android:layout_width="0dp"
11.         android:layout_height="0dp"
12.         android:layout_columnWeight="1"
13.         android:layout_rowWeight="1"
14.         android:text="1" />
16.     <Button
17.         android:layout_width="0dp"
18.         android:layout_height="0dp"
19.         android:layout_columnWeight="1"
20.         android:layout_rowWeight="1"
21.         android:text="2" />
23.     <Button
24.         android:layout_width="0dp"
25.         android:layout_height="0dp"
26.         android:layout_columnWeight="1"
27.         android:layout_rowWeight="1"
28.         android:text="3" />
30.     <Button
31.         android:layout_width="0dp"
32.         android:layout_height="0dp"
33.         android:layout_columnWeight="1"
34.         android:layout_rowWeight="1"
35.         android:text="4" />
37.     <Button
38.         android:layout_width="0dp"
39.         android:layout_height="0dp"
40.         android:layout_columnWeight="1"
41.         android:layout_rowWeight="1"
42.         android:text="5" />
44.     <Button
45.         android:layout_width="0dp"
46.         android:layout_height="0dp"
47.         android:layout_columnWeight="1"
48.         android:layout_rowWeight="1"
49.         android:text="6" />
51.     <Button
52.         android:layout_width="0dp"
53.         android:layout_height="0dp"
54.         android:layout_columnWeight="1"
55.         android:layout_rowWeight="1"
56.         android:text="7" />
58.     <Button
59.         android:layout_width="0dp"
60.         android:layout_height="0dp"
61.         android:layout_columnWeight="1"
62.         android:layout_rowWeight="1"
63.         android:text="8" />
65.     <Button
66.         android:layout_width="0dp"
67.         android:layout_height="0dp"
68.         android:layout_columnWeight="1"
69.         android:layout_rowWeight="1"
70.         android:text="9" />
72. </GridLayout>

复制代码

在上面的例子中，我们使用GridLayout创建了一个3x3的按钮网格，通过设置layout_columnWeight和layout_rowWeight属性，所有按钮都会平均分配可用空间，使网格在不同屏幕尺寸上都能良好显示。

资源管理技巧

提供不同屏幕尺寸的资源

Android允许开发者根据屏幕尺寸提供不同的资源，例如布局、图片等。这可以通过在资源文件夹名称中添加限定符来实现。

2. res/
3.     layout/         # 默认布局
4.         main.xml
5.     layout-large/    # 大屏布局
6.         main.xml
7.     layout-xlarge/   # 超大屏布局
8.         main.xml

复制代码

在上面的例子中，我们为不同屏幕尺寸提供了不同的布局文件。系统会根据设备的屏幕尺寸自动选择合适的布局文件。

提供不同屏幕密度的资源

同样，我们也可以根据屏幕密度提供不同的资源，例如图片。

2. res/
3.     drawable-mdpi/    # 中密度图片
4.         icon.png
5.     drawable-hdpi/    # 高密度图片
6.         icon.png
7.     drawable-xhdpi/   # 超高密度图片
8.         icon.png
9.     drawable-xxhdpi/  # 超超高密度图片
10.         icon.png
11.     drawable-xxxhdpi/ # 超超超高密度图片
12.         icon.png

复制代码

在上面的例子中，我们为不同屏幕密度提供了不同分辨率的图片。系统会根据设备的屏幕密度自动选择合适的图片。

提供不同方向的资源

我们还可以根据屏幕方向提供不同的资源，例如布局。

2. res/
3.     layout/         # 默认布局
4.         main.xml
5.     layout-land/    # 横屏布局
6.         main.xml
7.     layout-port/    # 竖屏布局
8.         main.xml

复制代码

在上面的例子中，我们为不同屏幕方向提供了不同的布局文件。系统会根据设备的屏幕方向自动选择合适的布局文件。

使用sw和w限定符

除了传统的尺寸和密度限定符，Android还提供了更灵活的限定符，例如smallestWidth（sw）和availableWidth（w）。

2. res/
3.     layout/         # 默认布局
4.         main.xml
5.     layout-sw600dp/ # 最小宽度大于等于600dp的布局
6.         main.xml
7.     layout-w720dp/  # 可用宽度大于等于720dp的布局
8.         main.xml

复制代码

在上面的例子中，我们使用sw和w限定符为不同宽度的设备提供了不同的布局文件。sw限定符表示屏幕的最小宽度（不考虑方向），而w限定符表示屏幕的可用宽度（考虑方向）。

使用smallestWidth限定符

smallestWidth（sw）限定符是Android 3.2引入的一种新的屏幕尺寸分类方式，它表示屏幕的最小宽度（以dp为单位），不考虑屏幕方向。

2. res/
3.     layout/         # 默认布局
4.         main.xml
5.     layout-sw600dp/ # 最小宽度大于等于600dp的布局
6.         main.xml
7.     layout-sw720dp/ # 最小宽度大于等于720dp的布局
8.         main.xml

复制代码

在上面的例子中，我们使用sw限定符为不同最小宽度的设备提供了不同的布局文件。这种方式的优点是它考虑了屏幕的实际可用空间，而不是仅仅依赖于屏幕尺寸类别。

使用可用宽度限定符

availableWidth（w）限定符表示屏幕的可用宽度（以dp为单位），考虑屏幕方向。

2. res/
3.     layout/         # 默认布局
4.         main.xml
5.     layout-w600dp/  # 可用宽度大于等于600dp的布局
6.         main.xml
7.     layout-w720dp/  # 可用宽度大于等于720dp的布局
8.         main.xml

复制代码

在上面的例子中，我们使用w限定符为不同可用宽度的设备提供了不同的布局文件。这种方式的优点是它可以根据屏幕方向动态调整布局。

使用可用高度限定符

availableHeight（h）限定符表示屏幕的可用高度（以dp为单位），考虑屏幕方向。

2. res/
3.     layout/         # 默认布局
4.         main.xml
5.     layout-h600dp/  # 可用高度大于等于600dp的布局
6.         main.xml
7.     layout-h720dp/  # 可用高度大于等于720dp的布局
8.         main.xml

复制代码

在上面的例子中，我们使用h限定符为不同可用高度的设备提供了不同的布局文件。这种方式的优点是它可以根据屏幕方向动态调整布局。

代码实现技巧

获取屏幕尺寸和密度

在代码中，我们可以通过WindowManager获取屏幕的尺寸和密度信息。

2. // 获取屏幕尺寸
3. WindowManager windowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
4. DisplayMetrics displayMetrics = new DisplayMetrics();
5. windowManager.getDefaultDisplay().getMetrics(displayMetrics);
7. int screenWidth = displayMetrics.widthPixels;  // 屏幕宽度（像素）
8. int screenHeight = displayMetrics.heightPixels;  // 屏幕高度（像素）
9. float screenDensity = displayMetrics.density;  // 屏幕密度
10. int screenDensityDpi = displayMetrics.densityDpi;  // 屏幕密度（dpi）
12. // 将像素转换为dp
13. int screenWidthDp = (int) (screenWidth / screenDensity);
14. int screenHeightDp = (int) (screenHeight / screenDensity);
16. Log.d("ScreenInfo", "Screen size: " + screenWidth + "x" + screenHeight + " pixels");
17. Log.d("ScreenInfo", "Screen size: " + screenWidthDp + "x" + screenHeightDp + " dp");
18. Log.d("ScreenInfo", "Screen density: " + screenDensity + " (" + screenDensityDpi + " dpi)");

复制代码

在上面的例子中，我们获取了屏幕的尺寸和密度信息，并将像素转换为dp。这些信息可以用于动态调整布局参数。

动态调整布局参数

在代码中，我们可以根据屏幕尺寸动态调整布局参数。

2. // 获取视图
3. View view = findViewById(R.id.view);
5. // 获取视图的布局参数
6. ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
8. // 根据屏幕宽度调整视图宽度
9. WindowManager windowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
10. DisplayMetrics displayMetrics = new DisplayMetrics();
11. windowManager.getDefaultDisplay().getMetrics(displayMetrics);
12. int screenWidthDp = (int) (displayMetrics.widthPixels / displayMetrics.density);
14. if (screenWidthDp >= 600) {
15.     // 平板设备
16.     layoutParams.width = (int) (screenWidthDp * 0.5 * displayMetrics.density);
17. } else {
18.     // 手机设备
19.     layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
20. }
22. // 应用新的布局参数
23. view.setLayoutParams(layoutParams);

复制代码

在上面的例子中，我们根据屏幕宽度动态调整了视图的宽度。如果屏幕宽度大于等于600dp（平板设备），我们将视图宽度设置为屏幕宽度的一半；否则，我们将视图宽度设置为MATCH_PARENT。

使用 dimens.xml 资源文件

使用dimens.xml资源文件可以方便地管理不同屏幕尺寸的尺寸值。

2. res/
3.     values/
4.         dimens.xml
5.     values-sw600dp/
6.         dimens.xml
7.     values-sw720dp/
8.         dimens.xml

复制代码

values/dimens.xml:

2. <resources>
3.     <dimen name="margin">16dp</dimen>
4.     <dimen name="text_size">16sp</dimen>
5.     <dimen name="button_height">48dp</dimen>
6. </resources>

复制代码

values-sw600dp/dimens.xml:

2. <resources>
3.     <dimen name="margin">24dp</dimen>
4.     <dimen name="text_size">18sp</dimen>
5.     <dimen name="button_height">56dp</dimen>
6. </resources>

复制代码

values-sw720dp/dimens.xml:

2. <resources>
3.     <dimen name="margin">32dp</dimen>
4.     <dimen name="text_size">20sp</dimen>
5.     <dimen name="button_height">64dp</dimen>
6. </resources>

复制代码

在布局文件中使用这些尺寸值：

2. <TextView
3.     android:layout_width="match_parent"
4.     android:layout_height="wrap_content"
5.     android:layout_margin="@dimen/margin"
6.     android:textSize="@dimen/text_size"
7.     android:text="Hello World!" />
9. <Button
10.     android:layout_width="match_parent"
11.     android:layout_height="@dimen/button_height"
12.     android:layout_margin="@dimen/margin"
13.     android:text="Click Me" />

复制代码

在上面的例子中，我们为不同屏幕尺寸提供了不同的尺寸值。系统会根据设备的屏幕尺寸自动选择合适的尺寸值，使布局在不同屏幕尺寸上都能良好显示。

使用自定义View

在某些情况下，我们可能需要创建自定义View来实现更灵活的屏幕适配。

2. public class ResponsiveView extends View {
3.     private Paint paint;
4.     private int screenWidth;
5.     private int screenHeight;
7.     public ResponsiveView(Context context) {
8.         super(context);
9.         init();
10.     }
12.     public ResponsiveView(Context context, AttributeSet attrs) {
13.         super(context, attrs);
14.         init();
15.     }
17.     public ResponsiveView(Context context, AttributeSet attrs, int defStyleAttr) {
18.         super(context, attrs, defStyleAttr);
19.         init();
20.     }
22.     private void init() {
23.         paint = new Paint();
24.         paint.setColor(Color.BLUE);
25.         paint.setTextSize(48f);
26.         paint.setTextAlign(Paint.Align.CENTER);
27.     }
29.     @Override
30.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
31.         super.onSizeChanged(w, h, oldw, oldh);
32.         screenWidth = w;
33.         screenHeight = h;
34.     }
36.     @Override
37.     protected void onDraw(Canvas canvas) {
38.         super.onDraw(canvas);
39.         
40.         // 根据屏幕尺寸调整绘制内容
41.         if (screenWidth >= 600 * getResources().getDisplayMetrics().density) {
42.             // 平板设备
43.             canvas.drawText("Tablet View", screenWidth / 2, screenHeight / 2, paint);
44.         } else {
45.             // 手机设备
46.             canvas.drawText("Phone View", screenWidth / 2, screenHeight / 2, paint);
47.         }
48.     }
49. }

复制代码

在上面的例子中，我们创建了一个自定义View，它会根据屏幕尺寸绘制不同的内容。在onSizeChanged方法中，我们获取了View的尺寸；在onDraw方法中，我们根据屏幕尺寸绘制了不同的文本。

使用RecyclerView和GridLayoutManager

RecyclerView是一个强大的列表控件，结合GridLayoutManager可以实现灵活的网格布局，非常适合多屏适配。

2. // 获取屏幕宽度
3. WindowManager windowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
4. DisplayMetrics displayMetrics = new DisplayMetrics();
5. windowManager.getDefaultDisplay().getMetrics(displayMetrics);
6. int screenWidthDp = (int) (displayMetrics.widthPixels / displayMetrics.density);
8. // 根据屏幕宽度计算列数
9. int spanCount;
10. if (screenWidthDp >= 1200) {
11.     spanCount = 5;  // 大平板
12. } else if (screenWidthDp >= 800) {
13.     spanCount = 4;  // 小平板
14. } else if (screenWidthDp >= 600) {
15.     spanCount = 3;  // 大手机
16. } else {
17.     spanCount = 2;  // 小手机
18. }
20. // 设置RecyclerView的LayoutManager
21. RecyclerView recyclerView = findViewById(R.id.recycler_view);
22. recyclerView.setLayoutManager(new GridLayoutManager(this, spanCount));
24. // 设置Adapter
25. recyclerView.setAdapter(new MyAdapter());

复制代码

在上面的例子中，我们根据屏幕宽度动态计算了RecyclerView的列数，使网格布局在不同屏幕尺寸上都能良好显示。

性能优化技巧

避免过度绘制

过度绘制是指屏幕上的某个像素在同一帧中被绘制多次，这会浪费GPU资源，降低UI性能。我们可以通过以下方式避免过度绘制：

1. 使用布局层次查看器（Layout Inspector）检查布局层次
2. 移除不必要的背景
3. 使用ConstraintLayout减少布局层次
4. 使用ViewStub延迟加载不常用的视图

2. <!-- 移除不必要的背景 -->
3. <LinearLayout
4.     xmlns:android="http://schemas.android.com/apk/res/android"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent"
7.     android:orientation="vertical">
8.     <!-- 不要设置背景，除非必要 -->
9.    
10.     <TextView
11.         android:layout_width="match_parent"
12.         android:layout_height="wrap_content"
13.         android:text="Hello World!" />
14.         
15. </LinearLayout>

复制代码

在上面的例子中，我们移除了LinearLayout的背景，避免了不必要的过度绘制。

使用ViewStub延迟加载

ViewStub是一种轻量级的视图，它不会参与布局和绘制，直到被显式地 inflate 或设置为可见。这使得它非常适合延迟加载不常用的视图。

2. <ViewStub
3.     android:id="@+id/stub_import"
4.     android:inflatedId="@+id/panel_import"
5.     android:layout="@layout/progress_overlay"
6.     android:layout_width="match_parent"
7.     android:layout_height="wrap_content"
8.     android:layout_gravity="bottom" />

复制代码

在代码中，我们可以根据需要加载ViewStub：

2. ViewStub stub = findViewById(R.id.stub_import);
3. View inflated = stub.inflate();
5. // 或者
6. stub.setVisibility(View.VISIBLE);

复制代码

在上面的例子中，我们使用ViewStub延迟加载了一个进度覆盖层。只有在需要显示进度时，我们才会加载这个视图，从而提高了性能。

使用include和merge标签优化布局

使用include标签可以重用布局，而使用merge标签可以减少布局层次，提高性能。

2. <!-- res/layout/common_title.xml -->
3. <merge xmlns:android="http://schemas.android.com/apk/res/android">
4.    
5.     <TextView
6.         android:id="@+id/title"
7.         android:layout_width="match_parent"
8.         android:layout_height="wrap_content"
9.         android:textSize="20sp"
10.         android:textStyle="bold" />
11.         
12.     <View
13.         android:layout_width="match_parent"
14.         android:layout_height="1dp"
15.         android:background="@color/divider" />
16.         
17. </merge>

复制代码

2. <!-- res/layout/main.xml -->
3. <LinearLayout
4.     xmlns:android="http://schemas.android.com/apk/res/android"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent"
7.     android:orientation="vertical">
8.    
9.     <include layout="@layout/common_title" />
10.    
11.     <!-- 其他内容 -->
12.    
13. </LinearLayout>

复制代码

在上面的例子中，我们使用include标签重用了common_title.xml布局，并使用merge标签减少了布局层次，提高了性能。

使用矢量图替代位图

矢量图（VectorDrawable）是一种基于XML的图像格式，它可以无损缩放，适合多屏适配。与位图相比，矢量图有以下优点：

1. 文件大小更小
2. 可以无损缩放，适应不同屏幕密度
3. 可以动态修改颜色等属性

2. <!-- res/drawable/ic_android.xml -->
3. <vector xmlns:android="http://schemas.android.com/apk/res/android"
4.     android:width="24dp"
5.     android:height="24dp"
6.     android:viewportWidth="24.0"
7.     android:viewportHeight="24.0">
8.     <path
9.         android:fillColor="#FF000000"
10.         android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5V19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5V19h1c0.55,0 1,-0.45 1,-1V8H6v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7C22,8.67 21.33,8 20.5,8z"/>
11. </vector>

复制代码

在上面的例子中，我们使用矢量图创建了一个Android机器人图标。这个图标可以无损缩放，适应不同屏幕密度。

使用WebP格式图片

WebP是一种现代的图像格式，它提供了比JPEG和PNG更好的压缩率。使用WebP格式图片可以减少APK大小，提高加载速度。

在Android Studio中，我们可以将PNG或JPEG图片转换为WebP格式：

1. 右键点击图片文件
2. 选择”Convert to WebP”
3. 在弹出的对话框中设置转换参数
4. 点击”OK”完成转换

2. <!-- 使用WebP格式图片 -->
3. <ImageView
4.     android:layout_width="wrap_content"
5.     android:layout_height="wrap_content"
6.     android:src="@drawable/image_webp" />

复制代码

在上面的例子中，我们使用了一个WebP格式的图片。与PNG或JPEG相比，WebP格式的图片通常更小，加载速度更快。

实战案例分析

案例一：新闻应用的多屏适配

假设我们正在开发一个新闻应用，它需要在手机和平板上都能提供良好的用户体验。

对于手机设备，我们使用单列布局：

2. <!-- res/layout/activity_main.xml -->
3. <LinearLayout
4.     xmlns:android="http://schemas.android.com/apk/res/android"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent"
7.     android:orientation="vertical">
9.     <androidx.recyclerview.widget.RecyclerView
10.         android:id="@+id/recycler_view"
11.         android:layout_width="match_parent"
12.         android:layout_height="match_parent" />
14. </LinearLayout>

复制代码

对于平板设备，我们使用双列布局：

2. <!-- res/layout-sw600dp/activity_main.xml -->
3. <LinearLayout
4.     xmlns:android="http://schemas.android.com/apk/res/android"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent"
7.     android:orientation="horizontal"
8.     android:baselineAligned="false">
10.     <androidx.recyclerview.widget.RecyclerView
11.         android:id="@+id/recycler_view"
12.         android:layout_width="0dp"
13.         android:layout_height="match_parent"
14.         android:layout_weight="1" />
16.     <FrameLayout
17.         android:id="@+id/detail_container"
18.         android:layout_width="0dp"
19.         android:layout_height="match_parent"
20.         android:layout_weight="2" />
22. </LinearLayout>

复制代码

在Activity中，我们根据设备类型决定是否使用双列布局：

2. public class MainActivity extends AppCompatActivity {
3.     private boolean isTwoPane;
5.     @Override
6.     protected void onCreate(Bundle savedInstanceState) {
7.         super.onCreate(savedInstanceState);
8.         setContentView(R.layout.activity_main);
10.         // 检查是否是双列布局
11.         if (findViewById(R.id.detail_container) != null) {
12.             isTwoPane = true;
13.         }
15.         // 设置RecyclerView
16.         RecyclerView recyclerView = findViewById(R.id.recycler_view);
17.         recyclerView.setLayoutManager(new LinearLayoutManager(this));
18.         recyclerView.setAdapter(new NewsAdapter(this, isTwoPane));
19.     }
20. }

复制代码

在Adapter中，我们根据设备类型处理点击事件：

2. public class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder> {
3.     private Context context;
4.     private boolean isTwoPane;
6.     public NewsAdapter(Context context, boolean isTwoPane) {
7.         this.context = context;
8.         this.isTwoPane = isTwoPane;
9.     }
11.     @Override
12.     public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
13.         // 绑定数据...
15.         holder.itemView.setOnClickListener(v -> {
16.             if (isTwoPane) {
17.                 // 平板设备，在右侧显示详情
18.                 NewsDetailFragment fragment = NewsDetailFragment.newInstance(position);
19.                 ((AppCompatActivity) context).getSupportFragmentManager()
20.                     .beginTransaction()
21.                     .replace(R.id.detail_container, fragment)
22.                     .commit();
23.             } else {
24.                 // 手机设备，跳转到详情Activity
25.                 Intent intent = new Intent(context, NewsDetailActivity.class);
26.                 intent.putExtra(NewsDetailActivity.EXTRA_POSITION, position);
27.                 context.startActivity(intent);
28.             }
29.         });
30.     }
31.     // ...
32. }

复制代码

我们为不同屏幕密度提供了不同分辨率的图片：

2. res/
3.     drawable-mdpi/
4.         news_image.png
5.     drawable-hdpi/
6.         news_image.png
7.     drawable-xhdpi/
8.         news_image.png
9.     drawable-xxhdpi/
10.         news_image.png
11.     drawable-xxxhdpi/
12.         news_image.png

复制代码

我们为不同屏幕尺寸提供了不同的尺寸值：

values/dimens.xml:

2. <resources>
3.     <dimen name="news_item_height">100dp</dimen>
4.     <dimen name="news_item_padding">16dp</dimen>
5.     <dimen name="news_title_text_size">16sp</dimen>
6.     <dimen name="news_summary_text_size">14sp</dimen>
7. </resources>

复制代码

values-sw600dp/dimens.xml:

2. <resources>
3.     <dimen name="news_item_height">120dp</dimen>
4.     <dimen name="news_item_padding">24dp</dimen>
5.     <dimen name="news_title_text_size">18sp</dimen>
6.     <dimen name="news_summary_text_size">16sp</dimen>
7. </resources>

复制代码

我们使用以下技术优化性能：

1. 使用Glide加载图片，并设置占位图和错误图：

2. Glide.with(context)
3.     .load(news.getImageUrl())
4.     .placeholder(R.drawable.placeholder)
5.     .error(R.drawable.error)
6.     .into(holder.imageView);

复制代码

1. 使用RecyclerView的ViewHolder模式：

2. public class ViewHolder extends RecyclerView.ViewHolder {
3.     ImageView imageView;
4.     TextView titleTextView;
5.     TextView summaryTextView;
7.     public ViewHolder(View itemView) {
8.         super(itemView);
9.         imageView = itemView.findViewById(R.id.image_view);
10.         titleTextView = itemView.findViewById(R.id.title_text_view);
11.         summaryTextView = itemView.findViewById(R.id.summary_text_view);
12.     }
13. }

复制代码

1. 使用WebP格式图片替代PNG图片，减少APK大小。

案例二：电商应用的多屏适配

假设我们正在开发一个电商应用，它需要在各种设备上都能提供良好的购物体验。

对于小屏手机，我们使用单列网格布局：

2. <!-- res/layout/activity_product_list.xml -->
3. <androidx.recyclerview.widget.RecyclerView
4.     xmlns:android="http://schemas.android.com/apk/res/android"
5.     android:id="@+id/recycler_view"
6.     android:layout_width="match_parent"
7.     android:layout_height="match_parent" />

复制代码

对于大屏手机，我们使用双列网格布局：

2. <!-- res/layout-sw400dp/activity_product_list.xml -->
3. <androidx.recyclerview.widget.RecyclerView
4.     xmlns:android="http://schemas.android.com/apk/res/android"
5.     android:id="@+id/recycler_view"
6.     android:layout_width="match_parent"
7.     android:layout_height="match_parent" />

复制代码

对于平板设备，我们使用三列网格布局：

2. <!-- res/layout-sw600dp/activity_product_list.xml -->
3. <androidx.recyclerview.widget.RecyclerView
4.     xmlns:android="http://schemas.android.com/apk/res/android"
5.     android:id="@+id/recycler_view"
6.     android:layout_width="match_parent"
7.     android:layout_height="match_parent" />

复制代码

在Activity中，我们根据屏幕宽度动态设置RecyclerView的列数：

2. public class ProductListActivity extends AppCompatActivity {
3.     @Override
4.     protected void onCreate(Bundle savedInstanceState) {
5.         super.onCreate(savedInstanceState);
6.         setContentView(R.layout.activity_product_list);
8.         // 获取屏幕宽度
9.         WindowManager windowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
10.         DisplayMetrics displayMetrics = new DisplayMetrics();
11.         windowManager.getDefaultDisplay().getMetrics(displayMetrics);
12.         int screenWidthDp = (int) (displayMetrics.widthPixels / displayMetrics.density);
14.         // 根据屏幕宽度计算列数
15.         int spanCount;
16.         if (screenWidthDp >= 600) {
17.             spanCount = 3;  // 平板设备
18.         } else if (screenWidthDp >= 400) {
19.             spanCount = 2;  // 大屏手机
20.         } else {
21.             spanCount = 1;  // 小屏手机
22.         }
24.         // 设置RecyclerView的LayoutManager
25.         RecyclerView recyclerView = findViewById(R.id.recycler_view);
26.         recyclerView.setLayoutManager(new GridLayoutManager(this, spanCount));
27.         recyclerView.setAdapter(new ProductAdapter());
28.     }
29. }

复制代码

在Adapter中，我们使用ConstraintLayout创建灵活的商品项布局：

2. <!-- res/layout/item_product.xml -->
3. <androidx.constraintlayout.widget.ConstraintLayout
4.     xmlns:android="http://schemas.android.com/apk/res/android"
5.     xmlns:app="http://schemas.android.com/apk/res-auto"
6.     android:layout_width="match_parent"
7.     android:layout_height="wrap_content"
8.     android:padding="8dp">
10.     <ImageView
11.         android:id="@+id/image_view"
12.         android:layout_width="0dp"
13.         android:layout_height="0dp"
14.         android:scaleType="centerCrop"
15.         app:layout_constraintDimensionRatio="1:1"
16.         app:layout_constraintLeft_toLeftOf="parent"
17.         app:layout_constraintRight_toRightOf="parent"
18.         app:layout_constraintTop_toTopOf="parent" />
20.     <TextView
21.         android:id="@+id/title_text_view"
22.         android:layout_width="0dp"
23.         android:layout_height="wrap_content"
24.         android:ellipsize="end"
25.         android:maxLines="2"
26.         android:textSize="14sp"
27.         app:layout_constraintLeft_toLeftOf="parent"
28.         app:layout_constraintRight_toRightOf="parent"
29.         app:layout_constraintTop_toBottomOf="@id/image_view" />
31.     <TextView
32.         android:id="@+id/price_text_view"
33.         android:layout_width="0dp"
34.         android:layout_height="wrap_content"
35.         android:textColor="@color/colorAccent"
36.         android:textSize="16sp"
37.         android:textStyle="bold"
38.         app:layout_constraintLeft_toLeftOf="parent"
39.         app:layout_constraintRight_toRightOf="parent"
40.         app:layout_constraintTop_toBottomOf="@id/title_text_view" />
42. </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

我们为不同屏幕密度提供了不同分辨率的图片：

2. res/
3.     drawable-mdpi/
4.         product_image.jpg
5.     drawable-hdpi/
6.         product_image.jpg
7.     drawable-xhdpi/
8.         product_image.jpg
9.     drawable-xxhdpi/
10.         product_image.jpg
11.     drawable-xxxhdpi/
12.         product_image.jpg

复制代码

我们为不同屏幕尺寸提供了不同的尺寸值：

values/dimens.xml:

2. <resources>
3.     <dimen name="product_item_padding">8dp</dimen>
4.     <dimen name="product_title_text_size">14sp</dimen>
5.     <dimen name="product_price_text_size">16sp</dimen>
6. </resources>

复制代码

values-sw600dp/dimens.xml:

2. <resources>
3.     <dimen name="product_item_padding">12dp</dimen>
4.     <dimen name="product_title_text_size">16sp</dimen>
5.     <dimen name="product_price_text_size">18sp</dimen>
6. </resources>

复制代码

我们使用以下技术优化性能：

1. 使用Glide加载图片，并设置占位图和错误图：

2. Glide.with(context)
3.     .load(product.getImageUrl())
4.     .placeholder(R.drawable.placeholder)
5.     .error(R.drawable.error)
6.     .into(holder.imageView);

复制代码

1. 使用RecyclerView的ViewHolder模式和DiffUtil：

2. public class ProductAdapter extends RecyclerView.Adapter<ProductAdapter.ViewHolder> {
3.     private List<Product> productList = new ArrayList<>();
5.     public void updateProducts(List<Product> newProducts) {
6.         DiffUtil.DiffResult diffResult = DiffUtil.calculateDiff(new ProductDiffCallback(productList, newProducts));
7.         productList.clear();
8.         productList.addAll(newProducts);
9.         diffResult.dispatchUpdatesTo(this);
10.     }
12.     // ...
13. }
15. class ProductDiffCallback extends DiffUtil.Callback {
16.     private List<Product> oldList;
17.     private List<Product> newList;
19.     public ProductDiffCallback(List<Product> oldList, List<Product> newList) {
20.         this.oldList = oldList;
21.         this.newList = newList;
22.     }
24.     @Override
25.     public int getOldListSize() {
26.         return oldList.size();
27.     }
29.     @Override
30.     public int getNewListSize() {
31.         return newList.size();
32.     }
34.     @Override
35.     public boolean areItemsTheSame(int oldItemPosition, int newItemPosition) {
36.         return oldList.get(oldItemPosition).getId() == newList.get(newItemPosition).getId();
37.     }
39.     @Override
40.     public boolean areContentsTheSame(int oldItemPosition, int newItemPosition) {
41.         Product oldProduct = oldList.get(oldItemPosition);
42.         Product newProduct = newList.get(newItemPosition);
43.         return oldProduct.equals(newProduct);
44.     }
45. }

复制代码

1. 使用WebP格式图片替代PNG图片，减少APK大小。
2. 使用ConstraintLayout减少布局层次，提高性能。

使用WebP格式图片替代PNG图片，减少APK大小。

使用ConstraintLayout减少布局层次，提高性能。

总结与最佳实践

Android多屏尺寸适配是一个复杂但必要的过程，它涉及到布局设计、资源管理、代码实现和性能优化等多个方面。以下是一些最佳实践，可以帮助开发者更好地进行多屏适配：

布局设计最佳实践

1. 使用ConstraintLayout：ConstraintLayout是Android官方推荐的一种布局方式，它允许开发者通过定义控件之间的约束关系来创建灵活且复杂的布局，非常适合多屏适配。
2. 避免硬编码尺寸：使用dp和sp而不是px来定义UI元素的尺寸和字体大小，这样可以确保UI在不同屏幕密度的设备上看起来一致。
3. 使用wrap_content和match_parent：尽量使用wrap_content和match_parent而不是固定尺寸，这样可以让UI元素根据内容或父容器自动调整大小。
4. 使用权重和百分比：在LinearLayout和ConstraintLayout中使用权重和百分比，可以让UI元素按比例分配空间，适应不同屏幕尺寸。

使用ConstraintLayout：ConstraintLayout是Android官方推荐的一种布局方式，它允许开发者通过定义控件之间的约束关系来创建灵活且复杂的布局，非常适合多屏适配。

避免硬编码尺寸：使用dp和sp而不是px来定义UI元素的尺寸和字体大小，这样可以确保UI在不同屏幕密度的设备上看起来一致。

使用wrap_content和match_parent：尽量使用wrap_content和match_parent而不是固定尺寸，这样可以让UI元素根据内容或父容器自动调整大小。

使用权重和百分比：在LinearLayout和ConstraintLayout中使用权重和百分比，可以让UI元素按比例分配空间，适应不同屏幕尺寸。

资源管理最佳实践

1. 提供不同屏幕密度的资源：为不同屏幕密度提供不同分辨率的图片，确保图片在不同设备上看起来清晰。
2. 使用限定符：使用sw、w、h等限定符为不同屏幕尺寸提供不同的布局和资源，这样可以针对不同设备优化UI。
3. 使用dimens.xml：使用dimens.xml资源文件管理尺寸值，为不同屏幕尺寸提供不同的尺寸值，这样可以方便地调整UI元素的大小和间距。
4. 使用矢量图：使用矢量图替代位图，这样可以无损缩放，适应不同屏幕密度，同时减少APK大小。

提供不同屏幕密度的资源：为不同屏幕密度提供不同分辨率的图片，确保图片在不同设备上看起来清晰。

使用限定符：使用sw、w、h等限定符为不同屏幕尺寸提供不同的布局和资源，这样可以针对不同设备优化UI。

使用dimens.xml：使用dimens.xml资源文件管理尺寸值，为不同屏幕尺寸提供不同的尺寸值，这样可以方便地调整UI元素的大小和间距。

使用矢量图：使用矢量图替代位图，这样可以无损缩放，适应不同屏幕密度，同时减少APK大小。

代码实现最佳实践

1. 获取屏幕尺寸和密度：在代码中获取屏幕尺寸和密度，根据这些信息动态调整UI。
2. 动态调整布局参数：根据屏幕尺寸动态调整布局参数，例如调整RecyclerView的列数、调整View的尺寸等。
3. 使用RecyclerView：使用RecyclerView和GridLayoutManager创建灵活的列表和网格布局，适应不同屏幕尺寸。
4. 使用Fragment：使用Fragment创建模块化的UI，可以在不同屏幕尺寸上组合不同的Fragment，例如在平板上使用双列布局，在手机上使用单列布局。

获取屏幕尺寸和密度：在代码中获取屏幕尺寸和密度，根据这些信息动态调整UI。

动态调整布局参数：根据屏幕尺寸动态调整布局参数，例如调整RecyclerView的列数、调整View的尺寸等。

使用RecyclerView：使用RecyclerView和GridLayoutManager创建灵活的列表和网格布局，适应不同屏幕尺寸。

使用Fragment：使用Fragment创建模块化的UI，可以在不同屏幕尺寸上组合不同的Fragment，例如在平板上使用双列布局，在手机上使用单列布局。

性能优化最佳实践

1. 避免过度绘制：移除不必要的背景，减少布局层次，使用ConstraintLayout等，避免过度绘制。
2. 使用ViewStub：使用ViewStub延迟加载不常用的视图，减少内存占用和初始化时间。
3. 使用include和merge：使用include标签重用布局，使用merge标签减少布局层次，提高性能。
4. 使用WebP格式图片：使用WebP格式图片替代PNG或JPEG图片，减少APK大小，提高加载速度。
5. 使用图片加载库：使用Glide或Picasso等图片加载库，它们会自动处理图片的缩放和缓存，提高性能。

避免过度绘制：移除不必要的背景，减少布局层次，使用ConstraintLayout等，避免过度绘制。

使用ViewStub：使用ViewStub延迟加载不常用的视图，减少内存占用和初始化时间。

使用include和merge：使用include标签重用布局，使用merge标签减少布局层次，提高性能。

使用WebP格式图片：使用WebP格式图片替代PNG或JPEG图片，减少APK大小，提高加载速度。

使用图片加载库：使用Glide或Picasso等图片加载库，它们会自动处理图片的缩放和缓存，提高性能。

通过遵循这些最佳实践，开发者可以创建出在各种尺寸设备上都能提供一致且流畅用户体验的Android应用。多屏适配虽然复杂，但只要掌握了正确的方法和技巧，就能有效地应对Android设备的碎片化挑战。