Android百分比布局支持库（android-percent-support）

2023-08-27 17:06:46

Android中提供了五种布局，其中用的最多的就是：LinearLayout, RelativeLayout 和 FrameLayout这三种布局，在对某一界面进行布局时最先想到也是通过这三种来布局的，不过当某一界面过于复杂时，往往会有多层嵌套，可能嵌套层数过深超过5层，比如，当我们有一个需求是这样的：界面中的一个按钮的长度需要是屏幕宽度的一半，而且需要在任何屏幕下都是屏幕宽度的一半，这个需求我们往往想到的就是用LinearLayout的weightSum属性和child的layout_weight属性结合来用来达到效果，你可能这样实现：

单独给这个Button包一层LinearLayout来设置weightSum和layout_weight：

<RelativeLayout   xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:weightSum="1">
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:text="Button"/>
    </LinearLayout>
</RelativeLayout>

最后也达到了效果：

不过这样未免太浪费了吧，如果我的视图更复杂一些，比如要实现下面这样的布局，都是需要按照屏幕的宽高来给控件设置宽高比例，那么如果真要实现那么你的layout文件一定非常大。

竖屏：

横屏：

可以看到，这的确是适配屏幕的，是按照屏幕的宽高来对控件进行不同比例的设置。

要完成上面这样的布局，如果采用通常方法来布局那么将非常复杂，庆幸的是Google推出了一种新的布局库，叫百分比布局库，可以在sdk目录下就可以找到对应的jar包，然后把它添加到项目中即可使用，即：

所以，我们采用百分比布局来实现上面这种布局。

百分比布局库android-percent-support

百分比布局库中提供了两种布局可以设置百分比：PercentRelativeLayout、PercentFrameLayout，为什么没有LinearLayout呢？因为LinearLayout可以根据weightSum和layout_weight这两个属性来对child进行很方便的布局适配。

这两个百分比布局都有以下九个布局属性，值都是用百分比来表示宽度、高度、margin值，使用时候需要父布局为百分比布局，child控件才可以使用这九个布局属性：

app:layout_heightPercent
app:layout_widthPercent
app:layout_marginPercent
app:layout_marginTopPercent
app:layout_marginBottomPercent
app:layout_marginLeftPercent
app:layout_marginRightPercent
app:layout_marginStartPercent
app:layout_marginEndPercent

使用如下：

<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">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="width=50%"
        app:layout_widthPercent="50%" />
</android.support.percent.PercentRelativeLayout>

上面这样就设置了Button的宽度是父布局宽度的一半，所以在不同屏幕下也永远是父布局宽度的一般，这样很方便的实现了而不需要用LinearLayout设置weightSum和layout_weight来控制。

用百分比布局实现上图布局

其实PercentRelativeLayout 和PercentFrameLayout就是多了九个布局属性的RelativeLayout 和FrameLayout，用法完全和这两个布局一样，不过只有父布局是百分比布局（PercentRelativeLayout和PercentFrameLayout ）的时候，child才能使用百分比布局属性进行布局，否则无效，如：

<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">
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="width=50%"
        app:layout_widthPercent="50%" />
    </LinearLayout>
</android.support.percent.PercentRelativeLayout>

这样设置Button的宽度并不会是父布局宽度的一半，因为child用百分比只对父布局是百分比布局才有效。

好了，现在就直接贴下上面这幅图的布局xml：

<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">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="width=50%"
        app:layout_widthPercent="50%" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@id/button"
        android:background="#E91E63"
        android:text="height=20%,width=50%"
        app:layout_heightPercent="20%"
        app:layout_marginLeftPercent="50%"
        app:layout_widthPercent="50%" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@id/button"
        android:background="#9C27B0"
        android:text="height=20%,width=50%"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%" />

    <android.support.percent.PercentRelativeLayout
        android:id="@+id/percent1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView2">

        <TextView
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#03A9F4"
            android:text="height=20%,width=25%"
            app:layout_heightPercent="20%"
            app:layout_widthPercent="25%" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_toRightOf="@id/textView3"
            android:background="#CDDC39"
            android:text="height=20%,width=50%"
            app:layout_heightPercent="20%"
            app:layout_widthPercent="50%" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_toRightOf="@id/textView4"
            android:background="#FF5722"
            android:text="height=20%,width=25%"
            app:layout_heightPercent="20%"
            app:layout_widthPercent="25%" />
    </android.support.percent.PercentRelativeLayout>

    <android.support.percent.PercentRelativeLayout
        android:id="@+id/percent2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_below="@id/percent1"
        android:background="#FFCCBC"
        android:gravity="center_horizontal"
        app:layout_widthPercent="50%">

        <TextView
            android:id="@+id/textView6"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#03A9F4"
            android:text="height=20%,width=25%"
            app:layout_heightPercent="20%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%" />

        <TextView
            android:id="@+id/textView7"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_below="@id/textView6"
            android:background="#CDDC39"
            android:text="height=20%,width=50%"
            app:layout_heightPercent="20%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%" />
    </android.support.percent.PercentRelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/percent1"
        android:layout_toRightOf="@id/percent2"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="10">

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2.5"
                android:text="B" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2.5"
                android:text="B" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="5"
                android:text="Button" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:weightSum="1">

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                android:text="Button" />
        </LinearLayout>
    </LinearLayout>

</android.support.percent.PercentRelativeLayout>

码农公寓

百分比布局库android-percent-support

用百分比布局实现上图布局

相关文章