Android百分比布局初探

本是古典何须时尚 2022-08-09 00:46 153阅读 0赞

标题：Android百分比布局初探

依赖库：——com.android.support:percent

实现原理：

在这个包里面有两个新的容器类

1 、 PercentRelativeLayout

![Image 1][]

2 、 PercentFrameLayout

![Image 1][]

在此看来，这两个类很显然是继承自 FrameLayout 和  RelativeLayout 两个容器类。

新的容器有了一些设置百分比的属性，下面我们来了解一下：

*  layout\_widthPercent

设置控件宽度为父容器的宽的百分比

*  layout\_heightPercent

设置控件高度为父容器的高的百分比

*  layout\_marginPercent

*  layout\_marginLeftPercent

设置控件与左边控件的距离为父容器的宽度的百分比

*  layout\_marginTopPercent

设置控件与上方控件的距离为父容器的高度的百分比

*  layout\_marginRightPercent

设置控件与右边控件的距离为父容器的宽度的百分比

*  layout\_marginBottomPercent

设置控件与下方控件的距离为父容器的高度的百分比

*  layout\_marginStartPercent

与上面的说明类似

*  layout\_marginEndPercent

与上面的说明类似

从命名的方式我们可以知道，原来用某些具体单位（如 dp ）的设置现在都可以用百分比的方式进行设置了，例如设置控件的宽度 layout\_width 原来我们是这样玩的 android:layout\_width="match\_parent" 现在用了百分比的属性之后呢，可以这样玩了 app:layout\_widthPercent="50%" ，这里的百分比是相对于父容器而言的。

官方文档地址： https://juliengenoud.github.io/android-percent-support-lib-sample/  
官网代码：  
1.

PercentFrameLayout

<android.support.percent.PercentFrameLayout
     
             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="match_parent"/>
     
         <ImageView
     
             app:layout_widthPercent="50%"
     
             app:layout_heightPercent="50%"
     
             app:layout_marginTopPercent="25%"
     
             app:layout_marginLeftPercent="25%"/>
     
     </android.support.percent.PercentFrameLayout/>

2. PercentRelativeLayout

<android.support.percent.PercentRelativeLayout
     
        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="match_parent">
     
      
     
        <View
     
            android:id="@+id/top_left"
     
            android:layout_width="0dp"
     
            android:layout_height="0dp"
     
            android:layout_alignParentTop="true"
     
            android:background="#ff0000"
     
            app:layout_heightPercent="30%"
     
            app:layout_widthPercent="70%" />
     
      
     
        <View
     
            android:id="@+id/top_right"
     
            android:layout_width="0dp"
     
            android:layout_height="0dp"
     
            android:layout_alignParentTop="true"
     
            android:layout_toRightOf="@+id/top_left"
     
            android:background="#00ff00"
     
            app:layout_heightPercent="30%"
     
            app:layout_widthPercent="30%" />
     
      
     
      
     
        <View
     
            android:id="@+id/centre"
     
            android:layout_width="match_parent"
     
            android:layout_height="0dp"
     
            android:layout_below="@+id/top_left"
     
            android:background="#0000ff"
     
            app:layout_marginLeftPercent="10%"
     
            app:layout_marginRightPercent="20%"
     
            app:layout_marginTopPercent="10%"
     
            app:layout_marginBottomPercent="10%"
     
            app:layout_heightPercent="40%" />
     
      
     
        <View
     
            android:layout_width="match_parent"
     
            android:layout_height="0dp"
     
            android:id="@+id/bottom"
     
            android:layout_below="@+id/centre"
     
            android:background="#00f0ff"
     
            android:layout_alignParentLeft="true"
     
            android:layout_alignParentStart="true"
     
            app:layout_heightPercent="10%"/>
    
    </android.support.percent.PercentRelativeLayout>

效果：  
![Image 1][]

[Image 1]: