Android百分比布局方案
百分比布局让其中的控件在指定高度，宽度，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百分比布局方案的更多相关文章
- Android 百分比布局库(percent-support-lib) 解析与扩展
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46695347: 本文出自:[张鸿洋的博客] 一.概述 周末游戏打得过猛,于是周 ...
- Android百分比布局支持库介绍——com.android.support:percent（转）
转载自http://www.apkbus.com/forum.php?mod=viewthread&tid=244752&extra=&_dsign=0b699c42 在此之前 ...
- Android百分比布局成功导入及简单使用
最近学习第一行代码第二版这本书,里面有介绍百分比布局的使用,经过一番摸索,终于是成功导入了百分比布局 就是这样,appcompat是25.3.1,那么百分比布局percent也是25.3.1 这样便是 ...
- Android百分比布局支持库（android-percent-support）
Android中提供了五种布局,其中用的最多的就是:LinearLayout, RelativeLayout 和 FrameLayout这三种布局,在对某一界面进行布局时最先想到也是通过这三种来布局的 ...
- Android 屏幕适配（二）增强版百分比布局库(percent-support-lib)
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...
- Android 增强版百分比布局库 为了适配而扩展
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...
- Android 屏幕适配方案(转载)
3.百分比的引入 1.引入 其实我们的解决方案,就是在项目中针对你所需要适配的手机屏幕的分辨率各自简历一个文件夹. 如下图: 然后我们根据一个基准,为基准的意思就是: 比如480*320的分辨率为基准 ...
- Android 屏幕适配（一）百分比布局库(percent-support-lib) 解析与扩展
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46695347: 本文出自:[张鸿洋的博客] 一.概述 周末游戏打得过猛,于是周 ...
- （转）Android Support Percent百分比布局
一.概述 周末游戏打得过猛,于是周天熬夜码代码,周一早上浑浑噩噩的发现 android-percent-support-lib-sample(https://github.com/JulienGeno ...
随机推荐
- 编写高质量代码改善C#程序的157个建议——建议8： 避免给枚举类型的元素提供显式的值
建议8: 避免给枚举类型的元素提供显式的值 一般情况下,没有必要给枚举类型的元素提供显式的值.创建枚举的理由之一,就是为了代替使用实际的数值.不正确地为枚举类型的元素设定显式的值,会带来意想不到的错误 ...
- 理解java中的值传递与“引用传递”
额....java中其实没有引用传递 对于引用类型 ,在调用方法后,直接拷贝了引用的副本,但是它们指向了相同的堆地址,所以看起来像引用传递,但其实是值传递,只不过传递的引用的副本. 说一说为什么Str ...
- Job-Show Liang，你来掌管诺基亚王国，可好？
保留我一向高大上风格,开头当然来一个段子 在即将到来MWC(Mobile World Congress缩写,世界移动通信大会),很高兴能听到小诺来参展,我不得不给它32个赞,因为小诺已经好几届没有浮头 ...
- web3部署智能合约碰到的一个奇怪问题
都是gasLimit惹的祸 解决一个奇怪问题Error: Number can only safely store up to 53 bits 原来好好的node endpointtest.js ,结 ...
- 树莓派_实现摄像头的拍照、监控与录像(Raspiberry PI Camera 5W)
学无止境 前言:大家好,欢迎来到誉雪飞舞的博客园,我的每篇文章都是自己用心编写, 算不上精心但是足够用心分享我的自学知识,希望大家能够指正我,互相学习成长. 转载请注明:https://www. ...
- Ubuntu 14.04.3 LTS如何安装谷歌输入法
谷歌输入法项目主页:https://code.google.com/p/scim-googlepinyin/ 一,打开Ubuntu 的“Ubunru的软件中心”,在搜索里面输入“googlepinyi ...
- iOS 查看代码总行数
1.打开终端 2.cd 拖入工程 回车 3.输入命令 find . "(" -name "*.m" -or -name "*.mm" -or ...
- List_insert
List_insert /* Sorting from little to large use List */ #include <stdio.h> /* printf, scanf, N ...
- shell-脚本-作用是发现前10个最占用磁盘空间的文件
#!/bin/bash## 这个脚本的作用是发现前10个最占用磁盘空间的文件################定义这个脚本的全区变量##################################C ...
- go语言排序
冒泡: package main import ( "fmt" ) func BubbleSort(arr []int) []int { // 改进的冒泡排序 num := len ...