OPhone 2.0平台支持多种屏幕尺寸

转贴自:http://dev.10086.cn/cmdn/wiki/index.php?doc-view-2479.html#3

OPhone平台支持多种屏幕尺寸，目前已经发布的OPhone1.0和OPhone1.5平台上的主流终端，其屏幕尺寸主要是HVGA(480x320)和nHD(640x360)两种。而基于这两种分辨率的应用程序，在移植到OPhone2.0平台上时，由于主流终端屏幕分辨率为WVGA(800x480)，因此在移植过程中部分应用程序出现屏幕适配问题。本文的重点在于指导应用程序开发者在OPhone2.0平台上能够更好的对多种屏幕尺寸进行适配，达到良好的用户体验。

原理

OPhone平台将支持的屏幕尺寸和分辨率通过像素密度和屏幕大小两个纬度进行分类，开发人员只需要在编写程序的时候，准备相应分辨率的资源文件，分别放到drawable-hdpi、drawable-mdpi、drawable-ldpi文件夹，在应用程序运行的时候，系统会根据当前屏幕的像素密度和分辨率显示相应资源图片。

	* (120), ldpi	中密度 (160), mdpi	高密度 (240), hdpi
小屏幕	QVGA (240x320), 2.6"-3.0" diagonal
普通屏幕	WQVGA (240x400), 3.2"-3.5" diagonal FWQVGA (240x432), 3.5"-3.8" diagonal	HVGA (320x480), 3.0"-3.5" diagonal	WVGA (480x800), 3.3"-4.0" diagonal FWVGA (480x854), 3.5"-4.0" diagonal
大屏幕		WVGA (480x800), 4.8"-5.5" diagonal FWVGA (480x854), 5.0"-5.8" diagonal

由上表可知，分辨率为WVGA(480x800)，屏幕尺寸为3.3’’-4.0’’所对应的资源文件为hdpi，而OPhone1.0和OPhone1.5平台上的主流终端的屏幕分辨率HVGA(320x480)所对应的资源文件为mdpi，这就出现了一个不一致性：OPhone1.0、OPhone1.5平台上的应用程序能否在不修改的情况下在OPhone2.0的主流终端上正常显示？好消息是，OPhone2.0平台提供的UI适配机制很好的解决了这一问题，我们在后面会做详细讨论这一机制。
   首先，我们通过下面的示例代码给大家展示OPhone2.0平台多屏幕尺寸支持机制。

编辑本段 回目录2. 示例应用

2.1准备工作
    为了更好的展现OPhone2.0平台对于多屏幕尺寸的支持机制，在示例程序中要用到的资源文件左上角做了相应标记，如下：
 hdpi资源文件

（长：555）
mdpi资源文件

（长：480）

ldpi资源文件

（长：400）

2.2示例代码编写

关于如何在OPhone1.0和OPhone1.5平台上适配多屏幕尺寸，可以参考文技术文章：http://www.ophonesdn.com/article/show/42。
在OPhone2.0平台，原理的实质是类似的，不同的是OPhone2.0平台更加强大，大大减轻了程序员在应用开发过程中的精力耗费和适配难度。为了更好的展现这一机制，我们编写了两个Activity。
 第一个Activity
该Activity的Java文件命名为starttest.java，源代码如下：

复制到剪贴板  Java代码

1. package com.ophone.multiscreen;   
2.   
3. import android.app.Activity;   
4. import android.content.Intent;     
5. import android.os.Bundle;   
6. import android.widget.Button;   
7. import android.widget.TextView;   
8. import android.view.View.OnClickListener;   
9. import android.view.Display;   
10. import android.view.View;   
11. import android.view.WindowManager;   
12.   
13. public class starttest extends Activity implements OnClickListener {   
14.     /** Called when the activity is first created. */  
15.     @Override  
16.     public void onCreate(Bundle savedInstanceState) {   
17.         super.onCreate(savedInstanceState);   
18.         setContentView(R.layout.main);   
19.            
20.         //get the screen width and height   
21.         Display display = null;   
22.         display = ((WindowManager)getSystemService(WINDOW_SERVICE)).getDefaultDisplay();   
23.         int width = display.getWidth();   
24.         int height = display.getHeight();   
25.            
26.         TextView ResultText = (TextView)findViewById(R.id.ResultText);     
27.         ResultText.setText("The app is created for the mutiple screen display test. " + "/n"    
28.                 + "Current resolution is " + width + "x" + height);     
29.            
30.         Button MutiScreenTest = (Button)findViewById(R.id.MutiScreenTest);    
31.         MutiScreenTest.setOnClickListener(this);   
32.             
33.     }   
34.        
35.     public void onClick(View arg0) {     
36.             if (arg0.getId() == R.id.MutiScreenTest) {     
37.                   startTest();     
38.                   }     
39.            }     
40.                 
41.     private void startTest() {     
42.          //Start another Activity by Intent     
43.           Intent intent = new Intent (starttest.this, multiscreen.class);     
44.            startActivity(intent);     
45.           }     
46. }   

该Activity的页面布局文件命名为main.xml，源代码如下：

复制到剪贴板  XML/HTML代码

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     >  
7. <TextView      
8.     android:layout_height="wrap_content"      
9.     android:layout_width="fill_parent"      
10.     android:layout_below="@+id/ExitButton"      
11.     android:id="@+id/ResultText"></TextView>     
12. <Button      
13.     android:layout_width="wrap_content"      
14.     android:layout_height="wrap_content"       
15.     android:id="@+id/MutiScreenTest"      
16.     android:layout_below="@+id/BaseEdit"      
17.     android:text="Press to begin Test" ></Button>    
18. </LinearLayout>  

 第二个Activity
