Android 屏幕適配全攻略（中）-從九宮格到矢量圖,揭秘Android多屏幕適配的正確打開方式

在移動互聯網時代，無論是小小的手機屏幕，還是大大的平板顯示器，Android 應用都必須做到完美適配，給用戶以極佳的體驗。本文將剖析 Android 多屏幕適配背后的種種技術細節，為您揭開最佳實踐的正確打開方式，讓您的應用在任何設備上都能呈現出最專業、最優雅的一面。

一、Android 布局適配

布局適配主要包括以下幾個方面:

使用合理的布局方式
- 選擇合適的布局容器，如 LinearLayout、RelativeLayout、ConstraintLayout 等。
- 合理地使用 wrap_content 和 match_parent 等屬性來根據內容自適應布局大小。
- 適當使用 weight 屬性來實現動態布局。
使用多尺寸資源
- 在 res/layout-* 目錄下提供不同屏幕尺寸的布局文件。
- 在 res/values-* 目錄下提供不同屏幕尺寸的尺寸資源。
- 在 res/drawable-* 目錄下提供不同屏幕尺寸的圖片資源。
動態適配布局
- 在代碼中動態獲取屏幕尺寸和密度信息。
- 根據獲取的信息動態調整 UI 元素的大小和位置。
適配不同屏幕方向
- 在 res/layout-land 目錄下提供橫屏布局文件。
- 在代碼中監聽屏幕方向變化，動態切換布局。

下面示例，演示如何在 Java 代碼中動態適配布局:

public class MainActivity extends AppCompatActivity {private TextView textView;private FrameLayout.LayoutParams layoutParams;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);textView = findViewById(R.id.text_view);layoutParams = (FrameLayout.LayoutParams) textView.getLayoutParams();// 獲取屏幕尺寸和密度信息DisplayMetrics displayMetrics = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);int screenWidth = displayMetrics.widthPixels;int screenHeight = displayMetrics.heightPixels;float density = displayMetrics.density;// 根據屏幕尺寸和密度動態調整 TextView 的大小和位置int textViewWidth = (int) (200 * density);int textViewHeight = (int) (100 * density);layoutParams.width = textViewWidth;layoutParams.height = textViewHeight;layoutParams.gravity = Gravity.CENTER;textView.setLayoutParams(layoutParams);}
}

在這個示例中，我們首先獲取了當前設備的屏幕尺寸和密度信息。然后，根據這些信息動態地調整了 TextView 的大小和位置，確保它在不同設備上顯示的效果一致。

二、使用限定符資源，輕松匹配不同屏幕尺寸

1、什么是限定符資源?

限定符資源是 Android 用于支持多種設備屏幕尺寸和密度的一種機制。
開發者可以在應用的資源目錄下創建多個不同的資源文件夾，每個文件夾都包含了針對特定設備特征的資源文件。
當應用運行在某臺設備上時，Android 系統會根據該設備的特征，自動選擇最匹配的資源文件夾，并加載相應的資源。

2、常見的限定符

屏幕尺寸: small， normal， large， xlarge
屏幕密度: ldpi， mdpi， hdpi， xhdpi， xxhdpi， xxxhdpi
屏幕方向: port (portrait)， land (landscape)
語言和地區: en， fr， zh-rCN， zh-rTW 等
Android 版本: v21， v23， v26 等

3、如何使用限定符資源

（1）、在應用的res目錄下，創建不同的資源文件夾，并在文件夾名稱中添加相應的限定符:

res/layout/：默認布局文件
res/layout-large/：針對大屏幕設備的布局文件
res/layout-land/：針對橫屏設備的布局文件
res/drawable-hdpi/：針對高密度設備的圖片資源
res/values-zh-rCN/：針對中國大陸地區的字符串資源

（2）、在代碼中，直接引用這些資源文件即可

Android 系統會根據設備特征自動選擇合適的資源文件。

假設我們有以下幾個資源文件:
- res/layout/activity_main.xml
- res/layout-large/activity_main.xml
- res/layout-land/activity_main.xml
- res/drawable-hdpi/my_image.png

