安卓屏幕有两种通用的属性:尺寸(size)和密度(density)
尺寸:small、normal、large、xlarge
密度:low(ldpi),medium(mdpi),high(hdpi),extrahigh(xhdpi)
解决屏幕尺寸的匹配问题,我们不仅需要匹配屏幕的尺寸,同时还要匹配屏幕的方向。横屏与竖屏的模式下对应的布局是不同的,这样才能做到屏幕的完全匹配的效果,否则的画可能会出现在竖屏模式下显示正常的,到了横屏就会变得界面混乱。
针对上述的情况,一般情况下,我们都是创建唯一的xml布局来匹配每一个尺寸,这里主要是指5寸一下和5寸以上的匹配以及横屏竖屏的匹配。创建的xml文件我们都需要保存在资源目录下面,并且按照<screen-size>作为后缀名称。
下面介绍几种自适应:
1、字体的自适应
这里又有关于Android下表示大小的单位的相关知识。
下面列出几种表示单位:
dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA、HVGA和 QVGA (WVGA=800x480,HVGA=480x320, QVGA=320x240)推荐使用这个,不依赖像素。
px: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多。
pt: point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用;
sp: scaled pixels(放大像素). 主要用于字体显示best for textsize。可以根据用户的字体大小首选项进行缩放
根据上面对单位的分析,使用sp为单位就可以实现自适应字体大小。
2、不同的layout
Android手机屏幕大小不一,有480x320,640x360, 800x480,854x480.怎样才能让App自动适应不同的屏幕呢? 其实很简单,只需要在res目录下创建不同的layout文件夹,比如layout-640x360,layout-800x480,所有的layout文件在编译之后都会写入R.java里,而系统会根据屏幕的大小自己选择合适的layout进行使用。 但是需要注意的是根据分辨率添加layout文件时,layout这个原来的文件夹及资源一定要存在,否则会出现错误。同时在命名layout文件夹时,必须遵守这样的规则.layout-640x360 大数放在小数的前面,否则会报错。下图为需要定义的文件夹和文件:
drawable-hdpi、drawable-mdpi、drawable-ldpi的区别:
(1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854)
(2)drawable-mdpi里面存放中等分辨率的图片,如HVGA (320x480)
(3)drawable-ldpi里面存放低分辨率的图片,如QVGA (240x320) 1、字体的自适应
这里又有关于Android下表示大小的单位的相关知识。
下面列出几种表示单位:
dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA、HVGA和 QVGA (WVGA=800x480,HVGA=480x320, QVGA=320x240)推荐使用这个,不依赖像素。
px: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多。
pt: point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用;
sp: scaled pixels(放大像素). 主要用于字体显示best for textsize。可以根据用户的字体大小首选项进行缩放
根据上面对单位的分析,使用sp为单位就可以实现自适应字体大小。
2、不同的layout
Android手机屏幕大小不一,有480x320,640x360, 800x480,854x480.怎样才能让App自动适应不同的屏幕呢? 其实很简单,只需要在res目录下创建不同的layout文件夹,比如layout-640x360,layout-800x480,所有的layout文件在编译之后都会写入R.java里,而系统会根据屏幕的大小自己选择合适的layout进行使用。 但是需要注意的是根据分辨率添加layout文件时,layout这个原来的文件夹及资源一定要存在,否则会出现错误。同时在命名layout文件夹时,必须遵守这样的规则.layout-640x360 大数放在小数的前面,否则会报错。下图为需要定义的文件夹和文件:
drawable-hdpi、drawable-mdpi、drawable-ldpi的区别:
(1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854)
(2)drawable-mdpi里面存放中等分辨率的图片,如HVGA (320x480)
(3)drawable-ldpi里面存放低分辨率的图片,如QVGA (240x320)
通常情况下我们会把5寸一下的屏幕称为小屏幕,5寸以上的屏幕称为大屏幕。那么我们主要就针对这两种屏幕做相应的布局即可。
下面我为大家介绍几种自适应布局的实现方法:
1、在java代码中设置宽和高
首先我们需要获取当前屏幕的宽和高:
DisplayMetrics displayMetrics = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(displayMetrics); //获取屏幕的宽度 Constant.displayWidth = displayMetrics.widthPixels; //获取屏幕的高度 Constant.displayHeight = displayMetrics.heightPixels;
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ffcccc" android:text="aaaaaaaa"/> <Button android:id="@+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ccffcc" android:text="bbbbbbbbb"/> <Button android:id="@+id/btn3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ccccff" android:text="ccccccccc"/> <Button android:id="@+id/btn4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ffffcc" android:text="dddddddddddddddddd"/> </LinearLayout>
// 第一个按钮,宽度100%,高度10% LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LayoutParams.FILL_PARENT, (int) (Constant.displayHeight * 0.1f + 0.5f)); btn1.setLayoutParams(params); // 第二个按钮,宽度100%,高度30% LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams( LayoutParams.FILL_PARENT, (int) (Constant.displayHeight * 0.3f + 0.5f)); btn2.setLayoutParams(params2); // 第三个按钮,宽度50%,高度20% LinearLayout.LayoutParams params3 = new LinearLayout.LayoutParams( (int) (Constant.displayWidth * 0.5f + 0.5f), (int) (Constant.displayHeight * 0.2f + 0.5f)); btn3.setLayoutParams(params3); // 第三个按钮,宽度70%,高度填满剩下的空间 LinearLayout.LayoutParams params4 = new LinearLayout.LayoutParams( (int) (Constant.displayWidth * 0.7f + 0.5f), LayoutParams.FILL_PARENT); btn4.setLayoutParams(params4);
这就是完成后的效果图了
2、Layout_weight
该方法是目前Android多屏幕自适应最为流行的解决方案了。
该属性表示空间在父布局中的显示权重,一般用于Linear_Layout中。值越小,则对象的width或者height的优先级就越高,一般在横向布局中,决定的是宽度的优先级,在纵向布局中决定的是高度的优先级。
传统的weight使用方法是将当前的空间layout_width和layout_height设置成fill_parent,这样就可以把空间的显示比例完全交给layout_weight;这样使用weight属性就会造成了值越小显示的比例越大的情况。这样情况的出现对于2个空间还好,但是如果空间多了,不好计算其反比,这样就会显得很麻烦。
所以就出现了现在最流行的方法,将height设置成0px这样的话,结合weight属性就可以使得空间成正比显示了。
具体代码中,我将layout_width和layout_height的两个属性封装成了4个style。之后我们可以根据自己的实际情况选择其中的一种。
<?xml version="1.0" encoding="utf-8"?> <resources> <!-- 全屏幕拉伸--> <style name="layout_full"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">fill_parent</item> </style> <!-- 固定自身大小--> <style name="layout_wrap"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> </style> <!-- 横向分布--> <style name="layout_horizontal" parent="layout_full"> <item name="android:layout_width">0px</item> </style> <!-- 纵向分布--> <style name="layout_vertical" parent="layout_full"> <item name="android:layout_height">0px</item> </style> </resources>具体的布局代码如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/layout_full" android:orientation="vertical"> <LinearLayout style="@style/layout_vertical" android:layout_weight="1" android:orientation="horizontal"> <View style="@style/layout_horizontal" android:background="#aa0000" android:layout_weight="1"/> <View style="@style/layout_horizontal" android:background="#00aa00" android:layout_weight="4"/> <View style="@style/layout_horizontal" android:background="#0000aa" android:layout_weight="3"/> <View style="@style/layout_horizontal" android:background="#aaaaaa" android:layout_weight="2"/> </LinearLayout> <LinearLayout style="@style/layout_vertical" android:layout_weight="2" android:orientation="vertical"> <View style="@style/layout_vertical" android:background="#ffffff" android:layout_weight="4"/> <View style="@style/layout_vertical" android:background="#aa0000" android:layout_weight="3"/> <View style="@style/layout_vertical" android:background="#00aa00" android:layout_weight="2"/> <View style="@style/layout_vertical" android:background="#0000aa" android:layout_weight="1"/> </LinearLayout> </LinearLayout>最后生成的效果如下:
以上是我的一些总结,如有不足之处,希望大家能够在下面留言指出,我也一定会在第一时间进行补充更改。
为了尊重作者的劳动成果,如需转载,请注明转载地址,谢谢!