首页 > Android > 正文

Android抽象布局—include、merge 、ViewStub

2016-07-12 Android 876 ℃ 1 评论

在布局优化中,Androi的官方提到了这三种布局<include />、<merge />、<ViewStub />,并介绍了这三种布局各有的优势,下面也是简单说一下他们的优势,以及怎么使用。

1、布局重用<include />

Android在xml文件中可使用include包含其他定义好的布局, 可以将多处用到的布局单独出来,然后用include包含进来,这种包含方法相当于把原来布局的一部分代码独立出来,供大家共同使用,也就相当于面向对向中的类的概念差不多。示例如下:

需要包含的xml文件,我这里就放了一个Button按钮:

 

btn.xml:

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content"  
    android:orientation="vertical" >  
    <Button  
        android:id="@+id/btn"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"   
        android:text="Button">  
    </Button>  
</LinearLayout>

main.xml

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:orientation="vertical"   
    >  
    <include android:id="@+id/in1" layout="@layout/btn"/>  
    <include android:id="@+id/in2" layout="@layout/btn"/>  
    <TextView android:id="@+id/tv"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:text="@string/hello" />  
</LinearLayout>

2、减少视图层级<merge />

 <merge/>标签在UI的结构优化中起着非常重要的作用,它可以删减多余的层级,优化UI。<merge/>多用于替换FrameLayout或者当一个布局包含另一个时,<merge/>标签消除视图层次结构中多余的视图组。例如你的主布局文件是垂直布局,引入了一个垂直布局的include,这是如果include布局使用的LinearLayout就没意义了,使用的话反而减慢你的UI表现。这时可以使用<merge/>标签优化。先来用个例子演示一下:

首先主需要一个配置文件activity_main.xml

<RelativeLayout 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" >  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="merge标签使用" />  
  
</RelativeLayout>

MainActivity.java

package com.example.merge;  
  
import android.app.Activity;  
import android.os.Bundle;  
  
public class MainActivity extends Activity {  
  
     @Override  
     protected void onCreate(Bundle savedInstanceState) {  
          super.onCreate(savedInstanceState);  
          setContentView(R.layout.activity_main);  
     }  
}

按着上面的代码创建工程,运行后使用“DDMS -> Dump View Hierarchy for UI Automator”工具,截图如下

merge 使用前

1.png

最下面两层RelativeLayout与TextView就是activity_main.xml布局中的内容,上面的FrameLayout是Activity setContentView添加的顶层视图。下面使用merge标签可以查看下区别

布局文件activity_main.xml修改内容如下:

<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" >  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="merge标签使用" />  
  
</merge>

使用“DDMS -> Dump View Hierarchy for UI Automator”工具,截图如下

merge使用后

2.png

FrameLayout下面直接就是TextView,与之前的相比少了一层RelativeLayout而实现的效果相同。

某些时候,自定义可重用的布局包含了过多的层级标签,比如我们
例如:这样的话,使用<include>包含上面的布局的时候,系统会自动忽略merge层级,而把两个button直接放置与include平级

什么情况考虑使用Merge标签?
一种是向上面的例子一样,子视图不需要指定任何针对父视图的布局属性,例子中TextView仅仅需要直接添加到父视图上用于显示就行。
另外一种是假如需要在LinearLayout里面嵌入一个布局(或者视图),而恰恰这个布局(或者视图)的根节点也是LinearLayout,这样就多了一层没有用的嵌套,无疑这样只会拖慢程序速度。而这个时候如果我们使用merge根标签就可以避免那样的问题,官方文档Android Layout Tricks #3: Optimize by merging 中的例子演示的就是这种情况。

 <merge />标签有什么限制没?
 <merge />只能作为XML布局的根标签使用。当Inflate以<merge />开头的布局文件时,必须指定一个父ViewGroup,并且必须设定attachToRoot为true。
merge标签还有一些属性可供使用,具体可以查看API文档,例如android:layout_width、android:layout_height等

3、需要时使用<ViewStub />

