Android屏幕自适应

安卓屏幕有两种通用的属性:尺寸(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>
最后生成的效果如下:



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

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


你可能感兴趣的:(Android屏幕自适应)