ViewStub和include布局使用(官方文档)

转载 2016年08月29日 15:59:10

Loading Views On Demand

Sometimes your layout might require complex views that are rarely used. Whether they are item details, progress indicators, or undo messages, you can reduce memory usage and speed up rendering by loading the views only when they are needed.

Define a ViewStub


ViewStub is a lightweight view with no dimension and doesn’t draw anything or participate in the layout. As such, it's cheap to inflate and cheap to leave in a view hierarchy. Each ViewStub simply needs to include the android:layout attribute to specify the layout to inflate.

The following ViewStub is for a translucent progress bar overlay. It should be visible only when new items are being imported into the application.

<ViewStub
    android:id="@+id/stub_import"
    android:inflatedId="@+id/panel_import"
    android:layout="@layout/progress_overlay"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom" />

Load the ViewStub Layout


When you want to load the layout specified by the ViewStub, either set it visible by calling setVisibility(View.VISIBLE) or call inflate().

((ViewStub) findViewById(R.id.stub_import)).setVisibility(View.VISIBLE);
// or
View importPanel = ((ViewStub) findViewById(R.id.stub_import)).inflate();

Note: The inflate() method returns the inflated View once complete. so you don't need to call findViewById() if you need to interact with the layout.

Once visible/inflated, the ViewStub element is no longer part of the view hierarchy. It is replaced by the inflated layout and the ID for the root view of that layout is the one specified by the android:inflatedId attribute of the ViewStub. (The ID android:id specified for the ViewStub is valid only until theViewStub layout is visible/inflated.)

Note: One drawback of ViewStub is that it doesn’t currently support the <merge> tag in the layouts to be inflated.

Re-using Layouts with <include/>

Reusing layouts is particularly powerful as it allows you create reusable complex layouts. For example, a yes/no button panel, or custom progress bar with description text. It also means that any elements of your application that are common across multiple layouts can be extracted, managed separately, then included in each layout. So while you can create individual UI components by writing a custom View, you can do it even more easily by re-using a layout file.Although Android offers a variety of widgets to provide small and re-usable interactive elements, you might also need to re-use larger components that require a special layout. To efficiently re-use complete layouts, you can use the <include/> and <merge/> tags to embed another layout inside the current layout.

Create a Re-usable Layout


If you already know the layout that you want to re-use, create a new XML file and define the layout. For example, here's a layout from the G-Kenya codelab that defines a title bar to be included in each activity (titlebar.xml):

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/titlebar_bg">

    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/gafricalogo" />
</FrameLayout>

The root View should be exactly how you'd like it to appear in each layout to which you add this layout.

Use the <include> Tag


Inside the layout to which you want to add the re-usable component, add the <include/> tag. For example, here's a layout from the G-Kenya codelab that includes the title bar from above:

Here's the layout file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_bg"
    android:gravity="center_horizontal">

    <include layout="@layout/titlebar"/>

    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="@string/hello"
              android:padding="10dp" />

    ...

</LinearLayout>

You can also override all the layout parameters (any android:layout_* attributes) of the included layout's root view by specifying them in the<include/> tag. For example:

<include android:id="@+id/news_title"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         layout="@layout/title"/>

However, if you want to override layout attributes using the <include> tag, you must override both android:layout_height and android:layout_widthin order for other layout attributes to take effect.

Use the <merge> Tag


The <merge /> tag helps eliminate redundant view groups in your view hierarchy when including one layout within another. For example, if your main layout is a vertical LinearLayout in which two consecutive views can be re-used in multiple layouts, then the re-usable layout in which you place the two views requires its own root view. However, using another LinearLayout as the root for the re-usable layout would result in a vertical LinearLayout inside a vertical LinearLayout. The nested LinearLayout serves no real purpose other than to slow down your UI performance.

To avoid including such a redundant view group, you can instead use the <merge> element as the root view for the re-usable layout. For example:

<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/delete"/>

