百分比布局:通过设定百分比参数,自动适应手机屏幕,有时候还是比较实用的!
思路:
1:Android 自定义xmlns,百分比布局有2个自定义参数 所有要自定义 ximls
2:自定义百分比布局 继承 相对布局,重写LayoutParams 内部类(这里增加 2个百分比参数)
3:重写 onMeasure( )方法,在onMeasure 里获取容器的宽高,然后获得所有子控件,判断子空间的 LayoutParams 是否为 百分比布局的 LayoutParams,相同则 读取子控件的 长宽百分比 参数,然后计算出实际的长宽参数!
实现:
1: 自定义xmlns,首先 在 res下创建 attr.xml文件 声明一个styleable
<resources>
<declare-styleable name="percentLayout">
<attr name="layout_widthPercent" format = "float"> </attr>
<attr name="layout_heightPercent" format = "float"> </attr>
</declare-styleable>
</resources>
在 布局文件中添加自定义属性:
eclipse 这样写
http://schemas.android.com/apk/res/你的自定义View所在的包路径.
stuido 使用统一默认的
xmlns:app="http://schemas.android.com/apk/res-auto"
然后 在需要使用的子控件添加 百分比属性
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="nice"
app:layout_widthPercent="0.6"
app:layout_heightPercent="0.8"
android:background="#00ff00"
/>
整个自定义 xmlns 就完成了,接下来实现自定义控件
public class PercentLayout extends RelativeLayout{
public PercentLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// TODO Auto-generated constructor stub
}
public PercentLayout(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
public PercentLayout(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
/***
* 测量容器的宽高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 获取容器的宽高
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
//测量子控件的宽高,然后进行改变
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
float widthPercent = 0;
float heightPercent = 0;
//获得子控件的布局参数
ViewGroup.LayoutParams params = child.getLayoutParams();
//判断是否为百分比布局
if(params instanceof LayoutParams){
widthPercent = ((LayoutParams) params).getWidthPercent();
heightPercent = ((LayoutParams) params).getHeightPerccent();
}
if(widthPercent!=0){
params.width = (int) (width*widthPercent);
params.height = (int) (height*heightPercent);
}
}
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);
}
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new LayoutParams(getContext(), attrs);
}
//布局参数内部类,xml解析会自动关联对应的布局参数
class LayoutParams extends RelativeLayout.LayoutParams{
private float widthPercent;
private float heightPerccent;
public float getWidthPercent() {
return widthPercent;
}
public void setWidthPercent(float widthPercent) {
this.widthPercent = widthPercent;
}
public float getHeightPerccent() {
return heightPerccent;
}
public void setHeightPerccent(float heightPerccent) {
this.heightPerccent = heightPerccent;
}
public LayoutParams(Context arg0, AttributeSet arg1) {
super(arg0, arg1);
TypedArray array = arg0.obtainStyledAttributes(arg1, R.styleable.percentLayout);
widthPercent = array.getFloat(R.styleable.percentLayout_layout_widthPercent, widthPercent);
heightPerccent = array.getFloat(R.styleable.percentLayout_layout_heightPercent, heightPerccent);
array.recycle();
}
public LayoutParams(int arg0, int arg1) {
super(arg0, arg1);
}
public LayoutParams(ViewGroup.LayoutParams arg0) {
super(arg0);
}
public LayoutParams(MarginLayoutParams arg0) {
super(arg0);
}
}
}
这个自定义控件代码,下面是 整个页面布局
<go.lqb.com.nettest.dn_sindy_layout.PercentLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="400dp"
android:layout_height="600dp"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="nice"
app:layout_widthPercent="0.6"
app:layout_heightPercent="0.8"
android:background="#00ff00"
/>
</go.lqb.com.nettest.dn_sindy_layout.PercentLayout>