Android布局优化技巧

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

尽量避免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"表示行间距

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