Android UI布局优化_android ui布局分享-优快云博客

本文介绍了三种Android UI优化技巧：使用include标签实现布局复用，利用merge标签减少嵌套层级，及运用ViewStub进行布局延迟加载。这些技巧有助于提升应用性能并改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人在开发过程中，一直要求自己在UI方面不要做过多的嵌套，这点我对自己还是挺满意的！！因为UI过多的嵌套，虽然开发比较方便，可以提高开发速率，但是渲染时间过长，App甚至会出现卡顿，降低用户的体验！

很多人都知道“include”，“merge”，但是“ViewStub”标签估计很多人和我一样，有眼不识泰山了（说来惭愧呀）。

include

使用include标签，主要的是为了UI的复用。比如导航栏，如果不用ActionBar或者Toolbar，估计都是自定义一个Layout，然后在每个activity布局中，使用include标签，把布局加载进来，像这样：

layout_bar.xml

<?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="50dp">

    <TextView
        android:id="@+id/title_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_centerInParent="true"
        android:textColor="#3c3c3c"
        android:textSize="18sp"
        />

    <ImageView
        android:id="@+id/back_icon"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:src="@drawable/icon_back"
        android:layout_centerVertical="true"
        android:layout_marginLeft="15sp"
        />

</RelativeLayout>

activity_main.xml

<?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="match_parent">

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

</RelativeLayout>

merge

使用merge标签，可以有效的减少Layout嵌套，一般与include标签一起用。怎么样减少Layout嵌套呢？？来个例子。

layout_test.xml（没有使用merge标签）

<?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">  

    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_alignParentLeft="true"   
        android:text="第一个标签" />  

    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_alignParentRight="true"   
        android:text="第二个标签" />  

</RelativeLayout>

activity_main.xml

<?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="match_parent">

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

</RelativeLayout>

这样的话，UI层是这样的：

- RelativeLayout
  -- RelativeLayout
     --- TextView (第一个标签)
     --- TextView (第二个标签)

现在使用merge标签

layout_test.xml（使用merge标签）

<?xml version="1.0" encoding="utf-8"?>  
<merge xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="wrap_content">  

    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_alignParentLeft="true"   
        android:text="第一个标签" />  

    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_alignParentRight="true"   
        android:text="第二个标签" />  

</merge>

Now，UI层是这样的：

- RelativeLayout
  -- TextView (第一个标签)
  -- TextView (第二个标签)

我们发现，两个TextView使用根布局作为父View。

merge标签里面的View是使用include的所在的父布局为View的父布局。

ViewStub

使用ViewStub标签，可以用来延迟加载布局资源。

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

程序有这么一个需求，开始时，隐藏某个布局，等到合适的时刻，再显示出来。我们一般的做法是：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/hello_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#9c9c9c"
        android:textSize="18sp"
        android:text="hello"
        android:visibility="gone"
        />

    <TextView
        android:id="@+id/world_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#3c3c3c"
        android:textSize="20sp"
        android:text="World"
        android:visibility="gone"
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="load"
        android:onClick="load"
        />

</LinearLayout>

MainActivity.java


public class MainActivity extends AppCompatActivity {

    private TextView helloView, worldView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        helloView = (TextView) findViewById(R.id.hello_view);
        worldView = (TextView) findViewById(R.id.world_view);
    }

    public void load(View view) {
        helloView.setVisibility(View.VISIBLE);
        worldView.setVisibility(View.VISIBLE);
    }

}

这样的话，helloView和worldView是已经加载进来了，然后再是隐藏起来。我们可以使用ViewStub标签，让程序一开始不加载隐藏的控件。

layout_view_stub.xml

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

    <TextView
        android:id="@+id/hello_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#9c9c9c"
        android:textSize="18sp"
        android:text="hello"
        />

    <TextView
        android:id="@+id/world_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#3c3c3c"
        android:textSize="20sp"
        android:text="World"
        />

</LinearLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ViewStub
        android:id="@+id/stub_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout="@layout/layout_view_stub"
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="load"
        android:onClick="load"
        />

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ViewStub stub;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        stub = (ViewStub) findViewById(R.id.stub_view);
    }

    public void load(View view) {
        stub.inflate();
    }

}

这样，既程序开始时可以节省资源，又方便！！

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

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

ViewStub只能Inflate一次，之后ViewStub对象会被置为空。按句话说，某个被ViewStub指定的布局被Inflate后，就不会够再通过ViewStub来控制它了。
ViewStub只能用来Inflate一个布局文件，而不是某个具体的View，当然也可以把View写在某个布局文件中。

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

在程序的运行期间，某个布局在Inflate后，就不会有变化，除非重新启动。
因为ViewStub只能Inflate一次，之后会被置空，所以无法指望后面接着使用ViewStub来控制布局。所以当需要在运行时不止一次的显示和隐藏某个布局，那么ViewStub是做不到的。这时就只能使用View的可见性来控制了。
想要控制显示与隐藏的是一个布局文件，而非某个View。
因为设置给ViewStub的只能是某个布局文件的Id，所以无法让它来控制某个View。

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