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"表示行间距

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