上午看了篇UI优化技巧的文章,《Android Layout Tricks #3: Optimize by merging》是关于标签的使用,经常看到别人源码的布局文件使用到这个标签,感觉很好奇,今天看了下android文档的表述以及示例有所了解。
的出现是为了优化android布局,减少视图树的层级。当LayoutInflater遇到这个标签时,它会跳过它,并将内的元素添加到的父元素里,从而达到减少层级。这里先看一个简单的布局文件。
android:layout_width="fill_parent"
android:layout_height="fill_parent">
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="@drawable/golden_gate"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:layout_marginBottom="20dip"
android:background="#AA000000"
android:padding="12dip"
android:text="Golden Gate"
android:textColor="#ffffffff"/>
上面的根目录是FrameLayout,里面包裹着ImageView以及TextView两个标签。
效果如下图:
使用HierarchyViewer 工具来查看该视图的层级效果,我们可以看到蓝色的矩形的就是我们刚刚的FrameLayout
的层数。
将FrameLayout改成merge,代码如下:
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
android:id="@+id/goldenIv"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="@drawable/golden_gate" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:layout_marginBottom="20dip"
android:background="#AA000000"
android:padding="12dip"
android:text="Golden Gate"
android:textColor="#ffffffff" />
我们看到的效果是这样的,蓝色的是用来包含之前FrameLayout的父标签,
现在直接包裹着ImageView和TextView两个子标签
这个就是merge的简单使用了。
下面再来一个实例,是自定义控件以及自定义属性的使用。
首先我们创建一个布局文件okcalcelbar_button.xml:
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
再创建一个okcancelbar.xml的文件:
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
layout="@layout/okcalcelbar_button"
android:id="@+id/okcancelbar_ok"
/>
layout="@layout/okcalcelbar_button"
android:id="@+id/okcancelbar_cancel"
/>
创建values下面创建自定义属性的文件attrs.xml
说明:上面自定义属性文件中
OkCancelBar就是定义在里的 名字,获取里面属性用名字_ 属性连接起来就可以.TypedArray通常最后调用.recycle()方法,为了保持以后使用该属性一致性!
接下来创建OkCancelBar类继承LinearLayout
package com.xzw.merge;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.widget.Button;
import android.widget.LinearLayout;
public class OkCancelBar extends LinearLayout{
public OkCancelBar(Context context,AttributeSet attrs) {
super(context,attrs);
setOrientation(HORIZONTAL); //横排
setGravity(Gravity.CENTER); //居中显示
setWeightSum(1.0f);
LayoutInflater.from(context).inflate(R.layout.okcancelbar, this,true);
//TypedArray是一个数组容器
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.OkCancelBar, 0, 0);
String text = array.getString(R.styleable.OkCancelBar_okLabel);//这里的属性是:名字_属性名
if (text == null) text = "Ok";
((Button) findViewById(R.id.okcancelbar_ok)).setText(text);
text = array.getString(R.styleable.OkCancelBar_cancelLabel);
if (text == null) text = "Cancel";
((Button) findViewById(R.id.okcancelbar_cancel)).setText(text);
array.recycle();
}
}
创建布局文件:
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:okCancelBar="http://schemas.android.com/apk/res/com.xzw.merge">
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="@drawable/golden_gate" />
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingTop="8dip"
android:gravity="center_horizontal"
android:background="#AA000000"
okCancelBar:okLabel="Save"
okCancelBar:cancelLabel="Don't save" />
说明:
xmlns:okCancelBar:是我们自定义属性的命名空间前缀。也就是下面
okCancelBar:okLabel="Save"
okCancelBar:cancelLabel="Don't save"
用到的。
”http://schemas.android.com/apk/res/com.xzw.merge" 其中com.xzw.merge 是类文件所在包名。
使用自定义属性必须加上该命名空间。
看下效果图:
上面就是完整的实例。下面附上代码。
能力有限请大家多多指教。