android有个百分比布局,于是研究了下。
用途
官方针对屏幕适配的问题提出的一种优化手段,主要用来解决屏幕适配。屏幕适配主要以屏幕宽度为依据。
使用
1.添加依赖
在Module级别的build.gradle中加入如下代码:
compile 'com.android.support:percent:26.+'
2.关联命名空间
在需要使用百分比布局的布局文件中,加入如下代码来关联百分比布局属性的命名空间,然后才能使用百分比布局的属性。
xmlns:app="http://schemas.android.com/apk/res-auto"
3.使用百分比属性
使用以”app:”开头的属性,属性值以”%”为单位,表示占对应父布局宽高的百分比。支持以下属性:
layout_widthPercent、layout_heightPercent、
layout_marginPercent、 layout_aspectRatio、
layout_marginTopPercent、 layout_marginBottomPercent、
layout_marginStartPercent(相当于marginLeft)、
layout_marginEndPercent(相当于marginRight)。
其中, layout_aspectRatio为宽高比,宽度除以高度(可以将%当做单位来运算),可以在布局文件里,只设置宽高中的一个值,系统会自动算出另一个值,当app: layout_aspectRatio=”100%”,控件为正方形。
使用示例
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.zsk.myapplication.PercentLayoutActivity">
<View
android:id="@+id/view1"
android:background="#336"
app:layout_heightPercent="10%"
app:layout_widthPercent="25%" />
<View
android:id="@+id/view2"
android:layout_toRightOf="@id/view1"
android:background="#933"
app:layout_heightPercent="10%"
app:layout_widthPercent="25%" />
<View
android:id="@+id/view3"
android:layout_toRightOf="@id/view2"
android:background="#976"
app:layout_heightPercent="10%"
app:layout_widthPercent="25%" />
<View
android:layout_toRightOf="@id/view3"
android:background="#333333"
app:layout_heightPercent="10%"
app:layout_widthPercent="25%" />
<View
android:id="@+id/view4"
android:background="#669999"
app:layout_aspectRatio="600%"
app:layout_marginBottomPercent="10%"
app:layout_marginEndPercent="10%"
app:layout_marginStartPercent="10%"
app:layout_marginTopPercent="10%"
app:layout_widthPercent="100%" />
<TextView
android:layout_below="@id/view4"
android:background="#f00"
app:layout_heightPercent="20%"
app:layout_widthPercent="50%" />
<View
android:id="@+id/view5"
android:layout_below="@+id/view4"
android:background="#0f0"
app:layout_aspectRatio="200%"
app:layout_marginTopPercent="30%"
app:layout_widthPercent="30%" />
<View
android:layout_below="@+id/view4"
android:layout_toRightOf="@+id/view5"
android:background="#0f0"
app:layout_aspectRatio="200%"
app:layout_heightPercent="30%"
app:layout_marginTopPercent="30%" />
<android.support.percent.PercentFrameLayout
android:layout_below="@+id/view4"
android:background="#333"
app:layout_heightPercent="30%"
app:layout_widthPercent="50%">
<View
android:layout_gravity="center"
android:background="#0f0"
app:layout_aspectRatio="200%"
app:layout_widthPercent="80%" />
<View
android:layout_gravity="center"
android:background="#00f"
app:layout_aspectRatio="100%"
app:layout_heightPercent="50%" />
</android.support.percent.PercentFrameLayout>
</android.support.percent.PercentRelativeLayout>
自定义LinearPercentLayout
先上代码(其实就是将PercentFrameLayout源码中的FrameLayout全部替换为LinearLayout就可以了):
package com.zsk.myapplication.ui.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.support.annotation.RequiresApi;
import android.support.percent.PercentLayoutHelper;
import android.util.AttributeSet;
import android.view.ViewGroup;
import android.widget.LinearLayout;
public class PercentLinearLayout extends LinearLayout {
private final PercentLayoutHelper mHelper = new PercentLayoutHelper(this);
public PercentLinearLayout(Context context) {
super(context);
}
public PercentLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public PercentLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected LayoutParams generateDefaultLayoutParams() {
return new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
}
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new LayoutParams(getContext(), attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (mHelper.handleMeasuredStateTooSmall()) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
mHelper.restoreOriginalParams();
}
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);
}
public LayoutParams(int width, int height) {
super(width, height);
}
public LayoutParams(int width, int height, float weight) {
super(width, height, weight);
}
public LayoutParams(ViewGroup.LayoutParams p) {
super(p);
}
public LayoutParams(MarginLayoutParams source) {
super(source);
}
@RequiresApi(19)
public LayoutParams(LinearLayout.LayoutParams source) {
super(source);
gravity = source.gravity;
}
@RequiresApi(19)
public LayoutParams(LayoutParams source) {
// The copy constructor used here is only supported on API 19+.
this((LinearLayout.LayoutParams) source);
mPercentLayoutInfo = source.mPercentLayoutInfo;
}
@Override
public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo() {
if (mPercentLayoutInfo == null) {
mPercentLayoutInfo = new PercentLayoutHelper.PercentLayoutInfo();
}
return mPercentLayoutInfo;
}
@Override
protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {
PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);
}
}
}
使用:
<?xml version="1.0" encoding="utf-8"?>
<com.zsk.myapplication.ui.view.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:gravity="center">
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:background="#000"
app:layout_aspectRatio="100%"
app:layout_widthPercent="20%" />
</com.zsk.myapplication.ui.view.PercentLinearLayout>
源码分析
在开发工具中,点开PercentFrameLayout的源码,可以发现,百分比布局的效果主要是在FrameLayout的基础上、借助PercentLayoutHelper来实现的,onMeasure中控件的测量、onLayout中子view的位置、以及百分比数值的解析,都在PercentLayoutHelper中,代码大意很好理解,不理解的可以参考:Android 百分比布局库(percent-support-lib) 解析与扩展里面的源码解析。
最后整个项目代码地址:
https://download.csdn.net/download/questions000/10302835