百分比布局让其中的控件在指定高度，宽度，margin时使用屏幕宽高的百分比，不使用dp,px。这样一套布局可以适应多个屏幕，方便适配。如：

　　app:layout_heightPercent="30%"

1.效果

　　

   

  • 它们分别为  图1. 2.7''_240*320:ldpi　图2. 4.0''_480*800:hdpi　图3. 5.5''_1440*2560:560dpi　图4. 8.86''_2048*1536:xhdpi
  • 点击可看原图
  • 根百分比布局背景色    ：#c2c2c2  
  • 其它百分比布局背景色：#8b0a50  

2. Guideline实现百分比布局

　　PercentRelativeLayout等百分比布局与 ConstraintLayout 等不兼容, ConstraintLayout 支持的百分比类是 Guideline .

　　简单实用.

     <android.support.constraint.Guideline
         android:id="@+id/guideline"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         app:layout_constraintGuide_percent="0.3046875" />

     <TextView
         android:id="@+id/txt_args_minimumLatency"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginEnd="8dp"
         android:layout_marginLeft="8dp"
         android:layout_marginRight="8dp"
         android:layout_marginStart="8dp"
         android:layout_marginTop="16dp"
         android:gravity="end|center_vertical"
         android:text="最小反应时间 : "
         app:layout_constraintEnd_toStartOf="@+id/guideline"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/txt_arg_connectivity" />

　　下面是原百分比布局示例,可以不用往下看了

3.引入库

　　在module的build.gradle的加入 compile 'com.android.support:percent:26.+'

 dependencies {
     //...
     compile 'com.android.support:percent:26.+'
 }

　　上方红底白字是percent支援包版本号，在sdk/extras/android/m2repository/com/android/support/percent/ 目录下有详细的版本。

　　可以使用 26.+ 也可以使用具体版本号如：26.0.0-alpha1 .

　　

4.常用百分比布局

PercentRelativeLayout 相对百分比布局
PercentFrameLayout 相对层百分比布局
PercentLinearLayout 相对线性百分比布局，这个在com.android.support:percent中没有，本文提供代码。把它加到项目中就可以。

5.百分比布局属性

5.1 属性表

属性 作用

示例
app:layout_widthPercent 控件宽度百分比（相对屏幕宽度） 

app:layout_widthPercent="100%"
app:layout_heightPercent 控件高度百分比（相对屏幕高度）

app:layout_heightPercent="50%"

app:layout_marginLeftPercent

控件的左边距百分比（相对于屏幕宽度）

app:layout_marginLeftPercent="1%"
app:layout_marginRightPercent

控件的右边距百分比（相对于屏幕宽度）

app:layout_marginRightPercent="1%"

app:layout_marginStartPercent

控件开始距离百分比（相对于屏幕宽度或高度）

app:layout_marginStartPercent="1%"

app:layout_marginEndPercent

控件结尾距离百分比（相对于屏幕宽度或高度）

app:layout_marginEndPercent="1%"

app:layout_marginTopPercent

上边距百分比（相对于屏幕高度）

app:layout_marginTopPercent="1%"

app:layout_marginBottomPercent

下边距百分比（相对于屏幕高度）

app:layout_marginBottomPercent="1%"

app:marginPercent

所有边距百分比（相对于屏幕高度和高度）

app:marginPercent="1%"

5.2 注意事项

  • app:layout_marginStartPercent="10%"与 app:layout_marginEndPercent="10%" 成对出现指定最大宽度
  • app:layout_marginLeftPercent="30%" 与 app:layout_marginRightPercent="30%"成对出现指定最大宽度
  • 只要layout_marginStartPercent 这对中出现一个，则layout_marginLeftPercent 这对无效。
  • app:layout_xxx与android:layout_xxx 在指定相同含义（如都指定左边距）时，取app:layout_xxx的值。
  • 最好只使用百分比系列的属性，也可混合使用。 
     app:layout_marginRightPercent="30%"
 android:layout_marginLeft="5dp"

