设计兼容不同的屏幕尺寸的Android界面

Android的屏幕类型有几百种不同的尺寸，从小型的手机到大型的电视机。因此要使我们的应用程序兼容不同屏幕尺寸，同一个应用就可以提供给更多的用户使用。

一、支持不同的屏幕尺寸

1、使用“wrap_content"和”match_parent"

为了确保布局的灵活性，来适应不同尺寸的屏幕，我们应该使用“wrap_content"来匹配组件的最小尺寸和使用”match_parent"来设置某些视图来匹配父视图的大小。这样设置和直接设置视图大小（如48dip）不同的是该视图的空间可以随着屏幕尺寸（父视图的大小)随意扩展。例如如下布局：

1. <LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"   
2.     android:orientation = "vertical"   
3.     android:layout_width = "match_parent"   
4.     android:layout_height = "match_parent" >   
5.     <LinearLayout  android:layout_width = "match_parent"    
6.                   android:id = "@+id/linearLayout1"     
7.                   android:gravity = "center"   
8.                   android:layout_height = "50dp" >   
9.         <ImageView  android:id = "@+id/imageView1"    
10.                    android:layout_height = "wrap_content"   
11.                    android:layout_width = "wrap_content"   
12.                    android:src = "@drawable/logo"   
13.                    android:paddingRight = "30dp"   
14.                    android:layout_gravity = "left"   
15.                    android:layout_weight = "0"  />   
16.         <View  android:layout_height = "wrap_content"    
17.               android:id = "@+id/view1"   
18.               android:layout_width = "wrap_content"   
19.               android:layout_weight = "1"  />   
20.         <Button  android:id = "@+id/categorybutton"   
21.                 android:background = "@drawable/button_bg"   
22.                 android:layout_height = "match_parent"   
23.                 android:layout_weight = "0"   
24.                 android:layout_width = "120dp"   
25.                 style = " @ style / CategoryButtonStyle " />   
26.     </LinearLayout>   
27.   
28.     <fragment  android:id = "@+id/headlines"    
29.               android:layout_height = "fill_parent"   
30.               android:name = "com.example.android.newsreader.HeadlinesFragment"   
31.               android:layout_width = "match_parent"  />   
32. </LinearLayout>  

当我们翻转手机屏幕可以看到横向和竖向的屏幕适配如下：

2、使用Relative_layout

我们可以使用LinearLayout通过“wrap_content"和”match_parent"来实现很多复杂的布局，但是LinearLayout擅长控制的是线性的关系，如果是要精确控制平面关系，使用Relative_layout比较合适，它可以指定两个组件之间的空间关系。例如下面代码：

1. <？xml的version = "1.0" encoding = "utf-8" ?>   
2. <RelativeLayout  xmlns:android = "http://schemas.android.com/apk/res/android"   
3.     android:layout_width = "match_parent"   
4.     android:layout_height = "match_parent" >   
5.     <TextView   
6.         android:id = "@+id/label"   
7.         android:layout_width = "match_parent"   
8.         android:layout_height = "wrap_content"   
9.         android:text = "Type here:" />   
10.     <EditText   
11.         android:id = "@+id/entry"   
12.         android:layout_width = "match_parent"   
13.         android:layout_height = "wrap_content"   
14.         android:layout_below = "@id/label" />   
15.     <Button   
16.         android:id = "@+id/ok"   
17.         android:layout_width = "wrap_content"   
18.         android:layout_height = "wrap_content"   
19.         android:layout_below = "@id/entry"   
20.         android:layout_alignParentRight = "true"   
21.         android:layout_marginLeft = "10dp"   
22.         android:text = "OK"  />   
23.     <Button   
24.         android:layout_width = "wrap_content"   
25.         android:layout_height = "wrap_content"   
26.         android:layout_toLeftOf = "@id/ok"   
27.         android:layout_alignTop = "@id/ok"   
28.         android:text = "Cancel"  />   
29. </RelativeLayout>  

在小屏幕尺寸的QVGA手机上显示如下：

在大屏幕的WSVGA屏幕上显示如下：

3、使用尺寸限定符

