Android布局优化

作者: Ch_y_s | 来源:发表于2016-12-26 23:43 被阅读780次

本文主要记录Android布局优化的一些小技巧
Android中，如果一个View树的高度太高，就会严重影响测量，布局和绘制的速度，因此可以使用一些方法来降低View树的高度，提高用户体验

避免使用过多嵌套

先来看一个非常常见的效果

相信这样的效果对我们来说完全不是问题，然而很多人会这样写布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="5dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:text="第一项"
            android:textSize="18sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/arrows_right" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#cccccc" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="5dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:text="第二项"
            android:textSize="18sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/arrows_right" />
    </LinearLayout>
</LinearLayout>

可以看到这里布局嵌套了多层，类似这种效果有更优雅的写法，效果是完全一样的

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="@drawable/spacer"
    android:orientation="vertical"
    android:showDividers="middle">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@mipmap/ic_launcher"
        android:drawablePadding="10dp"
        android:drawableRight="@drawable/arrows_right"
        android:gravity="center_vertical"
        android:padding="5dp"
        android:text="第一项"
        android:textSize="18sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@mipmap/ic_launcher"
        android:drawablePadding="10dp"
        android:drawableRight="@drawable/arrows_right"
        android:gravity="center_vertical"
        android:padding="5dp"
        android:text="第二项"
        android:textSize="18sp" />
</LinearLayout>

这里主要用到了LinearLayout的android:divider="@drawable/spacer" 和android:showDividers="middle"两个属性添加分割线，注意android:divider里面的参数必须是shape类型才能显示。TextView里面则用到了android:drawableLeft="@mipmap/ic_launcher"设置文字左边图片，android:drawableRight="@drawable/arrows_right"同理这是文字右边图片，android:drawablePadding="10dp"设置图片与文字的间距。
我们可以对比一下两个布局文件，更少的嵌套，更简洁的代码，相信你会更喜欢第二种写法。

重用布局文件<include>、<merge>

<include>

简单来说<include>标签就是为了一些通用的UI来使用的，有时候我们不想用系统的Toolbar，完全可以自己写一个满足我们的需求，先看效果。

这里很简单的实现了左边一个图片，中间标题，右边一个图片，一般情况左边是一个back按钮，右边一个action按钮，这里为了方便演示就直接用系统里的图片。关键代码片段如下。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="@drawable/spacer"
    android:orientation="vertical"
    android:showDividers="middle">

    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:padding="5dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="标题"
            android:textSize="18sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:src="@mipmap/ic_launcher" />
    </RelativeLayout>
    ...
</LinearLayout>

由于我们会在多个Activity使用到这个布局，你完全可以每个Activity都拷贝一份上面的代码，但我相信身为程序猿的你不会那么做，因为如果某一天需求需要改动这个布局，而你每个Activity都需要修改，这时候你是崩溃的。为解决此问题我们就可以用到<include>标签来重用此UI。
首先我们可以新建一个top_view.xml布局文件，代码就是把上面<RelativeLayout>包含的整个提取出来。然后把刚刚的布局替换成<include>。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="@drawable/spacer"
    android:orientation="vertical"
    android:showDividers="middle">

    <include layout="@layout/top_view" />
    ...
</LinearLayout>

使用layout="@layout/top_view"属性将我们刚刚的布局引入即可。非常简便，这样即使需要改动我们只需修改top_view.xml里面的内容就能适用整个APP。

<merge>

简单来说<merge>标签可以有效的减少多余的布局嵌套，这里简单的举个栗子。直接贴关键代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    ...
    <include layout="@layout/ok_cancel_layouy" />
    
</LinearLayout>

ok_cancel_layouy.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ok" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="cancel" />
</LinearLayout>

这时候我们看下View的层次，抛开最外层的FrameLayout不说，先是LinearLayout接着是<include>里面的LinearLayout，最后是两个Button，这时候内层的LinearLayout其实是多余的，我们可以使用<merge>来代替，这样系统就会忽略<merge>直接放下两个Button。
修改后的ok_cancel_layouy.xml

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

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ok" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="cancel" />
</merge>

View延时加载<ViewStub>

上面我们知道了通过<include>可以引用通用UI，还可以使用<ViewStub>来引用并实现延迟加载。<ViewStub>是一个非常轻量级的控件，它没有大小，没有绘制，也不参与布局。填写资料的时候，有时会有更多资料填写，这时候我们需要实现点击更多才显示其他资料，效果如下

点击more的时候会多出两个输入框

布局文件如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:hint="name" />

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

    <Button
        android:id="@+id/btn_more"
        android:layout_width="wrap_content"
        android:text="more"
        android:layout_height="wrap_content" />
</LinearLayout>

more_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
        android:id="@+id/et_more1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:hint="more1" />

    <EditText
        android:id="@+id/et_more2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:hint="more2" />
</LinearLayout>

点击more进行显示

        btn_more = (Button) findViewById(R.id.btn_more);
        btn_more.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ViewStub viewStub = (ViewStub) findViewById(R.id.view_stub);
                1.viewStub.setVisibility(View.VISIBLE);
                if (viewStub != null) {
                    2.View inflatedView = viewStub.inflate();
                    et_more1 = (EditText) inflatedView.findViewById(R.id.et_more1);
                    et_more2 = (EditText) inflatedView.findViewById(R.id.et_more2);
                }
            }
        });

有两种方法可以让<ViewStub>的布局进行显示，一种是直接设置viewStub.setVisibility(View.VISIBLE)，第二种则是使用inflate来加载，如要获取到里面控件，我们一般采用第二种方法。
从上面可以看出<ViewStub>的用法类似于<include>，不同的是<ViewStub>必须指定layout_width和layout_height属性，还有一点需要注意<ViewStub>所加载的布局是不可以使用<merge>标签的。

对于Android布局优化就写这些，另外系统还提供了一个工具HierarchyView可以帮助我们更好的优化布局，需要学习更多的可以直接阅读官网的文章。(需要科学上网)

第一次写文章，有疑问或错误的欢迎指出，互相学习。

Android布局优化

目录

避免使用过多嵌套

重用布局文件<include>、<merge>

<include>

<merge>

View延时加载<ViewStub>

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android开发

首页投稿（暂停使用，暂停投稿）

Android开发

Android知识

首页推荐

android技术

程序员

今日看点