6.相对百分比布局

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

     <ImageButton
         android:id="@+id/imageButton"

         app:layout_widthPercent="30%"
         app:layout_heightPercent="30%"

         app:layout_marginLeftPercent="20%"
         app:layout_marginRightPercent="20%"

         app:layout_marginStartPercent="10%"
         app:layout_marginEndPercent="10%"

         app:layout_marginTopPercent="10%"
         app:layout_marginBottomPercent="10%"

         app:srcCompat="@android:drawable/ic_notification_overlay" />

     <ImageView
         android:id="@+id/imageView"

         app:layout_widthPercent="30%"
         app:layout_heightPercent="30%"

         app:layout_marginLeftPercent="50%"
         app:layout_marginRightPercent="10%"

         app:layout_marginTopPercent="10%"
         app:layout_marginBottomPercent="10%"

         app:srcCompat="@drawable/qq" />

     <com.google.android.gms.maps.MapView
         android:id="@+id/mapView"
         android:background="#d3a16c"

         app:layout_widthPercent="100%"
         app:layout_heightPercent="50%"

         app:layout_marginLeftPercent="10%"
         app:layout_marginRightPercent="10%"

         app:layout_marginStartPercent="3%"
         app:layout_marginEndPercent="3%"

         app:layout_marginTopPercent="5%"
         app:layout_marginBottomPercent="5%"

         android:layout_alignParentBottom="true" />

 </android.support.percent.PercentRelativeLayout>

7.层百分比布局

 <?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">
     <!-- ... XML CODE -->

     <TextView
         android:id="@+id/textView"

         android:text="hello"
         android:textAlignment="center"

         app:layout_widthPercent="60%"
         app:layout_heightPercent="60%"

         app:layout_marginStartPercent="20%"
         app:layout_marginEndPercent="20%"

         app:layout_marginTopPercent="10%"
         app:layout_marginBottomPercent="10%"

         android:background="#f5a61e"/>

 </android.support.percent.PercentFrameLayout>

8.线性百分比布局

　　把PercentLinearLayout.java加入到源码中：

 package com.example.tt.percent;

 import android.content.Context;
 import android.content.res.TypedArray;
 import android.support.percent.PercentLayoutHelper;
 import android.util.AttributeSet;
 import android.view.ViewGroup;
 import android.widget.LinearLayout;

 public class PercentLinearLayout extends LinearLayout
 {

     private PercentLayoutHelper mPercentLayoutHelper;

     public PercentLinearLayout(Context context, AttributeSet attrs)
     {
         super(context, attrs);

         mPercentLayoutHelper = new PercentLayoutHelper(this);
     }

     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
     {
         mPercentLayoutHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
         if (mPercentLayoutHelper.handleMeasuredStateTooSmall())
         {
             super.onMeasure(widthMeasureSpec, heightMeasureSpec);
         }
     }

     @Override
     protected void onLayout(boolean changed, int l, int t, int r, int b)
     {
         super.onLayout(changed, l, t, r, b);
         mPercentLayoutHelper.restoreOriginalParams();
     }

     @Override
     public LayoutParams generateLayoutParams(AttributeSet attrs)
     {
         return new LayoutParams(getContext(), attrs);
     }

     public static class LayoutParams extends LinearLayout.LayoutParams
             implements PercentLayoutHelper.PercentLayoutParams
     {
         private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;

         public LayoutParams(Context c, AttributeSet attrs)
         {
             super(c, attrs);
             mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);
         }

         @Override
         public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo()
         {
             return mPercentLayoutInfo;
         }

         @Override
         protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr)
         {
             PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);
         }

         public LayoutParams(int width, int height) {
             super(width, height);
         }

         public LayoutParams(ViewGroup.LayoutParams source) {
             super(source);
         }

         public LayoutParams(MarginLayoutParams source) {
             super(source);
         }

     }

 }

　　使用相对布局时注意：android:layout_width和height要为0dp。光指定 app:layout_heightPercent 不行。

 <?xml version="1.0" encoding="utf-8"?>
 <com.example.tt.percent.PercentLinearLayout
     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:orientation="vertical">
     <View
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:background="#ff44aacc"
         app:layout_heightPercent="10%"
         app:layout_widthPercent="60%"/>

     <View
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:background="#ff4400cc"
         app:layout_heightPercent="10%"
         app:layout_widthPercent="70%"/>

 </com.example.tt.percent.PercentLinearLayout>