上面我们通过“wrap_content"、”match_parent"、“relative_layout"的方法来实现不同屏幕尺寸的视图伸展，有效的解决了屏幕尺寸问题，除了这些方法外我们还可以使用尺寸限定符来针对不同的屏幕来做特殊的界面布局。

第一列是屏幕的特征，有尺寸、密度、方向、长宽比

第二列是限定符的写法（如large,我们就需要建立一个文件夹名称为layout-large）

第三列是相关解释和描述

例如我们现在在我们的res下建立两个文件夹通过不同的限定符文件夹名称来匹配不同尺寸的屏幕

res/layout/main.xml

1. <LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"   
2.     android:orientation = "vertical"   
3.     android:layout_width = "match_parent"   
4.     android:layout_height = "match_parent" >   
5.   
6.     <fragment  android:id = "@+id/headlines"   
7.               android:layout_height = "fill_parent"   
8.               android:name = "com.example.android.newsreader.HeadlinesFragment"   
9.               android:layout_width = "match_parent"  />   
10. </LinearLayout>  

res/layout-large/main.xml

1. <LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"   
2.     android:layout_width = "fill_parent"   
3.     android:layout_height = "fill_parent"   
4.     android:orientation = "horizontal" >   
5.     <fragment  android:id = "@+id/headlines"   
6.               android:layout_height = "fill_parent"   
7.               android:name = "com.example.android.newsreader.HeadlinesFragment"   
8.               android:layout_width = "400dp"   
9.               android:layout_marginRight = "10dp" />   
10.     <fragment  android:id = "@+id/article"   
11.               android:layout_height = "fill_parent"   
12.               android:name = "com.example.android.newsreader.ArticleFragment"   
13.               android:layout_width = "fill_parent"  />   
14. </LinearLayout>  

上面布局中在大屏幕中我们将两个大视图放到了整个屏幕，二小屏幕中我们只放置了一个视图。我们的设备会根据屏幕尺寸来自动寻找自己的布局。

4、使用最小宽度限定符

上面根据屏幕尺寸来匹配不同的布局文件，但是很多时候我们可能在不同的大屏手机中需要分别显示不同的布局（例如Galaxy Tab显示5个还是7个），在Android3.2以后就有了最小宽度限定符来解决这个问题。

假设sw600dp来表示我们的最小宽度，则布局文件就可以有如下表示：

小屏幕手机适配的布局  res/layout/main.xml

1. <LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"   
2.     android:orientation = "vertical"   
3.     android:layout_width = "match_parent"   
4.     android:layout_height = "match_parent" >   
5.   
6.     <fragment  android:id = "@+id/headlines"   
7.               android:layout_height = "fill_parent"   
8.               android:name = "com.example.android.newsreader.HeadlinesFragment"   
9.               android:layout_width = "match_parent"  />   
10. </LinearLayout>  

设备宽度大于或等于600dp的布局 res/layout/layout-sw600dp.xml

1. <LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"   
2.     android:layout_width = "fill_parent"   
3.     android:layout_height = "fill_parent"   
4.     android:orientation = "horizontal" >   
5.     <fragment  android:id = "@+id/headlines"   
6.               android:layout_height = "fill_parent"   
7.               android:name = "com.example.android.newsreader.HeadlinesFragment"   
8.               android:layout_width = "400dp"   
9.               android:layout_marginRight = "10dp" />   
10.     <fragment  android:id = "@+id/article"   
11.               android:layout_height = "fill_parent"   
12.               android:name = "com.example.android.newsreader.ArticleFragment"   
13.               android:layout_width = "fill_parent"  />   
14. </LinearLayout>  

要注意的是这种限定符在3.2以前的版本手机上是不支持的。在3.2之前还必须用尺寸限定符large来代替。

5、使用layout别名

综合上面的分析，如果我们要支持一个包含大屏幕尺寸的设备必须包含例如下面几个布局来匹配

res/layout/main.xml

res/layout/layout-large

res/layout/layout-sw600dp

最后这两个文件的作用是相同的，是为了支持3.2以下和以上版本，为了避免混淆和维护难度，我们可以给这些布局起别名，比如下面的布局名：

res/layout/main.xml 单面板布局

res/layout/main_twopanes.xml 双面板布局

并添加这两个文件