在开发应用程序的时候,经常会遇到这样的情况,会在运行时动态根据条件来决定显示哪个View或某个布局。那么最通常的想法就是把可能用到的View都写在上面,先把它们的可见性都设为View.GONE,然后在代码中动态的更改它的可见性。这样的做法的优点是逻辑简单而且控制起来比较灵活。但是它的缺点就是,耗费资源。虽然把View的初始可见View.GONE但是在Inflate布局的时候View仍然会被Inflate,也就是说仍然会创建对象,会被实例化,会被设置属性。也就是说,会耗费内存等资源。

      推荐的做法是使用android.view.ViewStub,ViewStub是一个轻量级的View,它一个看不见的,不占布局位置,占用资源非常小的控件。可以为ViewStub指定一个布局,在Inflate布局的时候,只有ViewStub会被初始化,然后当ViewStub被设置为可见的时候,或是调用了ViewStub.inflate()的时候,ViewStub所向的布局就会被Inflate和实例化,然后ViewStub的布局属性都会传给它所指向的布局。这样,就可以使用ViewStub来方便的在运行时,要还是不要显示某个布局。

      但ViewStub也不是万能的,下面总结下ViewStub能做的事儿和什么时候该用ViewStub,什么时候该用可见性的控制。

     首先来说说ViewStub的一些特点:

         1. ViewStub只能Inflate一次,之后ViewStub对象会被置为空。按句话说,某个被ViewStub指定的布局被Inflate后,就不会够再通过ViewStub来控制它了。

         2. ViewStub只能用来Inflate一个布局文件,而不是某个具体的View,当然也可以把View写在某个布局文件中。

     基于以上的特点,那么可以考虑使用ViewStub的情况有:

         1. 在程序的运行期间,某个布局在Inflate后,就不会有变化,除非重新启动。

              因为ViewStub只能Inflate一次,之后会被置空,所以无法指望后面接着使用ViewStub来控制布局。所以当需要在运行时不止一次的显示和隐藏某个布局,那么ViewStub是做不到的。这时就只能使用View的可见性来控制了。

         2. 想要控制显示与隐藏的是一个布局文件,而非某个View。

              因为设置给ViewStub的只能是某个布局文件的Id,所以无法让它来控制某个View。

     所以,如果想要控制某个View(如Button或TextView)的显示与隐藏,或者想要在运行时不断的显示与隐藏某个布局或View,只能使用View的可见性来控制。

下面来看一个实例

在这个例子中,要显示二种不同的布局,一个是用TextView显示一段文字,另一个则是用ImageView显示一个图片。这二个是在onCreate()时决定是显示哪一个,这里就是应用ViewStub的最佳地点。

先来看看布局,一个是主布局,里面只定义二个ViewStub,一个用来控制TextView一个用来控制ImageView,另外就是一个是为显示文字的做的TextView布局,一个是为ImageView而做的布局:

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout  
  xmlns:android="http://schemas.android.com/apk/res/android"  
  android:orientation="vertical"  
  android:layout_width="fill_parent"  
  android:layout_height="fill_parent"  
  android:gravity="center_horizontal">  
  <ViewStub   
    android:id="@+id/viewstub_demo_text"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:layout_marginLeft="5dip"  
    android:layout_marginRight="5dip"  
    android:layout_marginTop="10dip"  
    android:layout="@layout/viewstub_demo_text_layout"/>  
  <ViewStub   
    android:id="@+id/viewstub_demo_image"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:layout_marginLeft="5dip"  
    android:layout_marginRight="5dip"  
    android:layout="@layout/viewstub_demo_image_layout"/>  
</LinearLayout>

为TextView的布局:

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout  
  xmlns:android="http://schemas.android.com/apk/res/android"  
  android:orientation="vertical"  
  android:layout_width="wrap_content"  
  android:layout_height="wrap_content">  
    <TextView  
        android:id="@+id/viewstub_demo_textview"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:background="#aa664411"  
        android:textSize="16sp"/>  
</LinearLayout>

为ImageView的布局:

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout  
  xmlns:android="http://schemas.android.com/apk/res/android"  
  android:orientation="vertical"  
  android:layout_width="wrap_content"  
  android:layout_height="wrap_content">  
    <ImageView  
        android:id="@+id/viewstub_demo_imageview"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"/>  
</LinearLayout>

下面来看代码,决定来显示哪一个,只需要找到相应的ViewStub然后调用其infalte()就可以获得相应想要的布局:

package com.effective;  
  
import android.app.Activity;  
import android.os.Bundle;  
import android.view.ViewStub;  
import android.widget.ImageView;  
import android.widget.TextView;  
  
public class ViewStubDemoActivity extends Activity {  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.viewstub_demo_activity);  
        if ((((int) (Math.random() * 100)) & 0x01) == 0) {  
            // to show text  
            // all you have to do is inflate the ViewStub for textview  
            ViewStub stub = (ViewStub) findViewById(R.id.viewstub_demo_text);  
            stub.inflate();  
            TextView text = (TextView) findViewById(R.id.viewstub_demo_textview);  
            text.setText("The tree of liberty must be refreshed from time to time" +  
                    " with the blood of patroits and tyrants! Freedom is nothing but " +  
                    "a chance to be better!");  
        } else {  
            // to show image  
            // all you have to do is inflate the ViewStub for imageview  
            ViewStub stub = (ViewStub) findViewById(R.id.viewstub_demo_image);  
            stub.inflate();  
            ImageView image = (ImageView) findViewById(R.id.viewstub_demo_imageview);  
            image.setImageResource(R.drawable.happy_running_dog);  
        }  
    }  
}

使用的时候的注意事项:

1. 某些布局属性要加在ViewStub而不是实际的布局上面,才会起作用,比如上面用的android:layout_margin*系列属性,如果加在TextView上面,则不会起作用,需要放在它的ViewStub上面才会起作用。而ViewStub的属性在inflate()后会都传给相应的布局。


猜你喜欢

已有1位网友发表了看法:

欢迎 发表评论:

请填写验证码
日历
«   2018年10月   »
1234567
891011121314
15161718192021
22232425262728
293031
网站分类
最近发表
标签列表
站点信息
  • 文章总数:153
  • 页面总数:1
  • 分类总数:11
  • 标签总数:171
  • 评论总数:4
  • 浏览总数:94719