Android-百分比布局

作者: ChaosHeart | 来源:发表于2021-11-13 15:19 被阅读0次

    1 百分比布局:

    在布局方面我们都知道可以通过LinearLayout的layout_weight属性来进行适配,但是在某些情况下我们要向用这种方法进行适配就必须进行多层布局嵌套,而这则会导致布局文件复杂,增加渲染层次,致使性能下降。
    针对这种情况google为我们提供了一个百分比布局兼容库:Android Percent Support Library,解决了上述的问题,目前它支持RelativeLayout(相对布局)和FrameLayout(帧布局)的百分比布局,不过已经有大牛在GitHub上面开源了(线性布局)LinearLayout的百分比布局支持库。

    2 添加百分比布局依赖:

    implementation 'androidx.percentlayout:percentlayout:1.0.0'
    
    20200110004229387.png

    3 在函数库里面我们主要用到两个类:

    *   PercentRelativeLayout
    *   PercentFrameLayout
    

    4 它们主要有以下属性

    *   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的宽高比
    

    5 实例:

    <?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="#FF4081"
            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="#8FFF4081"
            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="#60FF4081"
            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="#40FF4081"
            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="#20FF4081"
            app:layout_heightPercent="20%"
            app:layout_marginPercent="4%"
            app:layout_widthPercent="10%"
            android:text="20%"
            android:gravity="center"
            />
    </android.support.percent.PercentRelativeLayout>
    

    参考:
    https://www.cnblogs.com/renhui/articles/12658999.html
    https://www.cnblogs.com/s42-/p/9854992.html
    https://blog.csdn.net/qq_41205771/article/details/103915543

    相关文章

      网友评论

        本文标题:Android-百分比布局

        本文链接:https://www.haomeiwen.com/subject/awwazltx.html