9.复合使用百分比布局

 <?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:background="@color/colorParentLayout">

     <com.example.tt.percent.PercentLinearLayout
         android:orientation="horizontal"
         android:id="@+id/percentLinearLayout"
         app:layout_widthPercent="98%"
         app:layout_heightPercent="30%"
         app:layout_marginStartPercent="1%"
         app:layout_marginEndPercent="1%"
         app:layout_marginTopPercent="1%"
         app:layout_marginBottomPercent="1%"
         android:background="@color/colorChildLayout"
         >

         <ImageButton
             android:id="@+id/imageButton"
             android:layout_width="0dp"
             android:layout_height="0dp"
             android:contentDescription="w=45%,h=94%"
             app:layout_widthPercent="45%"
             app:layout_heightPercent="94%"
             app:layout_marginStartPercent="2%"
             app:layout_marginEndPercent="2%"
             app:layout_marginTopPercent="3%"
             app:layout_marginBottomPercent="3%"
             android:background="#efdd82"
             app:srcCompat="@android:drawable/ic_notification_overlay" />

         <ImageView
             android:id="@+id/imageView"
             android:layout_width="0dp"
             android:layout_height="0dp"
             android:background="#7819d2"
             app:layout_widthPercent="45%"
             app:layout_heightPercent="94%"
             app:layout_marginStartPercent="2%"
             app:layout_marginEndPercent="2%"
             app:layout_marginTopPercent="3%"
             app:layout_marginBottomPercent="3%"
             android:contentDescription="w=45%,h=94%"

             app:srcCompat="@drawable/qq" />

     </com.example.tt.percent.PercentLinearLayout>

     <android.support.percent.PercentRelativeLayout
         android:layout_below="@+id/percentLinearLayout"
         app:layout_widthPercent="98%"
         app:layout_heightPercent="25%"
         android:background="@color/colorChildLayout"
         app:layout_marginStartPercent="1%"
         app:layout_marginEndPercent="1%"
         app:layout_marginTopPercent="1%"
         app:layout_marginBottomPercent="1%"
         >

         <com.example.tt.percent.PercentLinearLayout
             android:id="@+id/lineLayout"
             app:layout_widthPercent="46%"
             app:layout_heightPercent="100%"
             app:layout_marginStartPercent="2%"
             app:layout_marginTopPercent="3%"
             app:layout_marginBottomPercent="3%"
             android:background="#7d6a5e"
             android:orientation="vertical">

             <TextView
                 android:layout_width="0dp"
                 android:layout_height="0dp"
                 android:background="#ff44aacc"
                 android:text="w=78.923%,h=43%"
                 app:layout_heightPercent="43%"
                 app:layout_widthPercent="78.923%"
                 app:layout_marginStartPercent="3%"
                 app:layout_marginTopPercent="3%"
                 app:layout_marginBottomPercent="3%"/>

             <TextView
                 android:layout_width="0dp"
                 android:layout_height="0dp"
                 android:background="#ff4400cc"
                 android:text="w=89.99%,h=43%"
                 app:layout_heightPercent="43%"
                 app:layout_widthPercent="89.99%"
                 app:layout_marginStartPercent="3%"
                 app:layout_marginTopPercent="3%"
                 app:layout_marginBottomPercent="3%"/>

         </com.example.tt.percent.PercentLinearLayout>

         <android.support.percent.PercentFrameLayout
             android:layout_toRightOf="@+id/lineLayout"
             app:layout_widthPercent="46%"
             app:layout_heightPercent="100%"
             android:background="#9f8ea7"
             app:layout_marginStartPercent="2%"
             app:layout_marginTopPercent="3%"
             app:layout_marginBottomPercent="3%"

             android:id="@+id/percentFrameLayout">

             <TextView
                 android:id="@+id/textView"
                 android:background="#f5a61e"
                 android:text="w=90%,h=60%\nbottom=3%,top=3%\nstart=3%,end=3%"
                 app:layout_heightPercent="60%"
                 app:layout_widthPercent="90%"
                 app:layout_marginStartPercent="3%"
                 app:layout_marginEndPercent="3%"
                 app:layout_marginTopPercent="3%"
                 app:layout_marginBottomPercent="3%"
                 />

         </android.support.percent.PercentFrameLayout>
     </android.support.percent.PercentRelativeLayout>

     <android.support.percent.PercentFrameLayout
         app:layout_widthPercent="100%"
         app:layout_heightPercent="40%"
         app:layout_marginStartPercent="1%"
         app:layout_marginEndPercent="1%"

         app:layout_marginTopPercent="60%"
         app:layout_marginBottomPercent="1%"
         android:background="@color/colorChildLayout"
         >

         <ImageView
             android:id="@+id/mapView"

             android:contentDescription="w=48%,h=98%"
             android:background="#555555"
             android:layout_alignParentBottom="true"

             app:layout_widthPercent="98%"
             app:layout_heightPercent="48%"

             app:layout_marginStartPercent="1%"
             app:layout_marginEndPercent="1%"

             app:layout_marginTopPercent="5%"
             app:layout_marginBottomPercent="1%"

             app:srcCompat="@drawable/google" />

         <Button
             android:id="@+id/btn_bottom"
             app:layout_widthPercent="98%"
             app:layout_heightPercent="40%"

             app:layout_marginStartPercent="1%"
             app:layout_marginEndPercent="1%"

             app:layout_marginTopPercent="55%"
             app:layout_marginBottomPercent="1%"
             android:textAlignment="center"
             android:textAllCaps="false"
             android:text="Button:w=98%,h=40%" />

     </android.support.percent.PercentFrameLayout>

 </android.support.percent.PercentRelativeLayout>

