内容简介.png
Android系统碎片化、Android机型屏幕尺寸碎片化、Android屏幕分辨率碎片化造成同一元素在不同手机上显示的效果不同，也就是我们要适配的根本原因。这里主要是对不同屏幕尺寸和不同屏幕密度的适配。
基础
屏幕尺寸：手机对角线的长度，单位是英寸，1英寸=2.54cm
屏幕分辨率：手机横向和纵向上的像素点数，单位是px,1px就是一个像素,一般表示形式：纵向像素*横向像素，如1920 * 1080
屏幕像素密度：每英寸的像素点数，单位是dpi,"dot per inch"的缩写
屏幕像素密度计算公式.png
我的手机是魅蓝max,屏幕分辨率：1920 * 1080,屏幕尺寸：6.0，计算屏幕像素密度：
屏幕像素密度= √（1920^2 + 1080^2）/ 6.0 = 367.15 dpi,手机官方：368dpi。
dip、dp、sp
dip与dp是一个意思，称为密度无关像素，android手机专属的单位，与px有什么关系呢？在android中，规定以160dpi为基准，也就是在手机屏幕像素密度为160的时候，1dp = 1px,然后其他的屏幕像素密度之间需要进行比例换算。比如屏幕像素密度为320dpi时，就这么计算，1dp / 160 dpi * 320 dpi = 2 px.
sp是独立比例像素，可以根据文字大小首选项自动进行缩放，最好用复数，
mdpi hdpi xhdpi xxdpi xxxdpi用来区分不同的像素密度
| 名称 | 像素密度范围 |
|---|---|
| mdpi | 120dpi~160dpi |
| hdpi | 160dpi~240dpi |
| xhdpi | 240dpi~320dpi |
| xxhdpi | 320dpi~480dpi |
| xxxhdpi | 480dpi~640dpi |
图片像素换算比例：
mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi = 2:3:4:6:8
根据要适配的机型的屏幕像素密度切图，将图标放入相应像素密度的文件夹中。
屏幕像素匹配
做前端的的朋友都不会遇到像android开发猿们遇到的这种适配问题，因为有一种百分比的东西。那我们也可以使用百分比来做适配，假如我们以480 * 320作为基准，那么在480 * 320像素的手机上显示一张图片，这时候1px就是一像素，用x1表示，x表示为宽,1表示1像素，也就是x1=1px;如果应用安装在960 * 640的手机上的话，我们想让应用呈现出与480 * 320一样的效果，那么这张图片的宽高都必须乘以2才行。可以阅读洋哥原文
/**
* email:naildingmouren@gmail.com
* 针对各种屏幕密度的匹配
* 在480*320的设备上，x2就代表2.0px，y2就代表3.0px。这里以320*480为基准
* 在800×480的设备上，x2就代表3.0px，y2就代表3.33px。
*/
public class MakeXml {
//项目中res文件夹的路径
private final static String rootPath = "D:\\AndroidSampleAll\\app\\src\\main\\res\\values-{0}x{1}\\";
//手机屏幕像素的基准
private final static float dw = 320f;
private final static float dh = 480f;
private final static String WTemplate = "<dimen name=\"x{0}\">{1}px</dimen>\n";
private final static String HTemplate = "<dimen name=\"y{0}\">{1}px</dimen>\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("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
sb.append("<resources>");
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("</resources>");
StringBuffer sb2 = new StringBuffer();
sb2.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
sb2.append("<resources>");
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("</resources>");
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;
}
}
屏幕像素密度适配.png
屏幕尺寸匹配
布局匹配
- 为了 使布局元素自适应屏幕尺寸，禁用绝对布局（AbsoluteLayout），建议使用相对布局(RelativeLayout),其他布局根据需求选择。相对布局通过相对位置排列，屏幕大小变化也是没有影响的
- 为了可以根据屏幕的配置或设备来加载相应的布局(适配平板电脑、电视tv时)，使用限定符来实现。
* 在平板电脑和电视的屏幕（>7英寸）上：实施“双面板”模式以同时显示更多内容
* 在手机较小的屏幕上：使用单面板分别显示内容
限定符.png
尺寸限定符只适合android 3.2之前，large不能具体指定多大，所以android 3.2以后引入了最小宽度限定符，单位是dp。为了后期的维护，引入了“布局别名”的机制，同时维护sw600dp和large的两套xml平板布局，解决重复的问题。
取以下例子：
小屏幕, 竖屏: 单面板
小屏幕, 横屏: 单面板
7 英寸平板电脑，纵向：单面板，带操作栏
7 英寸平板电脑，横向：双面板，宽，带操作栏
10 英寸平板电脑，纵向：双面板，窄，带操作栏
10 英寸平板电脑，横向：双面板，宽，带操作栏
电视，横向：双面板，宽，带操作栏
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="@mipmap/ic_launcher_round"
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="@android:color/holo_red_light"
android:layout_height="match_parent"
android:layout_weight="0"
android:layout_width="120dp"
android:text="BUTTON"
/>
</LinearLayout>
<fragment android:id="@+id/headlines"
android:layout_height="fill_parent"
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:（默认布局）
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--默认布局
bool 可以获取boolean值动态判断当前适配的布局
-->
<item name="main_layout" type="layout">@layout/onepane</item>
<bool name="has_two_panes">false</bool>
</resources>
res/values-sw600dp-land/layouts.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--大屏 横向、双面板、宽 android3.2后-->
<item name="main_layout" type="layout">@layout/twopanes</item>
<bool name="has_two_panes">true</bool>
</resources>
res/values-sw600dp-port/layouts.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--大屏、纵向、单面板带操作栏 android3.2后-->
<item name="main_layout" type="layout">@layout/onepane_with_bar</item>
<bool name="has_two_panes">false</bool>
</resources>
res/values-large-land/layouts.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--大屏、横向、双面板、宽 android3.2前-->
<item name="main_layout" type="layout">@layout/twopanes</item>
<bool name="has_two_panes">true</bool>
</resources>
res/values-large-port/layouts.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--大屏 纵向 单面板带操作栏 android3.2前-->
<item name="main_layout" type="layout">@layout/onepane_with_bar</item>
<bool name="has_two_panes">false</bool>
</resources>
实现自适应用户界面流程(紧接限定符实现的布局适配)
以上的布局匹配设置好以后，我们要实现自适应的用户界面流程，因为设备特点不同的话，就就会加载不同的布局，相应的用户界面流程可能会有所不同。例如，如果应用处于双面板模式下，点击左侧面板上的项即可直接在右侧面板上显示相关内容；而如果该应用处于单面板模式下，点击相关的内容应该跳转到另外一个Activity进行后续的处理。所以我们应该按照下面的流程，一步步的完成自适应界面的实现。
1.确定当前布局
由于每种布局的实施都会稍有不同，因此我们需要先确定当前向用户显示的布局。例如，我们可以先了解用户所处的是“单面板”模式还是“双面板”模式。要做到这一点，可以通过查询指定视图是否存在以及是否已显示出来。
public class NewsReaderActivity extends FragmentActivity {
boolean mIsDualPane;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
View articleView = findViewById(R.id.article);
mIsDualPane = articleView != null && articleView.getVisibility() == View.VISIBLE;
}
}
2.根据当前布局作出响应
有些操作可能会由于当前布局而产生不同的操作结果。例如，在新闻阅读器示例中，如果用户界面处于双面板模式下，那么点击标题列表中的标题就会在右侧面板中打开相应报道；但如果用户界面处于单面板模式下，那么上述操作就会启动一个独立活动。
//自定义的点击回调
@Override
public void onHeadlineSelected(int index) {
mArtIndex = index;
if (mIsDualPane) {
/*在右边面板直接显示相应的内容，双面板 */
mArticleFragment.displayArticle(mCurrentCat.getArticle(index));
} else {
/* 开启一个新的activity来显示内容，单面板 */
Intent intent = new Intent(this, ArticleActivity.class);
intent.putExtra("catIndex", mCatIndex);
intent.putExtra("artIndex", index);
startActivity(intent);
}
}
3.处理屏幕旋转变化
如果我们使用独立Activity实施界面的独立部分，那么请注意，我们可能需要对特定配置变化（例如屏幕方向的变化）做出响应，以便保持界面的一致性。
布局组件匹配
为了让布局组件自适应屏幕尺寸。
LinearLayout中权重属性的使用可以通过百分比的形式对组件进行空间匹配。
图片资源匹配
为了让图片资源在不同屏幕密度上显示相同的像素效果，可以使用.9图，可以自动拉伸图。
参考：Android 屏幕适配：最全面的解决方案