</merge>

Now, when you include this layout in another layout (using the <include/> tag), the system ignores the <merge> element and places the two buttons directly in the layout, in place of the <include/> tag.


【移动开发】布局优化利器<include/>和ViewStub

当创建复杂的布局的时候,有时候会发现添加了很多的ViewGroup和View。随之而来的问题是View树的层次越来越深,应用也变的越来越慢,因为UI渲染是非常耗时的。这时候就应该进行布局优化了。这里介...
  • manoel
  • manoel
  • 2014年09月04日 00:24
  • 7796

Android抽象布局——include、merge 、ViewStub的区别

在布局优化中,Androi的官方提到了这三种布局、、,并介绍了这三种布局各有的优势,下面也是简单说一下他们的优势,以及怎么使用,记下来权当做笔记。 1、布局重用 标签能够重用布局文件,简单的使...
  • u010897392
  • u010897392
  • 2015年04月17日 15:00
  • 955

ViewStub动态加载布局提高UI加载性能

ViewStub 定位:ViewStub 是一个不可见,size 大小为0 的一个View ,用于运行时 延迟inflate layout布局的。当ViewStub 变为可见,或者 调用了inflat...
  • u011733020
  • u011733020
  • 2016年06月14日 16:18
  • 1654

布局优化技巧--<include>/<merge>/<viewStub>

转自 guolin csdn 重用布局文件 Android系统中已经提供了非常多好用的控件,这让我们在编写布局的时候可以很轻松。但是有些时候我们可能需要反复利用某个已经写好的布局,...
  • sunny_wj
  • sunny_wj
  • 2016年01月20日 16:00
  • 794

Android抽象布局——include、merge 、ViewStub

在布局优化中,Androi的官方提到了这三种布局、、,并介绍了这三种布局各有的优势,布局重用,减少视图层级,需要时加载。...
  • xyz_lmn
  • xyz_lmn
  • 2013年11月11日 17:18
  • 125690

布局优化神器 include 、merge、ViewStub标签详解

导读在日常开发中,我们可能会遇到有很多相似的布局,如果我们每一个XML文件都写一次,不说麻烦,代码也显得冗余,而且可读性也很差.这时候我们该怎么弄,本编文章将会介绍include、merge和View...
  • u012792686
  • u012792686
  • 2017年06月07日 16:44
  • 430

使用ViewStub需要注意的一些问题

关于ViewStub的使用方法网络上有很多,但是某些细节不注意的话,运行时就会出现不可预知的错误。 1.引用布局文件的属性为android:layout,而不是layout(与incluce的区别) ...
  • shaziln
  • shaziln
  • 2015年11月02日 23:39
  • 4803

Android使用ViewStub提高布局性能

在Android开发中,View是我们必须要接触的用来展示的技术.通常情况下随着View视图的越来越复杂,整体布局的性能也会随之下降.这里介绍一个在某些场景下提升布局性能的View,它就是ViewSt...
  • chuyouyinghe
  • chuyouyinghe
  • 2016年09月23日 14:52
  • 3333

Android布局优化之<merge>与<ViewStub>标签使用

merge标签:使用merge标签可以达到减少布局层级的作用,特别在配合include标签进行使用的时候,通过减少布局的层级数,可以优化APP在加载布局文件时的资源消耗,从而达到提高APP性能的效果。...
  • u011771755
  • u011771755
  • 2015年09月21日 15:54
  • 1167

Android UI布局优化之ViewStub

在设计模式的单利模式中,懒汉式和饿汉式是其中两种。 一种是在类被加载的时候就完成单例对象的初始化,一种是在需要使用该单例的时候才初始化。 在android的视图设计中,同样需要使用的这样的设计模式...
  • a740169405
  • a740169405
  • 2016年01月15日 13:50
  • 2878
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ViewStub和include布局使用(官方文档)
举报原因:
原因补充:

(最多只允许输入30个字)