上午看了篇UI优化技巧的文章,《》是关于<merge/>标签的使用,经常看到别人源码的布局文件使用到<merge/>这个标签,感觉很好奇,今天看了下android文档的表述以及示例有所了解。
<merge/>的出现是为了优化android布局,减少视图树的层级。当LayoutInflater遇到这个标签时,它会跳过它,并将<merge />内的元素添加到<merge />的父元素里,从而达到减少层级。这里先看一个简单的布局文件。
- <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent" >
- <ImageView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:scaleType="center"
- android:src="@drawable/golden_gate" />
- <TextView
- 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>
上面的根目录是FrameLayout,里面包裹着ImageView以及TextView两个标签。
效果如下图:
使用 工具来查看该视图的层级效果,我们可以看到蓝色的矩形的就是我们刚刚的FrameLayout
的层数。
将FrameLayout改成merge,代码如下:
- <merge xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent" >
- <ImageView
- android:id="@+id/goldenIv"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:scaleType="center"
- android:src="@drawable/golden_gate" />
- <TextView
- 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" />
- </merge>
我们看到的效果是这样的,蓝色的是用来包含之前FrameLayout的父标签,
现在直接包裹着ImageView和TextView两个子标签
这个就是merge的简单使用了。
下面再来一个实例,是自定义控件以及自定义属性的使用。
首先我们创建一个布局文件okcalcelbar_button.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <Button xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"/>
- <?xml version="1.0" encoding="utf-8"?>
- <merge xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content" >
- <include
- layout="@layout/okcalcelbar_button"
- android:id="@+id/okcancelbar_ok"
- />
- <include
- layout="@layout/okcalcelbar_button"
- android:id="@+id/okcancelbar_cancel"
- />
- </merge>
创建values下面创建自定义属性的文件attrs.xml
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <declare-styleable name="OkCancelBar">
- <attr name="okLabel" format="string"/>
- <attr name="cancelLabel" format="string"/>
- </declare-styleable>
- </resources>
说明:上面自定义属性文件中
OkCancelBar 就是定义在 <declare-styleable name=" OkCancelBar "></declare-styleable> 里的 名字,获取里面属性用 名字_ 属性 连接起来就可以. 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();
- }
- }
创建布局文件:
- <?xml version="1.0" encoding="utf-8"?>
- <merge
- xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:okCancelBar="http://schemas.android.com/apk/res/com.xzw.merge">
- <ImageView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:scaleType="center"
- android:src="@drawable/golden_gate" />
- <com.xzw.merge.OkCancelBar
- 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" />
- </merge>
说明:
xmlns:okCancelBar:是我们自定义属性的命名空间前缀。也就是下面
- okCancelBar:okLabel="Save"
- okCancelBar:cancelLabel="Don't save"
用到的。
”http://schemas.android.com/apk/res/com.xzw.merge" 其中com.xzw.merge 是类文件所在包名。
使用自定义属性必须加上该命名空间。
看下效果图:
上面就是完整的实例。下面附上代码。
能力有限请大家多多指教。