今天有时间捣鼓了一下这个东西,和大家分享一下。
官方提供的包里,关于百分比布局有两个,如下:
就是PercentFrameLayout和PercentRelativeLayout,我们今天就来说说这两个百分比布局的使用吧。
1.添加依赖库
本文Demo使用Android Studio来完成,所以直接在Gradle文件中添加下面一行即可。
compile 'com.android.support:percent:23.1.0'
2.在布局文件中使用
<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="#ff44aacc" app:layout_heightPercent="20%" 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="#ffe40000" app:layout_heightPercent="20%" app:layout_widthPercent="30%" /> <View android:id="@+id/bottom" android:layout_width="match_parent" android:layout_height="0dp" android:layout_below="@+id/top_left" android:background="#ff00ff22" app:layout_heightPercent="80%" /> </android.support.percent.PercentRelativeLayout>首先,使用百分比布局我们的根布局就得是百分比布局android.support.percent.PercentRelativeLayout,我们在布局中添加了三个View,每个View显示不同的颜色。在使用百分比布局的时候,layout_width和layout_height属性的值不会起作用。我们通过使用app:layout_heightPercent="20%"和 app:layout_widthPercent="70%"两个属性来设置控件的大小。
上面的代码中一共有三个View,第一个View的宽为屏幕宽度的70%,高为屏幕高度的20%,第二个View位于第一个View的右边,它的宽度为屏幕宽度的30%,高为屏幕高度的20%,第三个View依次类推,那么它的效果图如下:
是不是很简单呢?在百分比布局中,除了宽高我们可以用百分数来表示之外,margin我们也可以用百分比来表示,比如下面几个属性:
app:layout_marginStartPercent app:layout_marginEndPercent app:layout_marginTopPercent app:layout_marginBottomPercent我们可以将View的margin属性设置为百分数。除了这几个属性可以设置为百分数之外,还有一个值得关注的属性,叫做layout_aspectRatio,这个叫做屏幕的宽高比,我们看下面一个布局文件:
<?xml version="1.0" encoding="utf-8"?> <android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:background="#ff00ff22" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- not using aspectRatio here --> <View android:id="@+id/view1" android:background="#ff44aacc" android:layout_width="100dp" android:layout_height="200dp"/> <!-- using aspectRatio here --> <View android:layout_below="@id/view1" android:background="#ffe40000" android:layout_width="100dp" android:layout_toRightOf="@id/view1" android:layout_alignParentTop="true" android:layout_height="0dp" app:layout_aspectRatio="100%"/> </android.support.percent.PercentRelativeLayout>再看看效果图:
第一个View我们将其宽设置为100dp,高设置为200dp,第二个View我们将其宽设置为100dp,但是高设置为0dp,同时给它设置了layout_aspectRatio属性,这个属性的值为100%,表示View的宽高比为1:1,所以就看到上面的效果,如果我们将之设置为50%,表示宽高比为0.5:1,那么我们看到的效果将是这样的:
好了,最后我们再来看一个PercentFrameLayout布局的Demo:
代码如下:
<?xml version="1.0" encoding="utf-8"?> <android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/frame_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/child1" android:layout_width="0dp" android:layout_height="0dp" app:layout_heightPercent="100%" app:layout_widthPercent="100%" android:contentDescription="Image" android:src="@drawable/Image052" /> <TextView android:id="@+id/child2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Child 2" android:textSize="24sp" android:layout_gravity="top|left" /> <TextView android:textSize="24sp" android:id="@+id/child3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Child 3" android:layout_gravity="top|right" /> </android.support.percent.PercentFrameLayout>
效果图如下: