Android屏幕自适应

来源:互联网 发布:微信支付v3 demo php 编辑:程序博客网 时间:2024/06/03 20:44

安卓屏幕有两种通用的属性:尺寸(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(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGAHVGA和     QVGA WVGA=800x480HVGA=480x320, QVGA=320x240)推荐使用这个,不依赖像素。

px: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多。

pt: point,是一个标准的长度单位,1pt1/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-hdpidrawable-mdpidrawable-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;

在布局代码里面的布局我们可以统一写成一个格式,这里以wrap_content为例

<?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>

最后就需要我们在java代码中设计布局的大小了:

// 第一个按钮,宽度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>
最后生成的效果如下:



以上是我的一些总结,如有不足之处,希望大家能够在下面留言指出,我也一定会在第一时间进行补充更改。

为了尊重作者的劳动成果,如需转载,请注明转载地址,谢谢!


0 0