Android图片与屏幕适配问题-优快云博客

Android程序要在不同尺寸的手机上运行，界面常常变形，有没有什么好的办法可以使程序适应不同尺寸的手机，图片又可以保持原样。

hdpi: 72 x 72

mdpi: 48 x 48

ldpi: 36 x 36

在一些解压出的apk包里面，一般ldpi都仅有一个图片，hdpi和mdpi中各有一套。google：在ldpi的手机屏幕上，hdpi中的图片可以按比例缩小一半来适应这种屏幕。

Android适配不同的设备

分为3个主题：http://developer.android.com/training/basics/supporting-devices/index.html

1.支持不同的语言

2.支持不同的屏幕screen

3.支持不同的平台版本Platform versions

Android不同设备的屏幕通用属性：size尺寸，density像素密度。app可能安装到不同屏幕的设备上，所以为了优化app在不同屏幕设备上的外观效果，应该包含一些可选的资源。

4种通用尺寸：small, normal, large, xlarge
4种通用密度：low(ldpi),medium(mdpi),high(hdpi),extra high(xhdpi)

1.创建不同的layout

res/
/layout/main.xml
/layout-large/main.xml

默认是portrait（竖屏）

res/
      /layout/main.xml                      #default(portrait)
      /layout-land/main.xml              #landscape
      /layout-large/main.xml             #large(portrait)
      /layout-large-land/main.xml     #large landscape

不同的layout要放到不同的layout目录里面。

2.创建不同的Bitmap

提供不同的bitmap资源图来适配每一种密度（low,medium,high,extra-high）

xhdpi: 2.0
hdpi: 1.5
mdpi: 1.0(baseline)
ldpi: 0.75

Designing for multiple screens

1.supporting different screen sizes 支持不同屏幕尺寸
2.supporting different screen densities 支持不同屏幕密度
3.implementing adaptative UI flows 实现adaptative UI flows

1.支持不同尺寸的屏幕supporting different screen sizes

http://developer.android.com/training/multiscreen/screensizes.html#TaskUseOriQuali

1.1 Use "wrap_content" and "match_parent"

1.2 Use RelativeLayout

1.3 Use Size Qualifiers

1.4 Use the Smallest-width Qualifier

1.5 Use Layout Aliases

1.6 Use Orientation Qualifiers

1.7 Use Nine-patch Bitmaps

确保你的layout可以适当的resize来适应屏幕
根据屏幕的configuration提供合适的UI layout
确保将准确的layout应用到正确的屏幕上
提供可以准确缩放的bitmaps

要用"wrap_content" 和 "match_parent"

为保证你的layout灵活并可适应不同屏幕尺寸，在设置一些view components的宽度和高度你应该使用"wrap_content"和"match_parent"。如果你使用"wrap_content"，view的宽度和高度将会被设置为必要的最小size在view的内部来适应内容，while "match_parent"(also known as "fill_parent" 在API level 8前)使component expand来填充它parent view的size.

使用"wrap_content"和"match_parent"的size代替hard-coded sizes，你的views分别只使用那个view需要的空间或expand以填充可用空间。比如:

<span class="tag" style="color:#0088;"><LinearLayout</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">xmlns:android</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"http://schemas.android.com/apk/res/android"</span><span class="pln" style="color:#000000;">
    </span><span class="atn" style="color:#882288;">android:orientation</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"vertical"</span><span class="pln" style="color:#000000;">
    </span><span class="atn" style="color:#882288;">android:layout_width</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"match_parent"</span><span class="pln" style="color:#000000;">
    </span><span class="atn" style="color:#882288;">android:layout_height</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"match_parent"</span><span class="tag" style="color:#0088;">></span><span class="pln" style="color:#000000;">
    </span><span class="tag" style="color:#0088;"><LinearLayout</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:layout_width</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"match_parent"</span><span class="pln" style="color:#000000;"> 
                  </span><span class="atn" style="color:#882288;">android:id</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@+id/linearLayout1"</span><span class="pln" style="color:#000000;">  
                  </span><span class="atn" style="color:#882288;">android:gravity</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"center"</span><span class="pln" style="color:#000000;">
                  </span><span class="atn" style="color:#882288;">android:layout_height</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"50dp"</span><span class="tag" style="color:#0088;">></span><span class="pln" style="color:#000000;">
        </span><span class="tag" style="color:#0088;"><ImageView</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:id</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@+id/imageView1"</span><span class="pln" style="color:#000000;"> 
                   </span><span class="atn" style="color:#882288;">android:layout_height</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"wrap_content"</span><span class="pln" style="color:#000000;">
                   </span><span class="atn" style="color:#882288;">android:layout_width</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"wrap_content"</span><span class="pln" style="color:#000000;">
                   </span><span class="atn" style="color:#882288;">android:src</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@drawable/logo"</span><span class="pln" style="color:#000000;">
                   </span><span class="atn" style="color:#882288;">android:paddingRight</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"30dp"</span><span class="pln" style="color:#000000;">
                   </span><span class="atn" style="color:#882288;">android:layout_gravity</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"left"</span><span class="pln" style="color:#000000;">
                   </span><span class="atn" style="color:#882288;">android:layout_weight</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"0"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;">
        </span><span class="tag" style="color:#0088;"><View</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:layout_height</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"wrap_content"</span><span class="pln" style="color:#000000;"> 
              </span><span class="atn" style="color:#882288;">android:id</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@+id/view1"</span><span class="pln" style="color:#000000;">
              </span><span class="atn" style="color:#882288;">android:layout_width</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"wrap_content"</span><span class="pln" style="color:#000000;">
              </span><span class="atn" style="color:#882288;">android:layout_weight</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"1"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;">
        </span><span class="tag" style="color:#0088;"><Button</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:id</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@+id/categorybutton"</span><span class="pln" style="color:#000000;">
                </span><span class="atn" style="color:#882288;">android:background</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@drawable/button_bg"</span><span class="pln" style="color:#000000;">
                </span><span class="atn" style="color:#882288;">android:layout_height</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"match_parent"</span><span class="pln" style="color:#000000;">
                </span><span class="atn" style="color:#882288;">android:layout_weight</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"0"</span><span class="pln" style="color:#000000;">
                </span><span class="atn" style="color:#882288;">android:layout_width</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"120dp"</span><span class="pln" style="color:#000000;">
                </span><span class="atn" style="color:#882288;">style</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"</span><span class="pun" style="color:#66660;">@</span><span class="pln" style="color:#000000;">style</span><span class="pun" style="color:#66660;">/</span><span class="pln" style="color:#000000;">CategoryButtonStyle</span><span class="atv" style="color:#8800;">"</span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;">
    </span><span class="tag" style="color:#0088;"></LinearLayout></span><span class="pln" style="color:#000000;">

    </span><span class="tag" style="color:#0088;"><fragment</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:id</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@+id/headlines"</span><span class="pln" style="color:#000000;"> 
              </span><span class="atn" style="color:#882288;">android:layout_height</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"fill_parent"</span><span class="pln" style="color:#000000;">
              </span><span class="atn" style="color:#882288;">android:name</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"com.example.android.newsreader.HeadlinesFragment"</span><span class="pln" style="color:#000000;">
              </span><span class="atn" style="color:#882288;">android:layout_width</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"match_parent"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;">
