Android布局优化技巧

一.总体原则：减少布局层次，加快渲染速度

当线性布局LinearLayout和相对布局都能使用时，优先使用线性布局LinearLayout，因为RelativeLayout会让子View调用2次onMeasure，onMeasure的耗时越长效率越低。
尽量避免RelativeLayout嵌套RelativeLayout

二.重用< include/>

< include>标签可以在一个布局中引入另外一个布局,重用共同的布局文件。

比如说共同的标题栏common_title.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="48dp"
    android:background="@color/colorAccent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:paddingLeft="15dp"
        android:src="@mipmap/back"/>

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:gravity="center"
        android:paddingRight="15dp"
        android:text="发布"
        android:textColor="@color/white"
        android:textSize="16sp"/>

</RelativeLayout>

然后在activity_title.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="match_parent"
    android:orientation="vertical">

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

</LinearLayout>

显示效果：

这里写图片描述

三.使用< merge/>标签来减少视图层级结构

比如说，主布局是线性布局，include进来的布局也是一个线性布局，这时候，include进来的线性布局就是多余的，可以用merge标签代替

title.xml

<merge
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="center"
        android:src="@mipmap/girl"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom"
        android:background="#aa000000"
        android:gravity="center"
        android:paddingBottom="20dp"
        android:textSize="18sp"
        android:paddingTop="20dp"
        android:text="美丽的女孩"
        android:textColor="#ffffffff"/>
</merge>

在一个线性布局中inclde引入

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

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

</LinearLayout>

显示效果：

这里写图片描述

三.ViewStub

ViewStub 是一个轻量级的View，宽和高都为0，实现View的延迟加载，避免资源的浪费，减少渲染时间，在需要的时候才加载View。

activity_title.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:gravity="center"
    android:orientation="vertical">

    <ViewStub
        android:id="@+id/stub"
        android:inflatedId="@+id/panel_import"
        android:layout="@layout/common_title1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

</LinearLayout>

common_title1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="#55000000"
    android:orientation="vertical"
    android:paddingBottom="20dp"
    android:paddingLeft="40dp"
    android:paddingRight="40dp"
    android:paddingTop="20dp">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:text="当前无网络"
        android:textSize="15sp"/>


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:text="点击重试"
        android:textSize="16sp"/>

</LinearLayout>

TitleActivity.java

package com.zhoujian.mykeep.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewStub;

import com.zhoujian.mykeep.R;

/**
 * Created by zhoujian on 2017/3/17.
 */

public class TitleActivity extends AppCompatActivity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_title);

        ((ViewStub) findViewById(R.id.stub)).setVisibility(View.VISIBLE);
       // View importPanel = ((ViewStub) findViewById(R.id.stub)).inflate();
    }

}

显示效果：

这里写图片描述

四.TextView同时显示文字和图片

首先，上一张图片：

这里写图片描述

大家看到这种布局的时候，首先会想到一个线性布局包裹6个相对布局，每一个相对布局包含一个TextView和两个Imageview

其实，只要一个线性布局包含6个TextView就可以搞定！

优化后的代码

<?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:gravity="center_horizontal"
    android:orientation="vertical">


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


    <TextView
        android:id="@+id/txt_album"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_photo"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="@string/my_posts"
        android:textSize="16sp"/>


    <TextView
        android:id="@+id/txt_collect"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_collect"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="@string/collection"
        android:textSize="16sp"/>


    <TextView
        android:id="@+id/txt_money"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_money"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="@string/wallet"
        android:textSize="16sp"/>


    <TextView
        android:id="@+id/txt_card"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_card"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="@string/card_bag"
        android:textSize="16sp"/>


    <TextView
        android:id="@+id/txt_smail"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_smail"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="@string/expression2"
        android:textSize="16sp"/>


    <TextView
        android:id="@+id/txt_setting"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_setting"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="10dp"
        android:text="@string/settings"
        android:textSize="16sp"/>

</LinearLayout>

五.线性布局自带的分割线

首先上一张图片：

这里写图片描述

每个条目下面都有一天分割线，一般的做法是用一个高为1dp的view来表示

优化后的代码

<?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:background="#ffffff"
    android:divider="@drawable/divider_line"
    android:dividerPadding="16dp"
    android:showDividers="middle"
    android:gravity="center_horizontal"
    android:orientation="vertical">
    
    <include layout="@layout/common_title"/>
    
    <TextView
        android:id="@+id/txt_album"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_photo"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="@string/my_posts"
        android:textSize="16sp"/>


    <TextView
        android:id="@+id/txt_collect"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_collect"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="@string/collection"
        android:textSize="16sp"/>


    <TextView
        android:id="@+id/txt_money"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_money"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="@string/wallet"
        android:textSize="16sp"/>


    <TextView
        android:id="@+id/txt_card"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_card"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="@string/card_bag"
        android:textSize="16sp"/>


    <TextView
        android:id="@+id/txt_smail"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_smail"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="@string/expression2"
        android:textSize="16sp"/>


    <TextView
        android:id="@+id/txt_setting"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_setting"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="10dp"
        android:text="@string/settings"
        android:textSize="16sp"/>