res/values-large/layout.xml

1. <resources>  
2.     <item name="main" type="layout">@layout/main_twopanes</item>  
3. </resources>  

res/values-sw600dp/layout.xml

1. <resources>  
2.     <item name="main" type="layout">@layout/main_twopanes</item>  
3. </resources>  

可以看到这两个文件的内容相同，他们只是建立起一个main和mian_twospanes的联系，可以通过屏幕尺寸来分别获取不同的value文件下所对应的布局文件别名。

6、使用方向限定符

有的时候我们的应用可能需要翻转手机能获得更好的效果，此时的布局也需要做相应的改变，也可以分别做出对应的布局文件。请参照上面的表格（land  和 port)。

7、使用Nine-Patch图

对于不同的屏幕尺寸通常我们需要使用不同尺寸的图片资源，所以在设计可变大小的组件时，一定要使用Nine-Patch图。

如上图的Nine-Patch图在不同尺寸手机上的拉伸效果如下：

有关Nine-Patch的制作方法请参考我的另一篇博文：http://blog.csdn.net/dawanganban/article/details/17379193

二、支持不同的屏幕密度

我们在设计布局的时候不能使用绝对的像素尺寸，而应该使用dp和sp.不同设备具有不同的屏幕密度，1英寸的不同密度手机上的像素个数是不同的。为了让大家搞清楚这些基本概念，我逐一解释一下：

dpi 像素密度：像素密度，即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富。

我们可以用这个公式表示  1dpi = 1pix / 1in

dp (dip)设备独立像素：在屏幕密度为160的显示屏上，1dip=1px

有了这些概念，我们来算一下，1dip是多长（是多少英寸）

result = in / dip 

result = in / px  (根据dp的定义）

result = 1 / (px / in)

result = 1 / dpi

result = 1 / 160

从上面的推导可以看出在屏幕密度为160的显示屏上 1dip其实就是 1 / 160 英寸，是一个屏幕尺寸上的绝对单位。

Android中为我们提供了适配不同分辨率的资源包，我们只需要做一套资源就可以自动帮我们换算成相应dpi（分辨率）下的尺寸，放大及缩小比例如上图所示。

三、不同UI的代码逻辑适配

1、确定当前布局

1. public  class  NewsReaderActivity  extends  FragmentActivity  {   
2.     boolean mIsDualPane ;   
3.   
4.     @Override   
5.     public  void onCreate ( Bundle savedInstanceState )  {   
6.         super . onCreate ( savedInstanceState );   
7.         setContentView ( R . layout . main_layout );   
8.   
9.         View articleView = findViewById ( R . id . article );   
10.         mIsDualPane = articleView !=  null  &&    
11.                         articleView . getVisibility ()  ==  View . VISIBLE ;   
12.     }   
13. }  

如上面代码，我们可以通过某些View的可见性来判断选用的布局文件。

2、根据不同的布局，做出不同的逻辑

1. @Override  
2. public void onHeadlineSelected(int index) {  
3.     mArtIndex = index;  
4.     if (mIsDualPane) {  
5.         /* display article on the right pane */  
6.         mArticleFragment.displayArticle(mCurrentCat.getArticle(index));  
7.     } else {  
8.         /* start a separate activity */  
9.         Intent intent = new Intent(this, ArticleActivity.class);  
10.         intent.putExtra("catIndex", mCatIndex);  
11.         intent.putExtra("artIndex", index);  
12.         startActivity(intent);  
13.     }  
14. }  

3、使用代码片段实现重用

1. <LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"   
2.     android:layout_width = "fill_parent"   
3.     android:layout_height = "fill_parent"   
4.     android:orientation = "horizontal" >   
5.     <fragment  android:id = "@+id/headlines"   
6.               android:layout_height = "fill_parent"   
7.               android:name = "com.example.android.newsreader.HeadlinesFragment"   
8.               android:layout_width = "400dp"   
9.               android:layout_marginRight = "10dp" />   
10.     <fragment  android:id = "@+id/article"   
11.               android:layout_height = "fill_parent"   
12.               android:name = "com.example.android.newsreader.ArticleFragment"   
13.               android:layout_width = "fill_parent"  />   
14. </LinearLayout>