</span><span class="tag" style="color:#0088;"></LinearLayout></span>

......

2.支持不同密度的屏幕supporting different screen densities

提供不同的资源、使用resolution-independent units of measurements

使用密度无关像素Use Density-independent Pixels

一个常见陷阱在设计layout的时候要避免使用绝对像素pixels来定义距离或尺寸。使用像素px定义会有个问题因为不同的屏幕有不同的像素密度，所以同样数量的像素值在不同的设备屏幕上会有不同的物理尺寸。因此当指定尺寸时，总要使用dp或sp这样的单位units。1 dp是density-independent pixel，在160dpi密度的设备中等同于1px。以sp是同样的单位unit，但是is scaled by the user's preferred text size(it's a scale-independent pixel),所以你应该使用这种度量单位when defining text size(但是never for layout size)。

例如，当指定两个views之间的spacing，要使用dp而非px：

<span class="tag" style="color:#0088;"><Button</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:layout_width</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"wrap_content"</span><span class="pln" style="color:#000000;"> 
    </span><span class="atn" style="color:#882288;">android:layout_height</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"wrap_content"</span><span class="pln" style="color:#000000;"> 
    </span><span class="atn" style="color:#882288;">android:text</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@string/clickme"</span><span class="pln" style="color:#000000;">
    </span><span class="atn" style="color:#882288;">android:layout_marginTop</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"20dp"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#0088;">/></span>

当指定文字尺寸text size，总要用sp：

<span class="tag" style="color:#0088;"><TextView</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:layout_width</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"match_parent"</span><span class="pln" style="color:#000000;"> 
    </span><span class="atn" style="color:#882288;">android:layout_height</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"wrap_content"</span><span class="pln" style="color:#000000;"> 
    </span><span class="atn" style="color:#882288;">android:textSize</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"20sp"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#0088;">/></span>

Provide Alternative Bitmaps提供可选的Bitmaps

Since Android运行在各种各样的密度屏幕的设备商，你应该总能提供你的bitmap 资源tailored to each of the generalized density bucket:low,medium,high and extra-high density. This 将会帮助你在不同密度的屏幕上实现好的图像质量和效果。

要生成这种图片，你应该以vector格式生成每种密度对应图使用以下尺寸scale：

xhdpi:2.0
hdpi:1.5
mdpi:1.0(baseline)
ldpi:0.75

这意味着如果你要生成一个200x200的图for xhdpi设备，相应的要生成150x150 for hdpi，100x100 for mdpi ，75x75 for ldpi设备。

然后将这些图放到res下相应的子目录中，程序运行时系统会根据屏幕密度选择使用对应密度的图。

MyProject/
  res/
    drawable-xhdpi/
        awesomeimage.png
    drawable-hdpi/
        awesomeimage.png
    drawable-mdpi/
        awesomeimage.png
    drawable-ldpi/
        awesomeimage.png

任何时候，当你引用@drawable/awesomeimage,the system selects the appropriate bitmap based on the screen's dpi.

For more tips and guidelines for creating icon assets for your application, see the Icon Design Guidelines.

更多适配问题可以参考http://blog.youkuaiyun.com/moruite/article/details/7281428

图标尺寸的约定http://ticktick.blog.51cto.com/823160/1263366

http://developer.android.com/design/style/iconography.html#small-contextual