该Activity的java文件命名为multiscreen.java，源代码如下：

复制到剪贴板  Java代码

1. package com.ophone.multiscreen;   
2.   
3. import android.app.Activity;   
4. import android.os.Bundle;   
5.   
6. public class multiscreen extends Activity {   
7.     /** Called when the activity is first created. */  
8.     @Override  
9.     public void onCreate(Bundle savedInstanceState) {   
10.         super.onCreate(savedInstanceState);   
11.         setContentView(R.layout.multiscreendisplay);   
12.     }   
13. }   

该Activity的页面布局文件命名为multiscreendisplay.xml，源代码如下：

复制到剪贴板  XML/HTML代码

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     >  
7. <TextView     
8.     android:layout_width="fill_parent"    
9.     android:layout_height="wrap_content"  
10.     android:orientation="vertical"  
11.     android:background="@drawable/testpic"      
12.     />  
13. </LinearLayout>  

 AndroidManifest.xml
该工程的AndroidManifest.xml文件如下，供参考：

复制到剪贴板  XML/HTML代码

1. <?xml version="1.0" encoding="utf-8"?>  
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
3.       package="com.ophone.multiscreen"  
4.       android:versionCode="1"  
5.       android:versionName="1.0">  
6.     <application android:icon="@drawable/icon" android:label="@string/app_name">  
7.         <activity android:name=".starttest"  
8.                   android:label="@string/app_name">  
9.             <intent-filter>  
10.                 <action android:name="android.intent.action.MAIN" />  
11.                 <category android:name="android.intent.category.LAUNCHER" />  
12.             </intent-filter>  
13.         </activity>  
14.            
15.         <activity android:name=".multiscreen"  
16.                   android:label="@string/app_name">  
17.         </activity>  
18.   
19.     </application>  
20.     <uses-sdk android:minSdkVersion="7" />  
21.   
22. </manifest>    

2.3应用程序运行结果

示例代码编写完毕，需要在不同分辨率下进行验证：WVGA(800x480)、HVGA(480x320)、WQVGA(400x240)。
 WVGA(800x480)
模拟器启动命令为：
./emulator –avd ophone –dpi-device 240 –skin WVGA800 –wipe-data

在分辨率为WVGA(800x480)的运行结果如下：

              

 HVGA(480x320)
模拟器启动命令为：
./emulator –avd ophone –dpi-device 160 –skin HVGA –wipe-data

在分辨率为HVGA(480x320)的运行结果如下：

               

 WQVGA(400x240)
模拟器启动命令为：
./emulator –avd ophone –dpi-device 120 –skin WQVGA400 –wipe-data

在分辨率为WQVGA(400x240)的运行结果如下：

        

               

编辑本段 回目录3. 跨平台适配

前文中提到，对于基于OPhone1.0和OPhone1.5平台上的应用程序，如果不进行代码修改，是否可以进行全屏适配？
我们先做个测试，如果删除drawable-hdpi里面的资源文件testpic.png，然后重新编译，在WVGA(800x480)分辨率下运行程序，得到：

            

注意第二张图片，因为运行环境是WVGA和hdpi，由于drawable-hdpi里面相应的资源图片被删除，因此，系统就会去drawable-mdpi文件夹里找对应资源图片，拉伸后全屏显示，缺点是图片的清晰度降低。
    我们继续作试验，再把drawable-mdpi下的资源文件testpic.

 

png也删掉，然后同样编译，在WVGA(800x480)分辨率下运行，可以看到：

               

注意第二张图片，因为运行环境依旧是WVGA(800x480)和hdpi，由于drawable-hdpi和drawable-mdpi里面相应的资源图片被删除，因此，系统会去drawable-ldpi文件夹里找对应资源图片，拉伸后全屏显示，这时的图片的清晰度更低。
由上面的测试我们可以知道，对于一般基于OPhone1.0和OPhone1.5平台开发的分辨率为HVGA(480x320)的应用程序而言，由于OPhone2.0平台提供的强大的多屏幕尺寸适配机制，可以无需修改直接在WVGA(800x480)分辨率的终端上全屏显示。但由于像素密度的差异，会造成图片的清晰度较差，使用户体验变差，因此建议应用程序开发者基于OPhone2.0平台对源代码做相应修改。

编辑本段 回目录4. 总结

本文通过适配原理描述、示例代码编写和试验展示，给广大OPhone应用程序开发者提供了较为详细的多屏幕尺寸适配支持。
    这里需要再次强调的是，对于基于OPhone1.5平台开发的应用程序，如果应用开发者在之前的开发中遵循OPhone平台UI适配机制（http://www.ophonesdn.com/article/show/42），那么，该应用程序在通常情况下可以在OPhone2.0平台全屏适配，只不过会出现由于图片拉伸而造成页面清晰度稍差。
    同时，对于页面布局文件的修改，我们建议：
 在XML布局文件中，尽量使用wrap_content, fill_parent等；
 避免使用AbsoluteLayout；
 尽可能不要在代码中直接定义像素值；
 使用具有特定像素密度和分辨率的资源文件。
    文中的示例代码和试验展示的作用仅仅是为了阐述OPhone2.0平台的多屏幕尺寸适配机制，在实际开发中，尤其是复杂的游戏开发，由于涉及资源图片众多，还需要广大开发者依据自身情况做适当调整。