解决方案
最后更新于：2022-04-01 23:06:04
## 支持各种屏幕尺寸
### 使用wrap_content、match_parent、weight
要确保布局的灵活性并适应各种尺寸的屏幕，应使用 “wrap_content” 和 “match_parent” 控制某些视图组件的宽度和高度。
使用 “wrap_content”，系统就会将视图的宽度或高度设置成所需的最小尺寸以适应视图中的内容，而 “match_parent”（在低于 API 级别 8 的级别中称为 “fill_parent”）则会展开组件以匹配其父视图的尺寸。
如果使用 “wrap_content” 和 “match_parent” 尺寸值而不是硬编码的尺寸，视图就会相应地仅使用自身所需的空间或展开以填满可用空间。此方法可让布局正确适应各种屏幕尺寸和屏幕方向。
下面是一段示例代码
~~~
~~~
下图是在横纵屏切换的时候的显示效果，我们可以看到这样可以很好的适配屏幕尺寸的变化。
weight是线性布局的一个独特的属性，我们可以使用这个属性来按照比例对界面进行分配，完成一些特殊的需求。
但是，我们对于这个属性的计算应该如何理解呢？
首先看下面的例子，我们在布局中这样设置我们的界面
我们在布局里面设置为线性布局，横向排列，然后放置两个宽度为0dp的按钮，分别设置weight为1和2，在效果图中，我们可以看到两个按钮按照1：2的宽度比例正常排列了，这也是我们经常使用到的场景，这是时候很好理解，Button1的宽度就是1/(1+2) = 1/3，Button2的宽度则是2/(1+2) = 2/3，我们可以很清楚的明白这种情景下的占比如何计算。
但是假如我们的宽度不是0dp(wrap_content和0dp的效果相同)，则是match_parent呢？
下面是设置为match_parent的效果
我们可以看到，在这种情况下，占比和上面正好相反，这是怎么回事呢？说到这里，我们就不得不提一下weight的计算方法了。
android:layout_weight的真实含义是:如果View设置了该属性并且有效，那么该 View的宽度等于原有宽度(android:layout_width)加上剩余空间的占比。
从这个角度我们来解释一下上面的现象。在上面的代码中，我们设置每个Button的宽度都是match_parent，假设屏幕宽度为L，那么每个Button的宽度也应该都为L，剩余宽度就等于L-（L+L）= -L。
Button1的weight=1，剩余宽度占比为1/(1+2)= 1/3，所以最终宽度为L+1/3*(-L)=2/3L，Button2的计算类似，最终宽度为L+2/3(-L)=1/3L。
这是在水平方向上的，那么在垂直方向上也是这样吗？
下面是测试代码和效果
如果是垂直方向，那么我们应该改变的是layout_height的属性，下面是0dp的显示效果
下面是match_parent的显示效果，结论和水平是完全一样的
虽然说我们演示了match_parent的显示效果，并说明了原因，但是在真正用的时候，我们都是设置某一个属性为0dp，然后按照权重计算所占百分比。
### 使用相对布局，禁用绝对布局
在开发中，我们大部分时候使用的都是线性布局、相对布局和帧布局，绝对布局由于适配性极差，所以极少使用。
由于各种布局的特点不一样，所以不能说哪个布局好用，到底应该使用什么布局只能根据实际需求来确定。我们可以使用 LinearLayout 的嵌套实例并结合 “wrap_content” 和 “match_parent”，以便构建相当复杂的布局。不过，我们无法通过 LinearLayout 精确控制子视图的特殊关系；系统会将 LinearLayout 中的视图直接并排列出。
如果我们需要将子视图排列出各种效果而不是一条直线，通常更合适的解决方法是使用 RelativeLayout，这样就可以根据各组件之间的特殊关系指定布局了。例如，我们可以将某个子视图对齐到屏幕左侧，同时将另一个视图对齐到屏幕右侧。
下面的代码以官方Demo为例说明。
~~~
~~~
在上面的代码中我们使用了相对布局，并且使用alignXXX等属性指定了子控件的位置，下面是这种布局方式在应对屏幕变化时的表现
在小尺寸屏幕的显示
在平板的大尺寸上的显示效果
虽然控件的大小由于屏幕尺寸的增加而发生了改变，但是我们可以看到，由于使用了相对布局，所以控件之前的位置关系并没有发生什么变化，这说明我们的适配成功了。
### 使用限定符
#### 使用尺寸限定符
上面所提到的灵活布局或者是相对布局，可以为我们带来的优势就只有这么多了。虽然这些布局可以拉伸组件内外的空间以适应各种屏幕，但它们不一定能为每种屏幕都提供最佳的用户体验。因此，我们的应用不仅仅只实施灵活布局，还应该应针对各种屏幕配置提供一些备用布局。
如何做到这一点呢？我们可以通过使用配置限定符，在运行时根据当前的设备配置自动选择合适的资源了，例如根据各种屏幕尺寸选择不同的布局。
很多应用会在较大的屏幕上实施“双面板”模式，即在一个面板上显示项目列表，而在另一面板上显示对应内容。平板电脑和电视的屏幕已经大到可以同时容纳这两个面板了，但手机屏幕就需要分别显示。因此，我们可以使用以下文件以便实施这些布局：
res/layout/main.xml，单面板（默认）布局：
~~~
~~~
res/layout-large/main.xml，双面板布局：
~~~
~~~
请注意第二种布局名称目录中的 large 限定符。系统会在属于较大屏幕（例如 7 英寸或更大的平板电脑）的设备上选择此布局。系统会在较小的屏幕上选择其他布局（无限定符）。
#### 使用最小宽度限定符
在版本低于 3.2 的 Android 设备上，开发人员遇到的问题之一是“较大”屏幕的尺寸范围，该问题会影响戴尔 Streak、早期的 Galaxy Tab 以及大部分 7 英寸平板电脑。即使这些设备的屏幕属于“较大”的尺寸，但很多应用可能会针对此类别中的各种设备（例如 5 英寸和 7 英寸的设备）显示不同的布局。这就是 Android 3.2 版在引入其他限定符的同时引入“最小宽度”限定符的原因。
最小宽度限定符可让您通过指定某个最小宽度（以 dp 为单位）来定位屏幕。例如，标准 7 英寸平板电脑的最小宽度为 600 dp，因此如果您要在此类屏幕上的用户界面中使用双面板（但在较小的屏幕上只显示列表），您可以使用上文中所述的单面板和双面板这两种布局，但您应使用 sw600dp 指明双面板布局仅适用于最小宽度为 600 dp 的屏幕，而不是使用 large 尺寸限定符。
res/layout/main.xml，单面板（默认）布局：
~~~
~~~
res/layout-sw600dp/main.xml，双面板布局：
~~~
~~~
也就是说，对于最小宽度大于等于 600 dp 的设备，系统会选择 layout-sw600dp/main.xml（双面板）布局，否则系统就会选择 layout/main.xml（单面板）布局。
但 Android 版本低于 3.2 的设备不支持此技术，原因是这些设备无法将 sw600dp 识别为尺寸限定符，因此我们仍需使用 large 限定符。这样一来，就会有一个名称为 res/layout-large/main.xml 的文件（与 res/layout-sw600dp/main.xml 一样）。但是没有太大关系，我们将马上学习如何避免此类布局文件出现的重复。
#### 使用布局别名
最小宽度限定符仅适用于 Android 3.2 及更高版本。因此，如果我们仍需使用与较低版本兼容的概括尺寸范围（小、正常、大和特大）。例如，如果要将用户界面设计成在手机上显示单面板，但在 7 英寸平板电脑、电视和其他较大的设备上显示多面板，那么我们就需要提供以下文件：
* res/layout/main.xml: 单面板布局
* res/layout-large: 多面板布局
* res/layout-sw600dp: 多面板布局
后两个文件是相同的，因为其中一个用于和 Android 3.2 设备匹配，而另一个则是为使用较低版本 Android 的平板电脑和电视准备的。
要避免平板电脑和电视的文件出现重复（以及由此带来的维护问题），您可以使用别名文件。例如，您可以定义以下布局：
* res/layout/main.xml，单面板布局
* res/layout/main_twopanes.xml，双面板布局
然后添加这两个文件：
res/values-large/layout.xml:
~~~
- @layout/main_twopanes
~~~
res/values-sw600dp/layout.xml:
~~~
- @layout/main_twopanes
~~~
后两个文件的内容相同，但它们并未实际定义布局。它们只是将 main 设置成了 main_twopanes 的别名。由于这些文件包含 large 和 sw600dp 选择器，因此无论 Android 版本如何，系统都会将这些文件应用到平板电脑和电视上（版本低于 3.2 的平板电脑和电视会匹配 large，版本高于 3.2 的平板电脑和电视则会匹配 sw600dp）。
#### 使用屏幕方向限定符
某些布局会同时支持横向模式和纵向模式，但我们可以通过调整优化其中大部分布局的效果。在新闻阅读器示例应用中，每种屏幕尺寸和屏幕方向下的布局行为方式如下所示：
* 小屏幕，纵向：单面板，带徽标
* 小屏幕，横向：单面板，带徽标
* 7 英寸平板电脑，纵向：单面板，带操作栏
* 7 英寸平板电脑，横向：双面板，宽，带操作栏
* 10 英寸平板电脑，纵向：双面板，窄，带操作栏
* 10 英寸平板电脑，横向：双面板，宽，带操作栏
* 电视，横向：双面板，宽，带操作栏
因此，这些布局中的每一种都定义在了 res/layout/ 目录下的某个 XML 文件中。为了继续将每个布局分配给各种屏幕配置，该应用会使用布局别名将两者相匹配：
res/layout/onepane.xml:(单面板)
~~~
~~~
res/layout/onepane_with_bar.xml:(单面板带操作栏)
~~~
~~~
res/layout/twopanes.xml:(双面板，宽布局)
~~~
~~~
res/layout/twopanes_narrow.xml:(双面板，窄布局)
~~~
~~~
既然我们已定义了所有可能的布局，那就只需使用配置限定符将正确的布局映射到各种配置即可。
现在只需使用布局别名技术即可做到这一点：
res/values/layouts.xml:
~~~
- @layout/onepane_with_bar
false
~~~
res/values-sw600dp-land/layouts.xml:
~~~
- @layout/twopanes
true
~~~
res/values-sw600dp-port/layouts.xml:
~~~
- @layout/onepane
false
~~~
res/values-large-land/layouts.xml:
~~~
- @layout/twopanes
true
~~~
res/values-large-port/layouts.xml:
~~~
- @layout/twopanes_narrow
true
~~~
#### 使用自动拉伸位图
支持各种屏幕尺寸通常意味着您的图片资源还必须能适应各种尺寸。例如，无论要应用到什么形状的按钮上，按钮背景都必须能适应。
如果在可以更改尺寸的组件上使用了简单的图片，您很快就会发现显示效果多少有些不太理想，因为系统会在运行时平均地拉伸或收缩您的图片。解决方法为使用自动拉伸位图，这是一种格式特殊的 PNG 文件，其中会指明可以拉伸以及不可以拉伸的区域。
.9的制作，实际上就是在原图片上添加1px的边界，然后按照我们的需求，把对应的位置设置成黑色线，系统就会根据我们的实际需求进行拉伸。
下图是对.9图的四边的含义的解释，左上边代表拉伸区域，右下边代表padding box，就是间隔区域，在下面，我们给出一个例子，方便大家理解。
先看下面两张图，我们理解一下这四条线的含义。
上图和下图的区别，就在于右下边的黑线不一样，具体的效果的区别，看右边的效果图。上图效果图中深蓝色的区域，代表内容区域，我们可以看到是在正中央的，这是因为我们在右下边的是两个点，这两个点距离上下左右四个方向的距离就是padding的距离，所以深蓝色内容区域在图片正中央，我们再看下图，由于右下边的黑线是图片长度，所以就没有padding，从效果图上的表现就是深蓝色区域和图片一样大，因此，我们可以利用右下边来控制内容与背景图边缘的padding。
如果你还不明白，那么我们看下面的效果图，我们分别以图一和图二作为背景图，下面是效果图。
我们可以看到，使用wrap_content属性设置长宽，图一比图二的效果大一圈，这是为什么呢？还记得我上面说的padding吗？
这就是padding的效果提现，怎么证明呢？我们再看下面一张图，给图一添加padding=0，这样背景图设置的padding效果就没了，是不是两个一样大了？
ok，我想你应该明白右下边的黑线的含义了，下面我们再看一下左上边的效果。
下面我们只设置了左上边线，效果图如下
上面的线没有包住图标，下面的线正好包住了图标，从右边的效果图应该可以看出差别，黑线所在的区域就是拉伸区域，上图黑线所在的全是纯色，所以图标不变形，下面的拉伸区域包裹了图标，所以在拉伸的时候就会对图标进行拉伸，但是这样就会导致图标变形。注意到下面红线区域了嘛？这是系统提示我们的，因为这样拉伸，不符合要求，所以会提示一下。
## 支持各种屏幕密度
### 使用非密度制约像素
由于各种屏幕的像素密度都有所不同，因此相同数量的像素在不同设备上的实际大小也有所差异，这样使用像素定义布局尺寸就会产生问题。因此，请务必使用 dp 或 sp 单位指定尺寸。dp 是一种非密度制约像素，其尺寸与 160 dpi 像素的实际尺寸相同。sp 也是一种基本单位，但它可根据用户的偏好文字大小进行调整（即尺度独立性像素），因此我们应将该测量单位用于定义文字大小。
例如，请使用 dp（而非 px）指定两个视图间的间距：
~~~
~~~
请务必使用 sp 指定文字大小：
~~~
{1}px \n";
private final static String HTemplate = "{1}px \n";
public static void main(String[] args) {
makeString(320, 480);
makeString(480,800);
makeString(480, 854);
makeString(540, 960);
makeString(600, 1024);
makeString(720, 1184);
makeString(720, 1196);
makeString(720, 1280);
makeString(768, 1024);
makeString(800, 1280);
makeString(1080, 1812);
makeString(1080, 1920);
makeString(1440, 2560);
}
public static void makeString(int w, int h) {
StringBuffer sb = new StringBuffer();
sb.append("\n");
sb.append("");
float cellw = w / dw;
for (int i = 1; i < 320; i++) {
sb.append(WTemplate.replace("{0}", i + "").replace("{1}",
change(cellw * i) + ""));
}
sb.append(WTemplate.replace("{0}", "320").replace("{1}", w + ""));
sb.append(" ");
StringBuffer sb2 = new StringBuffer();
sb2.append("\n");
sb2.append("");
float cellh = h / dh;
for (int i = 1; i < 480; i++) {
sb2.append(HTemplate.replace("{0}", i + "").replace("{1}",
change(cellh * i) + ""));
}
sb2.append(HTemplate.replace("{0}", "480").replace("{1}", h + ""));
sb2.append(" ");
String path = rootPath.replace("{0}", h + "").replace("{1}", w + "");
File rootFile = new File(path);
if (!rootFile.exists()) {
rootFile.mkdirs();
}
File layxFile = new File(path + "lay_x.xml");
File layyFile = new File(path + "lay_y.xml");
try {
PrintWriter pw = new PrintWriter(new FileOutputStream(layxFile));
pw.print(sb.toString());
pw.close();
pw = new PrintWriter(new FileOutputStream(layyFile));
pw.print(sb2.toString());
pw.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
public static float change(float a) {
int temp = (int) (a * 100);
return temp / 100f;
}
}
~~~
代码应该很好懂，我们将一个屏幕宽度分为320份，高度480份，然后按照实际像素对每一个单位进行复制，放在对应values-widthxheight文件夹下面的lax.xml和lay.xml里面，这样就可以统一所有你想要的分辨率的单位了，下面是生成的一个320*480分辨率的文件，因为宽高分割之后总分数和像素数相同，所以x1就是1px，以此类推
~~~
1.0px
2.0px
3.0px
4.0px
5.0px
6.0px
7.0px
8.0px
9.0px
10.0px
...省略好多行
300.0px
301.0px
302.0px
303.0px
304.0px
305.0px
306.0px
307.0px
308.0px
309.0px
310.0px
311.0px
312.0px
313.0px
314.0px
315.0px
316.0px
317.0px
318.0px
319.0px
320px
3.37px
6.75px
10.12px
13.5px
16.87px
20.25px
23.62px
27.0px
30.37px
33.75px
...省略好多行
1012.5px
1015.87px
1019.25px
1022.62px
1026.0px
1029.37px
1032.75px
1036.12px
1039.5px
1042.87px
1046.25px
1049.62px
1053.0px
1056.37px
1059.75px
1063.12px
1066.5px
1069.87px
1073.25px
1076.62px
1080px
~~~
然后又在小屏幕的Activity布局中重复使用了它 ：
~~~
ArticleFragment frag = new ArticleFragment();
getSupportFragmentManager().beginTransaction().add(android.R.id.content, frag).commit();
~~~
当然，这与在 XML 布局中声明片段的效果是一样的，但在这种情况下却没必要使用 XML 布局，因为报道片段是此活动中的唯一组件。
请务必在设计片段时注意，不要针对具体活动创建强耦合。要做到这一点，通常可以定义一个接口，该接口概括了相关片段与其主活动交互所需的全部方式，然后让主活动实施该界面：
例如，新闻阅读器应用的 HeadlinesFragment 会精确执行以下代码：
~~~
public class HeadlinesFragment extends ListFragment {
...
OnHeadlineSelectedListener mHeadlineSelectedListener = null;
/* Must be implemented by host activity */
public interface OnHeadlineSelectedListener {
public void onHeadlineSelected(int index);
}
...
public void setOnHeadlineSelectedListener(OnHeadlineSelectedListener listener) {
mHeadlineSelectedListener = listener;
}
}
~~~
然后，如果用户选择某个标题，相关片段就会通知由主活动指定的侦听器（而不是通知某个硬编码的具体活动）：
~~~
public class HeadlinesFragment extends ListFragment {
...
@Override
public void onItemClick(AdapterView parent,
View view, int position, long id) {
if (null != mHeadlineSelectedListener) {
mHeadlineSelectedListener.onHeadlineSelected(position);
}
}
...
}
~~~
除此之外，我们还可以使用第三方框架，比如说使用“订阅-发布”模式的EventBus来更多的优化组件之间的通信，减少耦合。
### 处理屏幕配置变化
如果我们使用独立Activity实施界面的独立部分，那么请注意，我们可能需要对特定配置变化（例如屏幕方向的变化）做出响应，以便保持界面的一致性。
例如，在运行 Android 3.0 或更高版本的标准 7 英寸平板电脑上，如果新闻阅读器示例应用运行在纵向模式下，就会在使用独立活动显示新闻报道；但如果该应用运行在横向模式下，就会使用双面板布局。
也就是说，如果用户处于纵向模式下且屏幕上显示的是用于阅读报道的活动，那么就需要在检测到屏幕方向变化（变成横向模式）后执行相应操作，即停止上述活动并返回主活动，以便在双面板布局中显示相关内容：
~~~
public class ArticleActivity extends FragmentActivity {
int mCatIndex, mArtIndex;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mCatIndex = getIntent().getExtras().getInt("catIndex", 0);
mArtIndex = getIntent().getExtras().getInt("artIndex", 0);
// If should be in two-pane mode, finish to return to main activity
if (getResources().getBoolean(R.bool.has_two_panes)) {
finish();
return;
}
...
}
~~~
通过上面几个步骤，我们就完全可以建立一个可以根据用户界面配置进行自适应的App了。
## 最佳实践
### 关于高清设计图尺寸
Google官方给出的高清设计图尺寸有两种方案，一种是以mdpi设计，然后对应放大得到更高分辨率的图片，另外一种则是以高分辨率作为设计大小，然后按照倍数对应缩小到小分辨率的图片。
根据经验，我更推荐第二种方法，因为小分辨率在生成高分辨率图片的时候，会出现像素丢失，我不知道是不是有方法可以阻止这种情况发生。
而分辨率可以以1280*720或者是1960*1080作为主要分辨率进行设计。
### ImageView的ScaleType属性
设置不同的ScaleType会得到不同的显示效果，一般情况下，设置为centerCrop能获得较好的适配效果。
### 动态设置
有一些情况下，我们需要动态的设置控件大小或者是位置，比如说popwindow的显示位置和偏移量等，这个时候我们可以动态的获取当前的屏幕属性，然后设置合适的数值
~~~
public class ScreenSizeUtil {
public static int getScreenWidth(Activity activity) {
return activity.getWindowManager().getDefaultDisplay().getWidth();
}
public static int getScreenHeight(Activity activity) {
return activity.getWindowManager().getDefaultDisplay().getHeight();
}
}
~~~
## 更多参考资料
* [chan奕迅(设计师角度)](http://www.zcool.com.cn/u/360473)
* [友盟移动指数(最新的移动设备统计信息)](http://www.umindex.com/devices/android_models)
* [手机屏幕信息大全](http://screensiz.es/phone)
';