转自:http://blog.csdn.net/harvic880925/article/details/45155965
从今天开始带着大家做一个滑动删除的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>
然后我们利用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控件直接连在了上层的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 layoutInflater = LayoutInflater.from(this);
下面的代码是获取根结点的控件实例
- LinearLayout linearLayout = (LinearLayout)findViewById(R.id.root);
- 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);
- }
- }
效果图是这样的
可以看到,我们的主布局没有任何变化,也就是说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);
- }
- }
效果图跟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();
- }
- }
- XmlResourceParser parser = getContext().getResources().getLayout(resource);
(在源码的基础上,我去掉了很多非关键代码,首重给大家展示核心部分是怎么做的)
先看整体代码,然后再细讲:
- 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;
一个很重要的部分在于最后一句话!!!
- View result = root;
第二步:创建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);
- }
如果不是merge标签,就创建一个空白视图,返回给temp,这里的temp就是我们XML所对应的布局!
第三步:获取root的布局参数,设置到temp中
- //第三步:从根结点中,获取布局参数,设置到temp中
- ViewGroup.LayoutParams params = null;
- if (root != null) {
- params = root.generateLayoutParams(attrs);
- if (!attachToRoot) {
- temp.setLayoutParams(params);
- }
- }
第四步:初始化temp中的子控件
- //第四步:初始化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;
- }
到这里整个过程就分析结束了,下面我们总结一下:
1、root的最基本作用,就是给我们传进去的Layout提供布局参数信息
2、如果attachToRoot为TRUE,那么会将Layout产生的布局视图添加到root中,返回root
如果attachToRoot为FALSE,那么会将Layout产生的布局视图直接返回
好了,整篇文章也就结束了,下一篇将带大家初步使用scrollTo来实现滑动