在 Java 代碼中，我們可以這樣使用這些資源:

// 加載布局文件
setContentView(R.layout.activity_main);// 獲取圖片資源
ImageView imageView = findViewById(R.id.my_image);
imageView.setImageResource(R.drawable.my_image);// 獲取字符串資源
String myString = getString(R.string.my_string);

當應用運行在不同的設備上時，Android 系統會自動選擇最合適的資源文件進行加載。例如:
- 在小屏幕設備上，使用 res/layout/activity_main.xml
- 在大屏幕設備上，使用 res/layout-large/activity_main.xml
- 在橫屏設備上，使用 res/layout-land/activity_main.xml
- 在高密度設備上，使用 res/drawable-hdpi/my_image.png

二、九宮格圖片適配

除了布局適配，圖片資源的適配同樣很關鍵。我們可以為不同分辨率提供對應分辨率的圖片:

res/drawable-mdpi/image.png
res/drawable-hdpi/image.png 
...

不過這種做法會使 APK 體積變大。從 Android 4.0 開始，就可以使用九宮格圖片 (.9.png) 來渲染可拉伸的資源。

1、什么是九宮格圖片資源?

九宮格圖片資源(Nine-Patch Images)是一種特殊的圖片格式，它可以根據圖片的內容自動拉伸或縮放，而不會造成圖片失真或模糊。它通常用于實現可伸縮的 UI 元素，如按鈕、對話框等。

九宮格圖片由以下9個區域組成:

四個角落區域(不可拉伸)
上下中間區域(只能水平拉伸)
左右中間區域(只能垂直拉伸)
中間區域(可以水平和垂直拉伸)

在這里插入圖片描述

2、如何使用九宮格圖片資源?

（1）、創建九宮格圖片

在 Android Studio 的 drawable 文件夾中創建一個以 .9.png 結尾的文件，表示這是一個九宮格圖片。
使用圖像編輯工具(如 GIMP、Photoshop 等)繪制圖像，并在圖像的左側和上側添加黑色像素邊框。這些額外的邊框將定義圖像的可拉伸區域。

（2）、在布局中使用九宮格圖片

在 XML 布局文件中，將九宮格圖片資源設置為 View 的背景:

<Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/my_nine_patch" />

（3）、在代碼中使用九宮格圖片

可以使用NinePatchDrawable類動態創建和應用九宮格圖片:

// 從資源文件中獲取九宮格圖片
NinePatchDrawable drawable = (NinePatchDrawable) ContextCompat.getDrawable(context, R.drawable.my_nine_patch);// 設置九宮格圖片為 View 的背景
view.setBackground(drawable);

下面示例，演示如何使用九宮格圖片資源:

import android.content.Context;
import android.graphics.drawable.NinePatchDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;public class NinePatchExampleActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_nine_patch_example);// 獲取 LinearLayoutLinearLayout container = findViewById(R.id.container);// 創建 3 個 Buttonfor (int i = 0; i < 3; i++) {Button button = createButton(this);container.addView(button);}}private Button createButton(Context context) {// 創建 ButtonButton button = new Button(context);button.setText("Nine-Patch Button");// 獲取九宮格圖片資源NinePatchDrawable drawable = (NinePatchDrawable) ContextCompat.getDrawable(context, R.drawable.my_nine_patch);// 設置九宮格圖片為 Button 的背景button.setBackground(drawable);// 設置 Button 的寬度和高度LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);button.setLayoutParams(params);return button;}
}

在這個示例中，我們創建了一個 NinePatchExampleActivity。在 onCreate() 方法中，我們獲取 LinearLayout 容器，并動態創建了 3 個 Button。

在 createButton() 方法中，我們首先創建一個 Button 對象，并設置它的文本為"Nine-Patch Button"。然后，我們使用 ContextCompat.getDrawable() 獲取九宮格圖片資源，并使用 NinePatchDrawable 類將其設置為 Button 的背景。最后，我們設置 Button 的寬度和高度，并返回 Button 對象。

