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

相关文章

  • 前端布局种类

    1、流式布局(百分比布局) 2、flex布局(百分比布局) 3、rem布局(百分比布局)

  • 响应式布局

    弹性布局 浮动+百分比布局 Flex布局 悬浮+百分比布局 浮动+百分比布局好处 网页内容宽度自适应 多设备都适用...

  • Android-百分比布局

    1 百分比布局: 在布局方面我们都知道可以通过LinearLayout的layout_weight属性来进行适配,...

  • 流式布局

    流式布局(百分比布局) 流式布局就是百分比布局,也称为非固定像素布局 通过将盒子的宽度设置成百分比,从而根据屏幕的...

  • 移动端布局

    1.百分比布局 百分比布局, 也叫流式布局效果: 宽度自适应,高度固定。 2.Flex布局 Flex布局/弹性布局...

  • 响应式页面开发

    布局方式 固定布局 流式布局:流式布局是以百分比作为单位的,我们要牢记如下公式:百分比宽度 = 目标元素宽度 / ...

  • CSS真的很麻烦,把CSS语法学会了,提升你的编码能力还是绰绰有

    css3画热咖啡 css自适应布局方案 一、百分比布局宽度百分比,高度px布局 二、rem布局①自定义rem尺寸 ...

  • 移动Web开发中的常见布局方式及一些常见问题

    一、流式布局 1.1 什么是流式布局 流式布局就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩...

  • 布局小结

    布局方式 静态布局 浮动布局 定位布局 自适应布局 流式布局(百分比布局) 响应式布局 弹性布局 悬挂布局 圣杯布...

  • 布局

    今天学习了安卓的四种布局方式 线性布局 相对布局 帧布局 百分比布局

网友评论

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

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