10.下载示例

　　https://git.oschina.net/xi/PercentLayout.git

Android百分比布局方案的更多相关文章

  1. Android 百分比布局库(percent-support-lib) 解析与扩展

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46695347: 本文出自:[张鸿洋的博客] 一.概述 周末游戏打得过猛,于是周 ...

  2. Android百分比布局支持库介绍——com.android.support:percent（转）

    转载自http://www.apkbus.com/forum.php?mod=viewthread&tid=244752&extra=&_dsign=0b699c42 在此之前 ...

  3. Android百分比布局成功导入及简单使用

    最近学习第一行代码第二版这本书,里面有介绍百分比布局的使用,经过一番摸索,终于是成功导入了百分比布局 就是这样,appcompat是25.3.1,那么百分比布局percent也是25.3.1 这样便是 ...

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

    Android中提供了五种布局,其中用的最多的就是:LinearLayout, RelativeLayout 和 FrameLayout这三种布局,在对某一界面进行布局时最先想到也是通过这三种来布局的 ...

  5. Android 屏幕适配（二）增强版百分比布局库(percent-support-lib)

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...

  6. Android 增强版百分比布局库 为了适配而扩展

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...

  7. Android 屏幕适配方案(转载)

    3.百分比的引入 1.引入 其实我们的解决方案,就是在项目中针对你所需要适配的手机屏幕的分辨率各自简历一个文件夹. 如下图: 然后我们根据一个基准,为基准的意思就是: 比如480*320的分辨率为基准 ...

  8. Android 屏幕适配（一）百分比布局库(percent-support-lib) 解析与扩展

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46695347: 本文出自:[张鸿洋的博客] 一.概述 周末游戏打得过猛,于是周 ...

  9. （转）Android Support Percent百分比布局

    一.概述 周末游戏打得过猛,于是周天熬夜码代码,周一早上浑浑噩噩的发现 android-percent-support-lib-sample(https://github.com/JulienGeno ...

随机推荐

  1. 验证码测试-demo

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Inse ...

  2. 如何快速搭建基于python+appium的自动化测试环境

    首先申明本文是基本于Python与Android来快速搭建Appium自动化测试环境: 主要分为以下几个步骤: 前提条件: 1)安装与配置python环境,打开 Python官网,找到“Downloa ...

  3. Tomcat调优总结

    Tomcat 优化分为系统优化,Java虚拟机调优,Tomcat本身的优化. Tomcat 如何起停 ./catalina.sh stop ./catalina.sh start/sbin/servi ...

  4. orleans 2.0 教程之-----官方文档翻译,给大家学习ol一个参考

    本人也是英文盲,翻译不对的地方请谅解.由于翻译内容较多,会慢慢更新 orleans简称ol,一些专用词不做翻译.先决条件,读这表文章之前需要了解:actor,es,cqrs 参考链接: https:/ ...

  5. SQL Server乱码处理(ASCII)

    CREATE FUNCTION [dbo].[RegexReplace] ( @string VARCHAR(MAX), --被替换的字符串 @pattern VARCHAR(255), --替换模板 ...

  6. [译] 关于 SPA，你需要掌握的 4 层 （2）

    此文已由作者张威授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 视图层 现在我们有了一个可执行且不依赖于框架的应用程序,React 已经准备投入使用. 视图层由 presen ...

  7. day08.1-Linux软件包管理

    Linux系统中的两种软件包:tar,保存内容为源码,编译后再安装:rpm,保存内容为编译后的机器码,直接安装.其中,rpm软件包由5部分构成,分别为: 第1部分是name,表示这个rpm软件包的名称 ...

  8. Educational Codeforces Round 61 (Rated for Div. 2) G(线段树，单调栈)

    #include<bits/stdc++.h>using namespace std;int st[1000007];int top;int s[1000007],t[1000007];i ...

  9. mac下对NTFS格式的磁盘进行读写操作

    mac对NTFS格式的分区读写有很大的限制,网上看到很多相关的文章,都表明了一个信息:需要购买类似NTFS for mac这样的软件才能实现对NTFS格式的分区读写的权限,其实不然,mac自带的hdi ...

  10. linux的发行版

    Linux的不同版本以及应用领域 1.Linux内核及发行版介绍 <1>Linux内核版本 内核(kernel)是系统的心脏,是运行程序和管理像磁盘和打印机等硬件设备的核心程序,它提供了一 ...