Android屏幕适配之百分比布局LinearLayout、RelativeLayout、FrameLayout

拼搏现实的明天。 2021-11-09 05:48 1294阅读 0赞

## 谷歌的百分比库已废弃，转用约束布局，本博文仅供参考思路。新方法请参考：[https://blog.csdn.net/qq\_21480607/article/details/98790567][https_blog.csdn.net_qq_21480607_article_details_98790567] ##

## 一、首先说一下Google官方提供的百分比布局兼容库： ##

[https://developer.android.google.cn/reference/android/support/percent/package-summary?hl=en\#interfaces][https_developer.android.google.cn_reference_android_support_percent_package-summary_hl_en_interfaces]  
Android Percent Support Library，目前它支持RelativeLayout和FrameLayout的百分比布局。  
使用前添加依赖，定义在support中

implementation 'com.android.support:percent:xx.x.x'

目前最新版本为：implementation ‘com.android.support:percent:28.0.0’  
查看网址：[https://developer.android.google.cn/topic/libraries/support-library/revisions.html?hl=en][https_developer.android.google.cn_topic_libraries_support-library_revisions.html_hl_en]  
关于compile、implementation与api的区别请查看：[https://blog.csdn.net/qq\_21480607/article/details/98477660][https_blog.csdn.net_qq_21480607_article_details_98477660]  
由于百分比布局不是内置在系统SDK当中，所以要把完整的包路径写出来。同时要定义一个app的命名空间，这样才能使用百分比布局的自定义属性。

xmlns：app:"http://schemas.android.com/apk/res-auto”

之后就可以使用app：layout\_widthPercent和layout\_heightPercent属性了。

#### 主要有以下属性 ####

*  app:layout\_heightPercent：用百分比表示高度
 *  app:layout\_widthPercent：用百分比表示宽度
 *  app:layout\_marginPercent：用百分比表示View之间的间隔
 *  app:layout\_marginLeftPercent：用百分比表示左边间隔
 *  app:layout\_marginRight：用百分比表示右边间隔
 *  app:layout\_marginTopPercent：用百分比表示顶部间隔
 *  app:layout\_marginBottomPercent：用百分比表示底部间隔
 *  app:layout\_marginStartPercent：用百分比表示距离第一个View之间的距离
 *  app:layout\_marginEndPercent：用百分比表示距离最后一个View之间的距离
 *  app:layout\_aspectRatio：用百分比表示View的宽高比

相关案例：

![好几个][20190805102653143.png]

<?xml version="1.0" encoding="utf-8"?>
    <android.support.percent.PercentRelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        >
    <TextView
        android:layout_alignParentBottom="true"
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#87CEFA"
        app:layout_heightPercent="100%"
        app:layout_marginPercent="4%"
        app:layout_widthPercent="10%"
        android:text="100%"
        android:gravity="center"
        />
    
    <TextView
        android:layout_alignParentBottom="true"
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView"
        android:background="#87CEFA"
        app:layout_heightPercent="80%"
        app:layout_marginPercent="4%"
        app:layout_widthPercent="10%"
        android:text="80%"
        android:gravity="center"
        />
    
    <TextView
        android:layout_alignParentBottom="true"
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView1"
        android:background="#87CEFA"
        app:layout_heightPercent="60%"
        app:layout_marginPercent="4%"
        app:layout_widthPercent="10%"
        android:text="60%"
        android:gravity="center"
        />
    
    <TextView
        android:layout_alignParentBottom="true"
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView2"
        android:background="#87CEFA"
        app:layout_heightPercent="40%"
        app:layout_marginPercent="4%"
        app:layout_widthPercent="10%"
        android:text="40%"
        android:gravity="center"
        />
    
    <TextView
        android:layout_alignParentBottom="true"
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView3"
        android:background="#87CEFA"
        app:layout_heightPercent="20%"
        app:layout_marginPercent="4%"
        app:layout_widthPercent="10%"
        android:text="20%"
        android:gravity="center"
        />
    </android.support.percent.PercentRelativeLayout>

## 二、有大牛改写了官方库 添加了PercentLinearLayout ##

对于如何导入，也是相当的简单，android studio的用户，直接：

dependencies {
        //...
        compile 'com.zhy:percent-support-extends:1.0.1'
    }

不需要导入官方的percent-support-lib了。

三个类分别为：

com.zhy.android.percent.support.PercentLinearLayout
    com.zhy.android.percent.support.PercentRelativeLayout
    com.zhy.android.percent.support.PercentFrameLayout

使用案例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNDgwNjA3_size_16_color_FFFFFF_t_70]

<?xml version="1.0" encoding="utf-8"?>
    <com.zhy.android.percent.support.PercentLinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    <com.zhy.android.percent.support.PercentFrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FF4082">
      <ImageView
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:src="@drawable/actbar_home_up_indicator"
          app:layout_heightPercent="6%"
          app:layout_widthPercent="15%"/>
        <TextView
            android:layout_alignParentTop="true"
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/white"
            app:layout_marginTopPercent="1%"
            app:layout_marginBottomPercent="1%"
            app:layout_heightPercent="4%"
            app:layout_widthPercent="100%"
            android:autoSizeMaxTextSize="80dp"
            android:autoSizeMinTextSize="16dp"
            android:autoSizeTextType="uniform"
            android:text="我的好友"
            android:textSize="26dp"
            android:gravity="center"
            />
        <TextView
            android:layout_alignParentTop="true"
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/white"
            app:layout_marginTopPercent="2%"
            app:layout_marginBottomPercent="1%"
            app:layout_marginLeftPercent="80%"
            app:layout_heightPercent="3%"
            app:layout_widthPercent="100%"
            android:autoSizeMaxTextSize="80dp"
            android:autoSizeMinTextSize="16dp"
            android:autoSizeTextType="uniform"
            android:text="添加好友"
            android:textSize="26dp"
            />
      </com.zhy.android.percent.support.PercentFrameLayout>
    </com.zhy.android.percent.support.PercentLinearLayout>

详细介绍请见博主博文：[https://blog.csdn.net/lmj623565791/article/details/46767825][https_blog.csdn.net_lmj623565791_article_details_46767825]

[https_blog.csdn.net_qq_21480607_article_details_98790567]: https://blog.csdn.net/qq_21480607/article/details/98790567
[https_developer.android.google.cn_reference_android_support_percent_package-summary_hl_en_interfaces]: https://developer.android.google.cn/reference/android/support/percent/package-summary?hl=en#interfaces
[https_developer.android.google.cn_topic_libraries_support-library_revisions.html_hl_en]: https://developer.android.google.cn/topic/libraries/support-library/revisions.html?hl=en
[https_blog.csdn.net_qq_21480607_article_details_98477660]: https://blog.csdn.net/qq_21480607/article/details/98477660
[20190805102653143.png]: /images/20211109/53fc6624196c4be6b3aa3e52fb57c58e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNDgwNjA3_size_16_color_FFFFFF_t_70]: /images/20211109/1316b7e430f74895b4b7c68157277683.png
[https_blog.csdn.net_lmj623565791_article_details_46767825]: https://blog.csdn.net/lmj623565791/article/details/46767825