Android5.0+(Percent 百分比布局)

jopen 9年前

    相信大家都已经对Android API所提供的布局方式非常熟悉了。也许在接触Android的时候都有过这样的想法，如果可以按照百分比的方式进行界面布局，这样适配各种屏幕就简单多了吧！谷歌正式提供百分比布局支持库（android-support-percent-lib）。当然了android-percent-support这个库，基本可以解决上述问题，下面我们将对这个支持库进行介绍

这个库提供了：

  • 两种布局供大家使用： 
    PercentRelativeLayout、PercentFrameLayout，通过名字就可以看出，这是继承自FrameLayout和RelativeLayout两个容器类；

  • 支持的属性有：

        layout_widthPercent、layout_heightPercent、 

        layout_marginPercent、layout_marginLeftPercent、 

        layout_marginTopPercent、layout_marginRightPercent、 

        layout_marginBottomPercent、layout_marginStartPercent、layout_marginEndPercent。

        可以看到支持宽高，以及margin。

也就是说，大家只要在开发过程中使用PercentRelativeLayout、PercentFrameLayout替换FrameLayout、RelativeLayout即可。

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


使用：

关于使用，其实及其简单，并且github上也有例子，android-percent-support-lib-sample。

使用Android studio在build.gradle添加以下信息就可以获取支持库，当然了，如果你没有下载到该支持库会提示你下载。 

dependencies {         compile 'com.android.support:percent:22.2.0'     }

（一）PercentFrameLayout 

<?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:layout_width="match_parent"      android:layout_height="match_parent">        <TextView                  android:layout_width="0dp"          android:layout_height="0dp"          android:layout_gravity="left|top"          android:background="#44ff0000"          android:text="width:30%,height:20%"          app:layout_heightPercent="20%"          android:gravity="center"          app:layout_widthPercent="30%"/>        <TextView                  android:layout_width="0dp"          android:layout_height="0dp"          android:layout_gravity="right|top"          android:gravity="center"          android:background="#4400ff00"          android:text="width:70%,height:20%"          app:layout_heightPercent="20%"          app:layout_widthPercent="70%"/>          <TextView                  android:layout_width="0dp"          android:layout_height="0dp"          android:layout_gravity="bottom"          android:background="#770000ff"          android:text="width:100%,height:10%"          android:gravity="center"          app:layout_heightPercent="10%"          app:layout_widthPercent="100%"/>  </android.support.percent.PercentFrameLayout>

3个TextView，很简单，直接看效果图：

Android5.0+(Percent 百分比布局)

(二) PercentRelativeLayout

<?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:layout_width="match_parent"      android:layout_height="match_parent"      android:clickable="true">        <TextView                  android:id="@+id/row_one_item_one"          android:layout_width="0dp"          android:layout_height="0dp"          android:layout_alignParentTop="true"          android:background="#7700ff00"          android:text="w:70%,h:20%"          android:gravity="center"          app:layout_heightPercent="20%"          app:layout_widthPercent="70%"/>        <TextView                  android:id="@+id/row_one_item_two"          android:layout_width="0dp"          android:layout_height="0dp"          android:layout_toRightOf="@+id/row_one_item_one"          android:background="#396190"          android:text="w:30%,h:20%"          app:layout_heightPercent="20%"          android:gravity="center"          app:layout_widthPercent="30%"/>          <ImageView                  android:id="@+id/row_two_item_one"          android:layout_width="match_parent"          android:layout_height="0dp"          android:src="@drawable/tangyan"          android:scaleType="centerCrop"          android:layout_below="@+id/row_one_item_one"          android:background="#d89695"          app:layout_heightPercent="70%"/>        <TextView                  android:layout_width="0dp"          android:layout_height="0dp"          android:layout_below="@id/row_two_item_one"          android:background="#770000ff"          android:gravity="center"          android:text="width:100%,height:10%"          app:layout_heightPercent="10%"          app:layout_widthPercent="100%"/>  </android.support.percent.PercentRelativeLayout>

ok，依然是直接看效果图:

Android5.0+(Percent 百分比布局)

使用没什么好说的，就是直观的看一下。