1、什么情况下使用 ViewStub、include、merge？
2、他们的原理是什么？
文章、布局优化神器 include 、merge、ViewStub 标签详解
Tips：
include 标签使用:
一、定义要实现(抽取)的 layout 布局:
//include_test.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="@string/textview"
android:textSize="24sp"/>
<EditText
android:id="@+id/editText"
android:hint="@string/divide"
android:layout_width="300dp"
android:layout_height="wrap_content"/>
</LinearLayout>---------------------------------------------------------------
//include_text_relative
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView_Relative"
android:textSize="24sp"/>
<EditText
android:id="@+id/editText"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_below="@+id/textView"
android:hint="@string/divide"/>
</RelativeLayout>
---------------------------------------------------------------
//include_toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#00f"
app:theme="@style/AppTheme"
app:title="这是一个 ToolBar"app:titleTextColor="@android:color/white"/>
二、Activity 的 XML 布局文件调用 include 标签:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<!--测试 layout 和<include>都设置 ID 的情况-->
<include
android:id="@+id/tb_toolbar"
layout="@layout/include_toolbar"/>
<!--如果只有单个 include 这样写就可以,加载的布局的子 View,直接 findViewByID 就能找
到-->
<include layout="@layout/include_text"/>
<!--如果有多个 include,需要添加 ID 属性-->
<include
android:id="@+id/include_text1"
layout="@layout/include_text"/>
<!--这个 layout 用 RelativeLayout 实现-->
<!--如果要使用 layout_margin 这样的属性,要同时加上 layout_w/h 属性,不然没反应-->
<include
android:id="@+id/include_text2"
layout="@layout/include_text_relative"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="50dp"/>
</LinearLayout>
三、Activity 中调用 include 标签 layout 中的子 View:
private void initView() {
//如果 include 布局根容器和 include 标签中的 id 设置的是不同的值，这里获取的
mToolbar 值将为 nullToolbar mToolbar = (Toolbar) findViewById(R.id.tb_toolbar);
setSupportActionBar(mToolbar);
//普通 include 标签用法,直接拿子 View 属性实现
TextView textView = (TextView) findViewById(R.id.textView);
textView.setText("不加 ID 实现的 include 标签");
//多个 include 标签用法,添加 ID,findViewByID 找到 layout,再找子控件
View view_include = findViewById(R.id.include_text1);
TextView view_include_textView = (TextView) view_include.findViewById(R.id.textView);
view_include_textView.setText("加了 ID 实现的 include 标签");
//多个 include 标签用法,添加 ID,findViewByID 找到 layout,再找子控件
View view_include_Relative = findViewById(R.id.include_text2);
TextView view_textView_relative =(TextView) view_include_Relative.findViewById(R.id.textView);
view_textView_relative.setText("加了 ID 实现的 include 标签(RelaviteLayout)");
}
include 标签 Demo 效果图
==include 使用注意==
merge 标签
merge标签主要用于辅助include标签,在使用include后可能导致布局嵌套过
多,多余的 layout 节点或导致解析变慢(可通过 hierarchy viewer 工具查看布
局的嵌套情况)官方文档说明:merge 用于消除视图层次结构中的冗余视图,例如根布局是
Linearlayout,那么我们又 include 一个 LinerLayout 布局就没意义了,反而会
减慢 UI 加载速度
merge 标签常用场景: .
根布局是 FrameLayout 且不需要设置 background 或 padding 等属性,可
以用merge代替,因为 Activity的 ContentView 父元素就是FrameLayout,
所以可以用 merge 消除只剩一个.
.某布局作为子布局被其他布局include时,使用merge当作该布局的顶节点,
这样在被引入时顶结点会自动被忽略,而将其子节点全部合并到主布局中.
.自定义 View 如果继承 LinearLayout(ViewGroup),建议让自定义 View 的
布局文件根布局设置成 merge,这样能少一层结点.
.merge 标签使用:
在 XML 布局文件的根布局如 RelativeLayout 直接改成 merge 即可
merge 标签使用前后 Hierarchy Viewer 截图
FrameLayout 替换 merge 前
FrameLayout 替换 merge 后
include 标签对应 layout 根布局 替换 merge 前
include 标签对应 layout 根布局 替换 merge 后
==merge 使用注意==
ViewStub 标签
ViewStub 标签最大的优点是当你需要时才会加载,使用它并不会影响 UI 初始
化时的性能.各种不常用的布局像进度条、显示错误消息等可以使用 ViewStub
标签,以减少内存使用量,加快渲染速度.ViewStub 是一个不可见的,实际上是把
宽高设置为 0 的 View.效果有点类似普通的 view.setVisible(),但性能体验提高
不少
第一次初始化时,初始化的是 ViewStub View,当我们调用 inflate()或
setVisibility()后会被 remove 掉,然后在将其中的 layout 加到当前 view
hierarchy 中
//官方例子
<ViewStub
android:id="@+id/stub_import"
<!--android:inflateId：重写 ViewStub 的父布局控件的 Id-->
android:inflatedId="@+id/panel_import"
< <!--android:layout：设置 ViewStub 被 inflate 的布局-->
android:layout="@layout/progress_overlay"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
-------------------------------------------------//当你想加载布局时，可以使用下面其中一种方法：
((ViewStub)
findViewById(R.id.stub_import)).setVisibility(View.VISIBLE);
// or
View importPanel = ((ViewStub)
findViewById(R.id.stub_import)).inflate();
判断 ViewStub(做单例)是否已经加载过:
1. 如果通过 setVisibility 来加载,那么通过判断可见性即可;
2. 如果通过 inflate()来加载,判断 ViewStub 的 ID 是否为 null 来判断
(findViewById(…))
public class ViewStubActivity extends AppCompatActivity
implements View.OnClickListener, ViewStub.OnInflateListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);setContentView(R.layout.activity_view_stub);
}
private View networkErrorView;
private void showNetError() {
// not repeated infalte
if (networkErrorView != null) {
//setVisibility()方式加载布局,加载次数不限
networkErrorView.setVisibility(View.VISIBLE);
return;
}
//inflate()方式加载布局,只能加载一次
ViewStub stub = (ViewStub)
findViewById(R.id.network_error_layout);
stub.setOnInflateListener(this);networkErrorView = stub.inflate();
Button networkSetting = (Button)
networkErrorView.findViewById(R.id.network_miss);
networkSetting.setOnClickListener(this);
Button refresh = (Button)
findViewById(R.id.network_refresh);
refresh.setOnClickListener(this);
}
private void showNormal() {
if (networkErrorView != null) {
networkErrorView.setVisibility(View.GONE);
}
}
public void show(View view) {showNetError();
}
public void refresh(View view) {
showNormal();
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.network_miss:
Toast.makeText(this, "network_miss",
Toast.LENGTH_SHORT).show();
break;
case R.id.network_refresh:
Toast.makeText(this, "network_refresh",
Toast.LENGTH_SHORT).show();break;
}
}
/**
*
* @param stub 当前待 inflate 的 ViewStub 控件
* @param inflated 当前被 inflate 的 View 视图
*/
@Override
public void onInflate(ViewStub stub, View inflated) {
}
}
ViewStub 标签 Demo 效果图:
ViewStub 标签使用前后 Hierarchy Viewer 截图
ViewStub 标签使用前：
ViewStub 标签使用后：
==ViewStub 标签使用注意==
扩展:
Space 组件
在 ConstraintLayout 出来前,我们写布局都会使用到大量的 margin 或
padding,但是这种方式可读性会很差,加一个布局嵌套又会损耗性能
鉴于这种情况,我们可以使用space,使用方式和View一样,不过主要用来占位置,
不会有任何显示效果
