安卓UI之百分比布局

在百分比布局中，我们可以不再使用wrap_content、match_parent等方式来指定控件的大小，而是允许直接指定控件在布局的所占百分比，这样可以实现平分布局和以任意比例分隔布局。
因为线性布局本身已经支持按比例指定控件的大小了，因此只对帧布局和相对布局提供了功能拓展。提供了PercentFrameLayout和PercentRelativeLayout两种布局。

由于百分比布局不是内置在系统SDK中的，所以要把完整的包路径写出来。然后还必须定义一个app的命名空间，这样才能使用百分比布局的自定义属性。
代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentFrameLayout 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">
    <Button
        android:id="@+id/button1"
        android:text="Button1"
        android:layout_gravity="left|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%">
    </Button>
    <Button
        android:id="@+id/button2"
        android:text="Button2"
        android:layout_gravity="right|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%">
    </Button>
    <Button
        android:id="@+id/button3"
        android:text="Button3"
        android:layout_gravity="left|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%">
    </Button>
    <Button
        android:id="@+id/button4"
        android:text="Button4"
        android:layout_gravity="right|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%">
    </Button>
</androidx.percentlayout.widget.PercentFrameLayout>

效果如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.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">
    <Button
        android:id="@+id/button1"
        android:text="Button1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        app:layout_widthPercent="25%"
        app:layout_heightPercent="25%">
    </Button>
    <Button
        android:id="@+id/button2"
        android:text="Button2"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        app:layout_widthPercent="25%"
        app:layout_heightPercent="25%">
    </Button>
    <Button
        android:id="@+id/button3"
        android:text="Button3"
        android:layout_centerInParent="true"
        app:layout_widthPercent="25%"
        app:layout_heightPercent="25%">
    </Button>
    <Button
        android:id="@+id/button4"
        android:text="Button4"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        app:layout_widthPercent="25%"
        app:layout_heightPercent="25%">
    </Button>
    <Button
        android:id="@+id/button5"
        android:text="Button5"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        app:layout_widthPercent="25%"
        app:layout_heightPercent="25%">
    </Button>
</androidx.percentlayout.widget.PercentRelativeLayout>

效果图：