设计兼容不同的屏幕尺寸的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的材料设计兼容 ...
随机推荐
- 洛谷 P1373 小a和uim之大逃离 (差值型dp总结)
这道题和多米诺骨牌那道题很像 ,都是涉及到差值的问题. 这道题是二维的,同时要取模. 这种题,因为当前的决策有后效性,会影响到差值,所以直接把 差值作为维度,然后计算答案的时候把差值为0的加起来就行了 ...
- Adobe AIR and Flex - 保存序列化对象文件(译)
创建任何桌面应用程序几乎总是需要在本地存储数据,通过Adobe AIR我们有几下面几个选择,一个是我们能够使用内置的 SQLite 数据库支持,对于少量的数据这是大材小用了.另外一个选择是我们通过把数 ...
- 2、java注释、标识符、数据类型、类型转换
一.三种注释:单行注释.多行注释.文档注释(只能在类前或者方法前,@author作者) 二.java使用的编码为unicode码[0-65535] 包含ASCII码,在0-255中 ASCII码( ...
- MYSQL源代码编译的变动
Mysql的安装,对于mysql不同版本号的mysql源代码编译方式不一样 5.6.2的版本号開始编译方式已经由 configure 变成了cmake方式 ,相关的新的 编译方式在mysql官网已经提 ...
- 数据结构之fhq-treap
本文内容部分转自某大佬博客:https://blog.csdn.net/CABI_ZGX/article/details/79963427 例题:https://www.luogu.org/probl ...
- String slices
String slices A segment of a string is called a slice. Selecting a slice is similar selecting a char ...
- 解决Linux下yum安装无法解析URL的问题
问题: [root@yaya ~]# yum -y install gcc-* Loaded plugins: fastestmirror, presto Could not retrieve mir ...
- 线程1—Thread
随便选择两个城市作为预选旅游目标.实现两个独立的线程分别显示10次城市名,每次显示后休眠一段随机时间(1000ms以内),哪个先显示完毕,就决定去哪个城市.分别用Runnable接口和Thread类实 ...
- Chrome插件开发笔记
使用 XMLHttpRequest来抓取盗版小说网站里面的内容,但是注意需要在manifest.json文件中设置permission var xhr = new XMLHttpRequest();x ...
- FlatternMap和Map的区别
flattenMap使用步骤: 1.传入一个block,block类型是返回值RACStream,参数value 2.参数value就是源信号的内容,拿到源信号的内容做处理 3 ...