Android佈局優化技巧

藍楓Amy發表於2017-03-18

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

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

總結：以上就是有關佈局優化的一些技巧，具體的使用場景還要根據專案具體需求而定！

Android 佈局優化
2019-03-27
Android優化
Android最佳效能實踐(4)：佈局優化技巧
2015-08-17
Android優化
Android優化之佈局優化
2017-03-27
Android優化
Android效能優——佈局優化
2018-12-20
Android優化
Android效能優化之佈局優化
2019-03-02
Android優化
Android 優化之路(一)佈局優化
2019-03-04
Android優化
效能優化技巧知識梳理(1) 佈局優化
2017-12-21
優化
Android繪製優化（二）佈局優化
2017-04-06
Android優化
Android佈局檢測優化
2018-01-30
Android優化
Android中佈局的優化
2018-04-17
Android優化
Android 佈局優化之include
2017-09-05
Android優化
Android佈局優化三劍客
2019-03-29
Android優化
佈局優化
2015-07-23
優化
Android 效能優化（二）之佈局優化面面觀
2017-02-17
Android優化
轉：Android佈局優化三劍客
2018-11-22
Android優化
Android佈局優化利器include和ViewStub
2014-09-13
Android優化View
Android學習之 UI佈局優化
2014-07-13
AndroidUI優化
Android 佈局小技巧彙總
2017-03-12
Android
佈局技巧：合併佈局
2010-04-23
Android——ConstraintLayout的使用，優化佈局效能
2018-07-19
AndroidAI優化
iOS Flexbox 佈局優化
2018-03-21
iOSFlex優化
android: 動態載入碎片佈局的技巧
2016-01-27
Android
div佈局小技巧
2015-05-07
Android回顧--(十) ListView的優化和多佈局複用
2018-07-27
AndroidView優化
Android 佈局
2018-08-05
Android
Flutter 簡單佈局技巧
2019-04-04
Flutter
CSS 列表項佈局技巧
2018-11-20
CSS
CSS常見佈局技巧
2019-01-03
CSS
CSS 高階佈局技巧
2016-12-13
CSS
姿勢擺好，一招學會android的佈局優化！
2018-05-29
Android優化
Android佈局優化之ViewStub、include、merge使用與原始碼分析
2015-05-23
Android優化View原始碼
如何優化店鋪模板佈局——資訊圖
2015-04-16
優化
Android佈局概述
2016-12-07
Android
Android xml 佈局
2014-07-13
AndroidXML
收藏！40 個 CSS 佈局技巧
2020-07-22
CSS
佈局優化之ViewStub、Include、merge使用分析
2015-01-31
優化View
Web效能優化系列：預防佈局抖動
2015-06-24
Web優化
Android中View繪製優化二一---- 使用標籤複用佈局檔案
2015-09-11
AndroidView優化

Android佈局優化技巧

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

二.重用< include/>

三.使用< merge/>標籤來減少檢視層級結構

四.ViewStub

五.TextView同時顯示文字和圖片

六.線性佈局自帶的分割線

七.Space控制元件

八.TextView的行間距

總結：以上就是有關佈局優化的一些技巧，具體的使用場景還要根據專案具體需求而定！

相關文章