Android屏幕自适应

最新推荐文章于 2023-04-11 21:16:03 发布

Guanshuai_Android

最新推荐文章于 2023-04-11 21:16:03 发布

阅读量1.1k

点赞数

分类专栏： Android基础文章标签： Android屏幕自适应

本文链接：https://blog.csdn.net/a424128873/article/details/50792167

版权

Android基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

安卓屏幕有两种通用的属性：尺寸（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;

在布局代码里面的布局我们可以统一写成一个格式，这里以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>

最后生成的效果如下：

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

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