Android佈局優化技巧

時間 2019-12-08

原文原文鏈接

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

儘可能避免RelativeLayout嵌套RelativeLayout

二.重用< include/>

< include>標籤能夠在一個佈局中引入另一個佈局,重用共同的佈局文件。javascript

好比說共同的標題欄common_title.xmljava

<?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文件中引用android

<?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>複製代碼

顯示效果：express

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

好比說，主佈局是線性佈局，include進來的佈局也是一個線性佈局，這時候，include進來的線性佈局就是多餘的，能夠用merge標籤代替網絡

title.xmlapp

<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引入ide

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

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