今天第二篇搬到这里的笔记,之前尝试做过一个十分简单的百分比布局:
1、第 1 秒,在 attrs 中定义我们要的属性:
<resources>
<declare-styleable name="percentRelativeLayout">
<attr name="layout_widthPercent" format="float"></attr>
<attr name="layout_heightPercent" format="float"></attr>
</declare-styleable>
</resources>
2、第 2 秒,继承 Relativelayout
a、首先需要声明三个构造函数:
public PercentRelativeTest(Context context)
{
super(context);
}
public PercentRelativeTest(Context context, AttributeSet attrs)
{
super(context, attrs);
}
public PercentRelativeTest(Context context, AttributeSet attrs, int defStyleAttr)
{
super(context, attrs, defStyleAttr);
}
b、创建 LayoutParams 的子类,获取自定义属性,记得回收资源:
public static class LayoutParams extends RelativeLayout.LayoutParams
{
private float widthPercent;
private float heightPercent;
public LayoutParams(Context c, AttributeSet attrs)
{
super(c, attrs);
TypedArray a = c.obtainStyledAttributes(attrs,R.styleable.percentRelativeLayout);
widthPercent = a.getFloat(R.styleable.percentRelativeLayout_layout_heightPercent,widthPercent);
heightPercent = a.getFloat(R.styleable.percentRelativeLayout_layout_heightPercent,heightPercent);
a.recycle();
}
}
c、重写 generateLayoutParams,这个方法是将自定义属性转换到 LayoutParams 的,在 LayoutInflater 中被调用,这里返回的是 自定义的LayoutParams 类的实例,
@Override
public RelativeLayout.LayoutParams generateLayoutParams(AttributeSet attrs)
{
return new LayoutParams(getContext(),attrs);
}
d、重写 onMeasure,思路主要就是 有使用百分比布局的时候优先使用百分比布局,忽略自带的 wrap_content 等,然后通过计算传入的比率以及父控件的宽高来得出 子view的宽高,同时,继承 RelativeLayout 之后,并不需要对父控件的其他属性进行修改,所以,我们在 onMeasure 和 onLayout 中直接调用 super.onMeasure 和 super.onLayout 即可,onMeasure 代码如下:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
//获取父容器的宽和高
int width = View.MeasureSpec.getSize(widthMeasureSpec);
int height = View.MeasureSpec.getSize(heightMeasureSpec);
int count = this.getChildCount();
for(int i=0;i<count;i++)
{
View child = this.getChildAt(i);
//这里使用 ViewGroup.LayoutParams 是由于可能没使用百分比布局
ViewGroup.LayoutParams lp = child.getLayoutParams();
float widthPercent = 0;
float heightPercent = 0;
if(lp instanceof PercentRelativeTest.LayoutParams)
{
widthPercent = ((LayoutParams) lp).widthPercent;
heightPercent = ((LayoutParams) lp).heightPercent;
}
if(widthPercent !=0)
{
lp.width = (int)(width*widthPercent);
}
if(heightPercent !=0)
{
lp.height = (int)(height*heightPercent);
}
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);//无需重写容器的宽高
}
e、重写 onLayout
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b)
{
super.onLayout(changed, l, t, r, b);
}
3、第 3 秒,调试使用
<?xml version="1.0" encoding="utf-8"?>
<com.example.z.customizepercentviewtest.PercentRelativeTest
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/test1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="布局1"
android:gravity="center"
app:layout_widthPercent = "0.5"
app:layout_heightPercent = "0.5"
android:background="@android:color/darker_gray"/>
<TextView
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="布局2"
android:gravity="center"
app:layout_widthPercent = "0.2"
app:layout_heightPercent = "0.3"
android:background="@android:color/holo_blue_light"/>
</com.example.z.customizepercentviewtest.PercentRelativeTest>
第一次使用百分比布局,在 预览里面无法看到结果,跟使用百分比之前一样,编译一次之后即可看到使用百分比之后的效果,贴一张效果图:
完成,不对之处,欢迎吐槽
扫描二维码关注公众号,回复:
2330843 查看本文章