當你運行這個程序時，你會看到 3 個使用九宮格圖片資源作為背景的 Button。無論 Button 的大小如何變化，它們的外觀都不會失真。

通過這個示例，相信你已經掌握了如何在 Android 開發中使用九宮格圖片資源進行適配的基本方法。這種技術可以幫助你創建出更加美觀、適配性強的 UI 元素。

隨后 Android 5.0 又推出了矢量圖形式，可自動縮放且不失真，這成為圖片適配的最佳選擇。

四、矢量圖形式適配

1、為什么要使用矢量圖?

在 Android 開發中，我們通常會使用位圖圖像(如 PNG、JPEG 等)來作為應用程序的圖標和UI元素。但是，這種方式存在一些問題:

圖像質量下降

當位圖圖像在不同分辨率的設備上顯示時，可能會出現圖像質量下降的問題。這是因為位圖圖像是由固定大小的像素組成的，在進行縮放時會導致失真。
文件體積增大

為了適配不同分辨率的設備，開發者通常需要準備多套不同尺寸的圖像資源，這會大大增加應用程序的安裝包體積。

為了解決這些問題，Android 提供了矢量圖形式(Vector Drawable)作為一種新的圖像資源格式。矢量圖使用可縮放的數學公式來描述圖形，能夠在任何分辨率下保持優質的圖像質量，同時文件體積也相對較小。

2、如何使用矢量圖進行屏幕適配?

（1）、創建矢量圖資源

您可以使用 Android Studio 自帶的 Vector Asset Studio 工具來創建矢量圖資源。
也可以使用其他矢量圖編輯工具(如 Adobe Illustrator、Sketch 等)來創建 SVG 格式的矢量圖，然后導入到 Android Studio 項目中。

（2）、在布局中使用矢量圖

在 XML 布局文件中，使用 <vector> 標簽來引用矢量圖資源:

<ImageViewandroid:layout_width="48dp"android:layout_height="48dp"android:src="@drawable/my_vector_icon" />

（3）、在代碼中使用矢量圖

在 Java 代碼中，可以使用 VectorDrawableCompat 類來加載和使用矢量圖資源:

Drawable vectorDrawable = VectorDrawableCompat.create(getResources(), R.drawable.my_vector_icon, null);
imageView.setImageDrawable(vectorDrawable);

（4）、適配不同屏幕密度

矢量圖本身是可縮放的，因此不需要為不同屏幕密度準備多套圖像資源。
但是，仍然需要為不同的屏幕密度提供合適的圖標尺寸，以確保在各種設備上都能夠正常顯示。

可以使用 VectorDrawableCompat.create 方法，并傳入 DisplayMetrics 對象來動態調整圖標大小

DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
float density = displayMetrics.density;
Drawable vectorDrawable = VectorDrawableCompat.create(getResources(), R.drawable.my_vector_icon, null);
vectorDrawable.setBounds(0, 0, (int)(48 * density), (int)(48 * density));
imageView.setImageDrawable(vectorDrawable);

（5）、使用矢量圖進行屏幕適配完整案例

下面是一個完整的 Java 代碼示例，演示如何在 Android 中使用矢量圖進行屏幕適配:

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.widget.ImageView;import androidx.appcompat.app.AppCompatActivity;
import androidx.vectordrawable.graphics.drawable.VectorDrawableCompat;public class VectorDrawableActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_vector_drawable);ImageView imageView = findViewById(R.id.image_view);loadVectorDrawable(this, imageView, R.drawable.my_vector_icon, 48);}private void loadVectorDrawable(Context context, ImageView imageView, int vectorDrawableId, int desiredSizeDp) {DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();float density = displayMetrics.density;int desiredSizePx = (int) (desiredSizeDp * density);Drawable vectorDrawable = VectorDrawableCompat.create(context.getResources(), vectorDrawableId, null);vectorDrawable.setBounds(0, 0, desiredSizePx, desiredSizePx);imageView.setImageDrawable(vectorDrawable);}
}