设计兼容不同的屏幕尺寸的Android界面
Android的屏幕类型有几百种不同的尺寸,从小型的手机到大型的电视机。因此要使我们的应用程序兼容不同屏幕尺寸,才可以让我们的应用提供给更多的用户使用。
一、支持不同的屏幕尺寸
1、使用“wrap_content"和”match_parent"
为了确保布局的灵活性,来适应不同尺寸的屏幕,我们应该使用“wrap_content"来匹配组件的最小尺寸和使用”match_parent"来设置某些视图来匹配父视图的大小。这样设置和直接设置视图大小(如48dip)不同的是该视图的空间可以随着屏幕尺寸(父视图的大小)随意扩展。例如如下布局:
<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 = "@drawable/logo"
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 = "@drawable/button_bg"
android:layout_height = "match_parent"
android:layout_weight = "0"
android:layout_width = "120dp"
style = " @ style / CategoryButtonStyle " />
</LinearLayout> <fragment android:id = "@+id/headlines"
android:layout_height = "fill_parent"
android:name = "com.example.android.newsreader.HeadlinesFragment"
android:layout_width = "match_parent" />
</LinearLayout>
当我们翻转手机屏幕可以看到横向和竖向的屏幕适配如下:
2、使用Relative_layout
我们可以使用LinearLayout通过“wrap_content"和”match_parent"来实现很多复杂的布局,但是LinearLayout擅长控制的是线性的关系,如果是要精确控制平面关系,使用Relative_layout比较合适,它可以指定两个组件之间的空间关系。例如下面代码:
<?xml的version = "1.0" encoding = "utf-8" ?>
<RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "match_parent"
android:layout_height = "match_parent" >
<TextView
android:id = "@+id/label"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:text = "Type here:" />
<EditText
android:id = "@+id/entry"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_below = "@id/label" />
<Button
android:id = "@+id/ok"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_below = "@id/entry"
android:layout_alignParentRight = "true"
android:layout_marginLeft = "10dp"
android:text = "OK" />
<Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_toLeftOf = "@id/ok"
android:layout_alignTop = "@id/ok"
android:text = "Cancel" />
</RelativeLayout>
在小屏幕尺寸的QVGA手机上显示如下:
在大屏幕的WSVGA屏幕上显示如下:
3、使用尺寸限定符
上面我们通过“wrap_content"、”match_parent"、“relative_layout"的方法来实现不同屏幕尺寸的视图伸展,有效的解决了屏幕尺寸问题,除了这些方法外我们还可以使用尺寸限定符来针对不同的屏幕来做特殊的界面布局。
第一列是屏幕的特征,有尺寸、密度、方向、长宽比
第二列是限定符的写法(如large,我们就需要建立一个文件夹名称为layout-large)
第三列是相关解释和描述
例如我们现在在我们的res下建立两个文件夹通过不同的限定符文件夹名称来匹配不同尺寸的屏幕
res/layout/main.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-large/main.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>
上面布局中在大屏幕中我们将两个大视图放到了整个屏幕,二小屏幕中我们只放置了一个视图。我们的设备会根据屏幕尺寸来自动寻找自己的布局。
4、使用最小宽度限定符
上面根据屏幕尺寸来匹配不同的布局文件,但是很多时候我们可能在不同的大屏手机中需要分别显示不同的布局(例如Galaxy Tab显示5个还是7个),在Android3.2以后就有了最小宽度限定符来解决这个问题。
假设sw600dp来表示我们的最小宽度,则布局文件就可以有如下表示:
小屏幕手机适配的布局 res/layout/main.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>
设备宽度大于或等于600dp的布局 res/layout/layout-sw600dp.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>
要注意的是这种限定符在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
<resources>
<item name="main" type="layout">@layout/main_twopanes</item>
</resources>
res/values-sw600dp/layout.xml
<resources>
<item name="main" type="layout">@layout/main_twopanes</item>
</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、确定当前布局
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 ;
}
}
如上面代码,我们可以通过某些View的可见性来判断选用的布局文件。
2、根据不同的布局,做出不同的逻辑
@Override
public void onHeadlineSelected(int index) {
mArtIndex = index;
if (mIsDualPane) {
/* display article on the right pane */
mArticleFragment.displayArticle(mCurrentCat.getArticle(index));
} else {
/* start a separate activity */
Intent intent = new Intent(this, ArticleActivity.class);
intent.putExtra("catIndex", mCatIndex);
intent.putExtra("artIndex", index);
startActivity(intent);
}
}
3、使用代码片段实现重用
<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>
设计兼容不同的屏幕尺寸的Android界面的更多相关文章
- 创办支持多种屏幕尺寸的Android应用
创建支持多种屏幕尺寸的Android应用 Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的 ...
- android做设计的每一个屏幕尺寸和分辨率(一个)
一个.与分辨率无关 1.使用dp(dpi) Android密度不依赖像素(dp)指定屏幕尺寸,它同意不同的屏幕尺寸和像素密度类似设备通过缩放来达到同样的效果. (不解决不同屏幕尺寸的问题?) 2.的资 ...
- 创建支持多种屏幕尺寸的Android应用
Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用户界面到它显示的屏上.与此同时,系统提供 ...
- [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用
原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...
- Android界面设计适配不同屏幕的尺寸和密度解读
Android是运行在各种提供不同的屏幕尺寸和密度的设备.Android系统提供跨设备的统一开发环境和处理大部分的工作,以调整每个应用程序的用户界面,以在其上显示的画面. 同时,该系统提供了API,允 ...
- Android屏幕适配全攻略(最权威的官方适配指导)屏幕尺寸 屏幕分辨率 屏幕像素密度 dpdipdpisppx mdpihdpixdpixxdpi
Android屏幕适配全攻略(最权威的官方适配指导)原创赵凯强 发布于2015-05-19 11:34:17 阅读数 153734 收藏展开 转载请注明出处:http://blog.csdn.net/ ...
- Android平板上开发应用的一点心得——精确适配不同的dpi和屏幕尺寸
一.引言 Android的开源使厂商无需自行研发OS,大大降低了研发.生产的成本,使得Android平板品牌如雨后春笋般爆发,山寨机厂商们似乎又找到了一丝希望.与此同时带来的是广大开发者的苦不堪言,各 ...
- 【文章内容来自《Android 应用程序开发权威指南》(第四版)】如何设计兼容的用户界面的一些建议(有删改)
最近一直在看的一本书是<Android 应用程序开发权威指南>(第四版),十分推荐.书中讲到了一些用户界面设计的规范,对于初学者我认为十分有必要,在这里码给大家,希望对我们都有用. 在我们 ...
- 【转】Android的材料设计兼容库(Design Support Library)
转自:http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html?mType=Group Android的材料设计兼容 ...
随机推荐
- vsftpd服务程序的三种认证模式
vsftpd服务程序的三种认证模式的配置方法——匿名开放模式.本地用户模式以及虚拟用户模式.了解PAM可插拔认证模块的原理.作用以及实战配置方法,通过实战课程进一步继续学习SELinux服务的配置方法 ...
- 《Craking the Coding interview》python实现---02
###题目:翻转一个字符串###思路:从字符串的最后一位开始,依次取###实现:伪代码.函数.类实现#伪代码: #01string=sNew_s=""for i in range( ...
- Eclipse配置class文件输出目录
1, Eclipse选中项目名称,邮件选中“Build Path”,然后选择“Configure Build Path”--->选择“Source” Tab---->修改"Def ...
- 魔兽争霸RPG游戏-军团战争-游戏经验总结
终于要写这篇了,上一篇是个意外. 2015年关注,一代鬼王Xun和GGL比赛.晚上11点之后,经常有水友赛.主播xun,会带着一帮小弟,玩一些游戏.比如魔兽争霸6v6,2v2,RPG游戏-军团战争,疯 ...
- java 项目 导入成功后jsp页面报错处理方法
本人新导入一个maven项目可是jsp页面一直报错,我先按照网上的经验操作如下步骤: 在pom.xml配置文件中添加上javax.servlet的相关依赖: <dependency> & ...
- hdu 1518 Square 深搜,,,,花样剪枝啊!!!
Square Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
- 不安全的直接对象引用:你的 ASP.NET 应用数据是否安全?
介绍 作为一个在X94的航空工程师,你的老板要求你从2号楼的工程图中检索出一个特定的专利.不幸的是,进入大楼需要你出示你具有进入大楼的资格的证明,然后你迅速地以徽章的形式出示给了保安.到了十三楼,进入 ...
- Implement Stack using Queues 用队列实现栈
Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...
- zzulioj--1832--贪吃的松鼠(位运算好题)
1832: 贪吃的松鼠 Time Limit: 3 Sec Memory Limit: 2 MB Submit: 43 Solved: 7 SubmitStatusWeb Board Descri ...
- HD-ACM算法专攻系列(3)——Least Common Multiple
题目描述: 源码: /**/ #include"iostream" using namespace std; int MinComMultiple(int n, int m) { ...