</LinearLayout>

核心代码就是给线性布局设置divider

   android:divider="@drawable/divider_line"
   android:dividerPadding="16dp"
   android:showDividers="middle"

divider_line.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <size
        android:width="1dp"
        android:height="1dp"/>

      <solid android:color="#33000000"/>

</shape>

五.Space控件

Space：空间的意思，表示该控件占据一定的空间，但是却不显示任何东西。

首先上一张图：

这里写图片描述

优化后的代码：

common_title5.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:background="#EBEBEB"
    android:gravity="center_horizontal"
    android:orientation="vertical">

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


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:divider="@drawable/divider_line"
        android:dividerPadding="16dp"
        android:orientation="vertical"
        android:showDividers="middle">


        <TextView
            android:id="@+id/txt_album"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:background="@drawable/setting_item_selector"
            android:drawableLeft="@mipmap/icon_me_photo"
            android:drawablePadding="10dp"
            android:drawableRight="@mipmap/right"
            android:gravity="center_vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:text="@string/my_posts"
            android:textSize="16sp"/>


        <TextView
            android:id="@+id/txt_collect"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:background="@drawable/setting_item_selector"
            android:drawableLeft="@mipmap/icon_me_collect"
            android:drawablePadding="10dp"
            android:drawableRight="@mipmap/right"
            android:gravity="center_vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:text="@string/collection"
            android:textSize="16sp"/>

    </LinearLayout>


    <android.support.v4.widget.Space
        android:layout_width="match_parent"
        android:layout_height="10dp"/>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:divider="@drawable/divider_line"
        android:dividerPadding="16dp"
        android:orientation="vertical"
        android:showDividers="middle">


        <TextView
            android:id="@+id/txt_money"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:background="@drawable/setting_item_selector"
            android:drawableLeft="@mipmap/icon_me_money"
            android:drawablePadding="10dp"
            android:drawableRight="@mipmap/right"
            android:gravity="center_vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:text="@string/wallet"
            android:textSize="16sp"/>


        <TextView
            android:id="@+id/txt_card"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:background="@drawable/setting_item_selector"
            android:drawableLeft="@mipmap/icon_me_card"
            android:drawablePadding="10dp"
            android:drawableRight="@mipmap/right"
            android:gravity="center_vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:text="@string/card_bag"
            android:textSize="16sp"/>

    </LinearLayout>


    <android.support.v4.widget.Space
        android:layout_width="match_parent"
        android:layout_height="10dp"/>


    <TextView
        android:id="@+id/txt_smail"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_smail"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="@string/expression2"
        android:textSize="16sp"/>


    <android.support.v4.widget.Space
        android:layout_width="match_parent"
        android:layout_height="10dp"/>


    <TextView
        android:id="@+id/txt_setting"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@drawable/setting_item_selector"
        android:drawableLeft="@mipmap/icon_me_setting"
        android:drawablePadding="10dp"
        android:drawableRight="@mipmap/right"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="10dp"
        android:text="@string/settings"
        android:textSize="16sp"/>

</LinearLayout>

六.TextView的行间距

首先上一张图：

这里写图片描述

看到这个布局，我们首先会想到的是一个横向的线性布局包裹着一个竖直方向的线性布局和一个Imageview，竖直方向的线性布局里面包裹着四个TextView

优化后的代码：

common_title6.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:background="@color/white"
    android:orientation="vertical">


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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@color/white">

        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:padding="20dp"
            android:src="@mipmap/beautiful"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:lineSpacingExtra="12dp"
            android:text="时间：2017年3月17日\n地点：北京市中关村南大街\n是否开业：已开业\n费用：98元"
            android:textSize="14dp"/>
    </LinearLayout>
</LinearLayout>

android:lineSpacingExtra="12dp"表示行间距

总结：以上就是有关布局优化的一些技巧，具体的使用场景还要根据项目具体需求而定！

最后编辑于：2017.12.06 04:11:15

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,711评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,079评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,194评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,089评论 1赞 286
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,197评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,306评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,338评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,119评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,541评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,846评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,014评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,694评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,322评论 3赞 318
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,026评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,257评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,863评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,895评论 2赞 351

Android布局优化技巧

一.总体原则：减少布局层次，加快渲染速度

二.重用< include/>

三.使用< merge/>标签来减少视图层级结构

三.ViewStub

四.TextView同时显示文字和图片

五.线性布局自带的分割线

五.Space控件

六.TextView的行间距

总结：以上就是有关布局优化的一些技巧，具体的使用场景还要根据项目具体需求而定！

推荐阅读更多精彩内容