ListView滑动删除实现之一——merge标签与LayoutInflater.inflate()
前言：上周末去看房，CAO，累的都快残废了，也没有满意的，害的博客也没写好……，不买了……
相关文章：
1、《 ListView滑动删除实现之一——merge标签与LayoutInflater.inflate()》
2、《ListView滑动删除实现之二——scrollTo、scrollBy详解》
3、《 ListView滑动删除实现之三——创建可滑动删除的ListView》
4、《ListView滑动删除实现之四——Scroller类与listview缓慢滑动》
从今天开始带着大家做一个滑动删除的listView控件，先拿效果来吸引下大家：
看着是不是挺好玩的，万丈高楼平地起，今天先讲讲有关merge与LayoutInflater.inflate()的用法
一、merge标签
merge标签就是通过删减多余或者额外的层级，从而优化整个Android Layout的结构。核心功能就是减少冗余的层次从而达到优化UI的目的！
看不懂？那看这里吧；merge标签，单从英文来看，意思为“合并”，那它用来合并什么呢？下面我们用例子来说明它可以合并什么。
将通过一个例子来了解这个标签实际所产生的作用，这样可以更直观的了解< merge/>的用法。
1、首先，我们新建一个工程，内容非常简单，界面如下：
当然它的布局代码如下：activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.blogmerge.MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"/>
</LinearLayout>代码非常简单，一个垂直布局下面有一个TextView控件和一个ImageView控件，效果图就是上面的那个
然后我们利用HierarchyViewer工具来看看它的结构：
（由于我用的是Genymotion模拟器，死活出不来模拟器下面的进程，只有用DDMS里的Dump工具来看结构了，大家也可以在SDK/tools文件下找到monitor.bat来启动它，位置如下图：）
有关HierarchyViewer工具的使用，请参考：
1、《Android UI 优化——使用HierarchyViewer工具》
2、《Android UI 调试工具 Hierarchy Viewer》
请注意，HierarchyViewer在调试真机时，一般是会不成功的，因为只有在开发版的 Android 设备上才有这样的功能。
这时候的控件的层次关系是这样的：
最上层的FrameLayout和LinearLayout都是系统自带的布局，右下方的三个蓝色的控件布局是我们activity_main.xml里的控件布局。
从这里可以看到在我们的LinearLayout之上，系统已经给了一层FrameLayout布局，所以我们这里的LinearLayout控件是完全可以删除的，那要怎么删除呢，这里就是merge标签的作用了，我们尝试把我们布局中的LinearLayout标签换成merge标签，再看一下层次结构图；
2、先看看下面activity_main.xml中，根标签换成merge后的代码：
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.blogmerge.MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
</merge>运行出来之后，可以看出与上面的垂直布局已经不一样的，textView与ImageView叠加在了一起，效果是这样的：
然后再看看控件层次图：
从控件层次图中可以明显看出:TextView控件与ImageView控件直接连在了上层的FrameLayout控件上！所以这就少了一个层次，由于直接连在了FrameLayout控件上了，所以这两个控件的布局就是使用的FrameLayout帧布局，这也就是为什么效果图中TextView控件与ImageView控件叠加在一起的原因！
可见：merge标签能够将该标签中的所有控件直接连在上一级布局上面，从而减少布局层级
merge标签有下面两个使用限制：
- < merge />只能作为XML布局的根标签使用
- 当Inflate以< merge />开头的布局文件时，必须指定一个父ViewGroup，并且必须设定attachToRoot为true（参看inflate(int, android.view.ViewGroup, Boolean)方法）。 必须为TRUE，是因为MERGE标签里没有可用的根结点
至于第二点，为什么attachToRoot必须设为TRUE，看完下一部分就自然懂了。
源码在文章底部给出
二、LayoutInflater.inflate()中的AttachToRoot参数
LayoutInflater.inflate()函数的声明方式如下：
public View inflate(int resource, ViewGroup root, boolean attachToRoot)
- 返回值：我们第一个先看返回的VIEW的意义，返回的VIEW指向的根结点。大家可能会有个疑问，第二个参数root不就是根结点吗？那返回根结点的话，不就是我们传进去的root吗？这可不一定，大家知道返回根结点的VIEW之后，继续往下看参数的具体讲解。
- 第一个参数resource:表示要将XML转成VIEW的layout布局
- 第二个参数root：表示根结点，它的作用主要取决于第三个参数
- 第三个参数attachToRoot：表示是否将转换后的VIEW直接添加在根结点上，如果是TRUE，那么在转换出来VIEW之后，内部直接会调用root.addView()来将其添加到root结点上，然后返回根结点，当然是我们传进去的ROOT结点。如果设为FALSE，那只会将XML布局转换成对应的VIEW，不会将其添加的我们传进去的root结点上，大家可能会问，那我们传进去的root结点有什么用？在这种情况下，我们root结点的唯一作用，就是在从XML转换布局时，给它提供上层控件的layot_width、layout_height等布局参数，供它产生视图时计算长宽高的位置，由于新产生的视图不依附于root，所以就整个VIEW而言，根结点就是它自己，所以返回值就是XML产生的VIEW本身。
1、首先，我们建一个工程，activity_mian.xml的代码如下：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical"
android:id="@+id/root">
<TextView
android:text="@string/hello_world"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
2、然后再建一个布局:add_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff00ff">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="30dp"
android:gravity="center"
android:text="xxxxx附加的" />
</LinearLayout>
- 首先，大家可以看到这两个布局的特点，activity_main.xml主布局上只有一个TEXTVIEW控件，而add_layout.xml整体布局上以紫色为背景色，其中有个TEXTVIEW来标识这是附加的
- 我们的任务就是将add_layout.xml添加到activity_mian.xml布局的LinearLayout结点下面
3、将attachToRoot设为TRUE，看添加效果
看下添加代码：
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LayoutInflater layoutInflater = LayoutInflater.from(this);
LinearLayout linearLayout = (LinearLayout)findViewById(R.id.root);
layoutInflater.inflate(R.layout.add_layout,linearLayout,true);
}
}在这段代码中，首先通过LayoutInflater.from(Context context);来获取LayoutInflater的实例。
LayoutInflater layoutInflater = LayoutInflater.from(this);然后，由于我们要把转换的视图添加到activity_main.xml的linearLayout布局下面，我将它的ID命为root，所以它就是LayoutInflater.inflate()所需要的根结点
下面的代码是获取根结点的控件实例
LinearLayout linearLayout = (LinearLayout)findViewById(R.id.root);最后，调用LayoutInflater.inflate()来转换布局，由于我们这里attachToRoot设为了True，所以，在add_layout.xml转换成View布局后，会调用root.addView()来将其添加到根结点视图的下面。所以在效果图显示时，我们是可以看得到add_layout.xml的效果的。
layoutInflater.inflate(R.layout.add_layout,linearLayout,true);效果图如下：
4、将attachToRoot设为FALSE，看添加效果
我们来看看如果把attachToRoot设为FALSE，效果图是怎样的，首先代码如下：
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LayoutInflater layoutInflater = LayoutInflater.from(this);
LinearLayout linearLayout = (LinearLayout)findViewById(R.id.root);
layoutInflater.inflate(R.layout.add_layout,linearLayout,false);
}
}大家可以看到，在代码上除了最后一句layoutInflater.inflate(R.layout.add_layout,linearLayout,false);中把true改成了false，其它没有任何变化
效果图是这样的
可以看到，我们的主布局没有任何变化，也就是说add_layout.xml的布局没有被添加到activity_mian.xml中；
我们开头就讲过，如果attachToRoot设为false,那转换后的布局是不会被添加到root中的，会作为结果返回。
其实attachToRoot设为TRUE的代码与下面的代码是等价的：
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LayoutInflater layoutInflater = LayoutInflater.from(this);
LinearLayout linearLayout = (LinearLayout)findViewById(R.id.root);
View view = layoutInflater.inflate(R.layout.add_layout,linearLayout,false);
linearLayout.addView(view);
}
}即将 layoutInflater.inflate(R.layout.add_layout,linearLayout,false);返回的VIEW通过addView(view);手动添加到根结点！
效果图跟attachToRoot一样，如下：
我们前面也讲过，当attachToRoot设为TRUE时，其内部会调用root.addView(view)来将布局添加到root中；
源码在文章底部给出
三、透过源码分析LayoutInflater.inflate()的过程
在大家看到上面的现象以后，我们透过源码的角度来分析，attachToRoot这个参数都做了些什么，root又用来做了些什么。
先看LayoutInflate.inflate()的实现：
public View inflate(int resource, ViewGroup root, boolean attachToRoot) {
XmlResourceParser parser = getContext().getResources().getLayout(resource);
try {
return inflate(parser, root, attachToRoot);
} finally {
parser.close();
}
}首先，通过我们传进去的布局，透过XML分析器获取parser:
XmlResourceParser parser = getContext().getResources().getLayout(resource);然后调用了inflate(parser, root, attachToRoot)函数，下面看看这个函数的实现：
（在源码的基础上，我去掉了很多非关键代码，首重给大家展示核心部分是怎么做的）
先看整体代码，然后再细讲：
public View inflate(XmlPullParser parser, ViewGroup root, boolean attachToRoot) {
synchronized (mConstructorArgs) {
//第一步：初始化
final AttributeSet attrs = Xml.asAttributeSet(parser);
Context lastContext = (Context)mConstructorArgs[0];
mConstructorArgs[0] = mContext;
//注意这里，在初始化时，result表示要返回的视图，默认是返回root
View result = root;
…………
final String name = parser.getName();
//第二步：创建XML对应的空白VIEW：temp
if (TAG_MERGE.equals(name)) {
//如果是merge标签：抛出异常
…………
} else {
View temp;
if (TAG_1995.equals(name)) {
temp = new BlinkLayout(mContext, attrs);
} else {
temp = createViewFromTag(root, name, attrs);
}
//第三步：从根结点中，获取布局参数，设置到temp中
ViewGroup.LayoutParams params = null;
if (root != null) {
// Create layout params that match root, if supplied
params = root.generateLayoutParams(attrs);
if (!attachToRoot) {
// Set the layout params for temp if we are not
// attaching. (If we are, we use addView, below)
temp.setLayoutParams(params);
}
}
//第四步：初始化temp中的子控件
rInflate(parser, temp, attrs, true);
//第五步：如果root不为空，而且attachToRoot设为TRUE，则将其视图通过addView添加到root中
if (root != null && attachToRoot) {
root.addView(temp, params);
}
//第六步：如果root为空，或者attachToRoot设为FALSE，那么就将TEMP视图做为result返回
if (root == null || !attachToRoot) {
result = temp;
}
}
return result;
}
}从上面注释大家应该也可以看出来功能所在，还是再带着大家重复一遍整个流程吧
第一步：一进来是初始化部分：
final AttributeSet attrs = Xml.asAttributeSet(parser); Context lastContext = (Context)mConstructorArgs[0]; mConstructorArgs[0] = mContext; //注意这里，在初始化时，result表示要返回的视图，默认是返回root View result = root;通过XML文件获取布局中各个控件的属性集：AttributeSet，注意：这里通过XML只能知道布局里每个控件的布局参数。那整个LAYOUT的布局参数呢，虽然我们在XML的根结点的布局可能写的是layout_width:fill_parent,layout_height:fill_parent。但这只是很笼统的，系统要确实计算出它的宽高数来。这个宽高数的计算就是通过root中的属性来得出来的，下面代码中会提到。
一个很重要的部分在于最后一句话！！！
View result = root;result表示最后返回的视图VIEW，所以这表示在默认情况下，返回root的视图！！注意这只是在默认情况下，下面会对result进行赋值的！
第二步：创建XML对应的空白视图temp
//第二步：创建XML对应的空白VIEW：temp
if (TAG_MERGE.equals(name)) {
//如果是merge标签，抛出异常
…………
} else {
View temp;
if (TAG_1995.equals(name)) {
temp = new BlinkLayout(mContext, attrs);
} else {
temp = createViewFromTag(root, name, attrs);
}在这里首先判断XML的根结点是不是merge标签，大家知道我们的merge标签的主要作用是用来将merge标签下的所有控件合并到其上层布局上，也就是说merge标签下是没有根控件的！因为merge标签下的控件都是并列关系，所以如果merge标签使用的inflate函数，那我们根本没有办法给它返回根视图，所以肯定是要抛出异常的
如果不是merge标签，就创建一个空白视图，返回给temp，这里的temp就是我们XML所对应的布局！
第三步：获取root的布局参数，设置到temp中
//第三步：从根结点中，获取布局参数，设置到temp中
ViewGroup.LayoutParams params = null;
if (root != null) {
params = root.generateLayoutParams(attrs);
if (!attachToRoot) {
temp.setLayoutParams(params);
}
}在这里看到，首先获取到了ROOT的布局参数赋值为params，然后当attachToRoot为FALSE时，将参数设置到temp中；
第四步：初始化temp中的子控件
//第四步：初始化temp中的子控件 rInflate(parser, temp, attrs, true);rInflate()其实是一个递归函数，用来递归建立temp下的所有控件的视图
第五步：如果root不为空，而且attachToRoot设为TRUE，则将其视图通过addView添加到root中
if (root != null && attachToRoot) {
root.addView(temp, params);
}在这里，就是当root不为空、attachToRoot为TRUE时，将构建好的temp视图添加到root中，注意这里的参数仍然从root中获取的布局参数params！！！所以，无论attachToRoot值为如何，temp的布局参数都是从ROOT里获取的！！！！
第六步：如果root为空，或者attachToRoot设为FALSE，那么就将TEMP视图做为result返回
if (root == null || !attachToRoot) {
result = temp;
}从这里可以看到，如果root为空，获取attachToRoot为FALSE，就会将temp做为结果返回！
到这里整个过程就分析结束了，下面我们总结一下：
1、root的最基本作用，就是给我们传进去的Layout提供布局参数信息
2、如果attachToRoot为TRUE,那么会将Layout产生的布局视图添加到root中，返回root
如果attachToRoot为FALSE，那么会将Layout产生的布局视图直接返回
好了，整篇文章也就结束了，下一篇将带大家初步使用scrollTo来实现滑动
源码内容：
1、《BlogInflate》：对应第二部分：LayoutInflater.inflate()中的AttachToRoot参数
2、《BlogMerge》：对应第一部分：merge标签
如果本文有帮到你，记得加关注哦
源码下载地址：http://download.csdn.net/detail/harvic880925/8618011
请大家尊重原创者版权，转载请标明出处：http://blog.csdn.net/harvic880925/article/details/45155965 谢谢