Android手机屏幕适配

首先我们来了解下关于手机屏幕的几个重要概念：sp、px、dpi、ppi、dip、pt、px等单位的区别?

sp：scale  independent  pixel  ，即与缩放比例无关的像素。在android中常用来表示文字大小。

px (pixels)：屏幕分辨率，屏幕分辨率是指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素。同样是200px，但是在不同手机下显示的大小是不同的。如1960*1080(1080p),2048×1080(2k)
dpi(dot per inch)：dpi指像素密度。dots per inch  ，即每英寸内像素点的个数。它不是表示长度的单位。

在android中认为：低（120dpi），中（160dpi）
ppi(dot per pixels)：屏幕上每英寸上的像素点数，ppi是屏幕像素密度。就是1英寸上像素点的个数。对于屏幕来说，ppi越大，屏幕的精细度越高，屏幕看起来就越清楚。比如iphone4的视网膜级的屏幕肯定比iphone
3gs的屏幕像素密度高的多，视网膜：300ppi以上
dip：dimension independent pixels，即与设备无关的像素。目前这个单位已经被dp所取代，而不建议使用dip。
dp(dip)：与dip的概念一样。不过dp已经取代了dip。在Android中用来表示非文字大小的尺寸。例如：外边距、内填充等。 
px = dp * (dpi / 160)
dp = px / (dpi/160)
3.7寸屏幕，分辨率320*480手机上，正好1px = 1dp。

pt ：point磅。1磅=1/74英寸
xlarge
屏幕至少：720px *  960px
large 屏幕至少 ：480px * 640px
normal 屏幕至少 ： 320px * 480px 
small 屏幕至少 ：320px * 426px

屏幕按像素密度划分，可以分为：

名称	像素密度范围
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 的比例进行缩放。例如，一个启动图标的尺寸为48x48 dp，这表示在 MDPI 的屏幕上其实际尺寸应为 48x48 px，在 HDPI 的屏幕上其实际大小是 MDPI 的 1.5 倍 (72x72 px)，在 XDPI 的屏幕上其实际大小是 MDPI 的 2 倍 (96x96 px)，下图为图标的各个屏幕密度的对应尺寸

屏幕密度	图标尺寸
mdpi	48x48px
hdpi	72x72px
xhdpi	96x96px
xxhdpi	144x144px
xxxhdpi	192x192px

上述已经了解了，那么现在了解下如何适配呢
1.使用wrap_content、match_parent、weight
2.请使用
dp（而非 px）指定两个视图间的间距,定义长宽的时候不要使用dp
3.请务必使用
sp 指定文字大小
4.在不同ppi的屏幕中放不同的图片，一般让ui（美工）切两份图：一份1080×1920（xxhdpi），一份480*800（hdpi）
5.百分比布局库(percent-support-lib) 的使用：

首先记得在build.gradle添加：

<code class="language-xml hljs  has-numbering" style="font-family: 'Source Code Pro', monospace; display: block; padding: 0px; color: inherit; box-sizing: border-box;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background-color: transparent;"> compile 'com.android.support:percent:22.2.0'</code><ul class="pre-numbering" style="margin: 0px; background-color: rgb(238, 238, 238); box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">1</li></ul>

（一）PercentFrameLayout

<code class="language-xml hljs  has-numbering" style="font-family: 'Source Code Pro', monospace; display: block; padding: 0px; color: inherit; box-sizing: border-box;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background-color: transparent;"><span class="hljs-pi" style="background-color: inherit; color: rgb(0, 102, 102); box-sizing: border-box;"><?xml version="1.0" encoding="utf-8"?></span><span class="hljs-tag" style="background-color: inherit; color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 0, 136);">android.support.percent.PercentFrameLayout
</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:app</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res-auto"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"match_parent"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"match_parent"</span>></span><span class="hljs-tag" style="background-color: inherit; color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 0, 136);">TextView
</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"0dp"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"0dp"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_gravity</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"left|top"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:background</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"#44ff0000"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:text</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"width:30%,height:20%"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">app:layout_heightPercent</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"20%"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:gravity</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"center"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">app:layout_widthPercent</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"30%"</span>/></span><span class="hljs-tag" style="background-color: inherit; color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 0, 136);">TextView
</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"0dp"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"0dp"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_gravity</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"right|top"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:gravity</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"center"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:background</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"#4400ff00"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:text</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"width:70%,height:20%"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">app:layout_heightPercent</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"20%"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">app:layout_widthPercent</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"70%"</span>/></span><span class="hljs-tag" style="background-color: inherit; color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 0, 136);">TextView
</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"0dp"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"0dp"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_gravity</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"bottom"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:background</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"#770000ff"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:text</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"width:100%,height:10%"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">android:gravity</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"center"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">app:layout_heightPercent</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"10%"</span><span class="hljs-attribute" style="background-color: inherit; box-sizing: border-box; color: rgb(102, 0, 102);">app:layout_widthPercent</span>=<span class="hljs-value" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 136, 0);">"100%"</span>/></span><span class="hljs-tag" style="background-color: inherit; color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="background-color: inherit; box-sizing: border-box; color: rgb(0, 0, 136);">android.support.percent.PercentFrameLayout</span>></span></code><ul class="pre-numbering" style="margin: 0px; background-color: rgb(238, 238, 238); box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">1</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">2</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">3</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">4</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">5</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">6</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">7</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">8</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">9</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">10</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">11</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">12</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">13</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">14</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">15</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">16</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">17</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">18</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">19</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">20</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">21</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">22</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">23</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">24</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">25</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">26</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">27</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">28</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">29</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">30</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">31</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">32</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">33</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">34</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">35</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">36</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">37</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">38</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">39</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">40</li><li style="background-color: inherit; box-sizing: border-box; padding: 0px 5px;">41</li></ul>

6.动态设置控件宽高：
一张图片放到imageview上，imageview的宽为充满屏幕，scaletype如果设置fitxy可以充满整个控件，但是会拉升变形，如果不设置fitxy，又会有白边（可能在某些机型有白边，某些机型没有），如何解决这个问题？
这个就需要动态设置图片的宽高
1.首先获取屏幕的宽高
2.设置imageview的宽为屏幕的宽度（像素）
3.得到宽度的实际缩小或放大比例，使用实际的宽除以图片的宽，使用这个比例对高度做缩下或放大处理