今天有时间捣鼓了一下这个东西，和大家分享一下。

官方提供的包里，关于百分比布局有两个，如下：

就是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>
     
    
  
 

上面的代码中一共有三个View，第一个View的宽为屏幕宽度的70%，高为屏幕高度的20%，第二个View位于第一个View的右边，它的宽度为屏幕宽度的30%，高为屏幕高度的20%，第三个View依次类推，那么它的效果图如下：

是不是很简单呢？在百分比布局中，除了宽高我们可以用百分数来表示之外，margin我们也可以用百分比来表示，比如下面几个属性：

  

   

    

     

    
    

     

      app:layout_marginStartPercent
     
    
   

    

     

    
    

     

      app:layout_marginEndPercent
     
    
   

    

     

    
    

     

      app:layout_marginTopPercent
     
    
   

    

     

    
    

     

      app:layout_marginBottomPercent
     
    
  
 

  

   

    

     

    
    

     

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

效果图如下：

文章来源: wangsong.blog.csdn.net，作者：_江南一点雨，版权归原作者所有，如需转载，请联系作者。

原文链接：wangsong.blog.csdn.net/article/details/50282693