Android布局優(yōu)化技巧

一.總體原則：減少布局層次，加快渲染速度

  • 當(dāng)線性布局LinearLayout和相對(duì)布局都能使用時(shí)，優(yōu)先使用線性布局LinearLayout，因?yàn)镽elativeLayout會(huì)讓子View調(diào)用2次onMeasure，onMeasure的耗時(shí)越長(zhǎng)效率越低。
  • 盡量避免RelativeLayout嵌套R(shí)elativeLayout

二.重用< include/>

< include>標(biāo)簽可以在一個(gè)布局中引入另外一個(gè)布局,重用共同的布局文件。

比如說共同的標(biāo)題欄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="標(biāo)題"
        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="發(fā)布"
        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/>標(biāo)簽來減少視圖層級(jí)結(jié)構(gòu)

比如說，主布局是線性布局，include進(jìn)來的布局也是一個(gè)線性布局，這時(shí)候，include進(jìn)來的線性布局就是多余的，可以用merge標(biāo)簽代替

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>

在一個(gè)線性布局中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 是一個(gè)輕量級(jí)的View，寬和高都為0，實(shí)現(xiàn)View的延遲加載，避免資源的浪費(fèi)，減少渲染時(shí)間，在需要的時(shí)候才加載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="當(dāng)前無網(wǎng)絡(luò)"
        android:textSize="15sp"/>


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:text="點(diǎn)擊重試"
        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同時(shí)顯示文字和圖片

首先，上一張圖片：

這里寫圖片描述

大家看到這種布局的時(shí)候，首先會(huì)想到一個(gè)線性布局包裹6個(gè)相對(duì)布局，每一個(gè)相對(duì)布局包含一個(gè)TextView和兩個(gè)Imageview

其實(shí)，只要一個(gè)線性布局包含6個(gè)TextView就可以搞定！

優(yōu)化后的代碼

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

五.線性布局自帶的分割線

首先上一張圖片：

這里寫圖片描述

每個(gè)條目下面都有一天分割線，一般的做法是用一個(gè)高為1dp的view來表示

優(yōu)化后的代碼

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

核心代碼就是給線性布局設(shè)置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：空間的意思，表示該控件占據(jù)一定的空間，但是卻不顯示任何東西。

首先上一張圖：

這里寫圖片描述

優(yōu)化后的代碼：

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的行間距

首先上一張圖：

這里寫圖片描述

看到這個(gè)布局，我們首先會(huì)想到的是一個(gè)橫向的線性布局包裹著一個(gè)豎直方向的線性布局和一個(gè)Imageview，豎直方向的線性布局里面包裹著四個(gè)TextView

優(yōu)化后的代碼：

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="時(shí)間：2017年3月17日\(chéng)n地點(diǎn)：北京市中關(guān)村南大街\n是否開業(yè)：已開業(yè)\n費(fèi)用：98元"
            android:textSize="14dp"/>
    </LinearLayout>
</LinearLayout>

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

總結(jié)：以上就是有關(guān)布局優(yōu)化的一些技巧，具體的使用場(chǎng)景還要根據(jù)項(xiàng)目具體需求而定！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容