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

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

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

更多相关文章

随机推荐