2. 程式人生 > >效能優化之佈局優化(ConstraintLayout)

效能優化之佈局優化(ConstraintLayout)

阿新 • • 發佈：2019-01-11
遇到的問題

面試的時候,面試官總問我做過效能優化嗎?我這種低階程式設計師當然會說一些基本的防止給自己的挖坑,例如佈局優化啊,減少覆蓋渲染呀啥的,我經常說不要包裹過多的佈局,因為在xml生成view物件的也是需要解析xml解析效率降低,渲染view的層級過多都會導致效能降低,都是屁話,總之就是降低xml佈局的層級關係,怎麼降低呢?今天我學習了下ConstraintLayout,發現他很強大,他幾乎可以包裹一層即可完成複雜的佈局

ConstraintLayout屬性

控制相對於位置
  1. layout_constraintLeft_toLeftOf   
  2. layout_constraintLeft_toRightOf
  3. layout_constraintRight_toLeftOf
  4. layout_constraintRight_toRightOf
  5. layout_constraintBottom_toTopOf
  6. layout_constraintTop_toBottomOf

這組屬性理解例如layout_constraintLeft_toLeftOf進行拆分constraintLeft代表的是控制元件的左邊,toLeftOf去某控制元件的左邊

畫個圖,例如我在A控制元件加入了屬性 app:layout_constraintLeft_toLeftOf="id/B"代表讓A控制元件的左邊,去B控制元件的左邊

注 意:app:layout_constraintLeft_toLeftOf="parent"

引數可以使parent代表父控制元件

寬高比例約束
  1. layout_constraintDimensionRatio

在以前的不居中,例如橫向填充父容器,高度為橫向的一半,在以前的程式碼需要進行計算,動態設定高度,有了這個約束屬性及很簡單了

    <TextView
        android:id="@+id/banner"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#765"
        android:gravity="center"
        android:text="Banner"
        app:layout_constraintDimensionRatio="2:1" //寬高2:1
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
均分

在以前均分,我們只需要在LinearLayout設定weight屬性即可,使用ConstraintLayout相比較就要麻煩一些

    <TextView
        android:id="@+id/tab_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#f00"
        android:gravity="center"
        android:text="tab1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintRight_toLeftOf="@+id/tab_2" />

    <TextView
        android:id="@+id/tab_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:gravity="center"
        android:text="tab2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tab_1"
        app:layout_constraintRight_toLeftOf="@+id/tab_3" />


    <TextView
        android:id="@+id/tab_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#00f"
        android:gravity="center"
        android:text="tab3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tab_2"
        app:layout_constraintRight_toRightOf="parent" />

得到的效果


解釋:因為寬度設定的0dp,寬度的大小其實就是依靠約束條件來定義了,沒個tab左右邊距都有一個約束條件,導致了寬度是一樣的,就和相互作用力似的

那如果存在比例關係呢?我們可以使用app:layout_constraintHorizontal_weight="2"控制橫向的比例


來個以前佈局做不到的效果

案例:寬度大小是包裹內容,也就是大小是確定的,存在4個條目,均分橫向視窗,保證每個條目的之間和螢幕的間隔都要一致,這需要拿到手一看是以為很簡單,只需要在LinearLayout的條目在包裹一層,然後通過weight屬性控制寬度,包裹的內容居中即可!這樣做你確定滿足需求了?注意看需求,要求條目之間的間隔相同,並且保證螢幕間隔相同樣的,你這樣做的效果是這樣的,可以看到間隔和螢幕見的是不同的哦


如何做呢?

    <TextView
        android:id="@+id/tab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f00"
        android:gravity="center"
        android:text="tab1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread" //核心是這個
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tab2" />

    <TextView
        android:id="@+id/tab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:gravity="center"
        android:text="tab2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toRightOf="@id/tab1"
        app:layout_constraintRight_toLeftOf="@+id/tab3" />


    <TextView
        android:id="@+id/tab3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00f"
        android:gravity="center"
        android:text="tab3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toRightOf="@id/tab2"
        app:layout_constraintRight_toRightOf="parent" />

你只需要在app:layout_constraintHorizontal_chainStyle="spread"

效果是這樣的


控制位置之偏差

layout_constraintVertical_bias於layout_constraintHorizontal_bias這2個屬性

舉個例子

    <TextView
        android:text="我是偏差的demo"
        android:background="#000"
        android:textColor="#fff"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


上面的佈局你寫完你會發現,TextView居中了,如果你學會了你會明白為啥居中,應為上下左右都有一個parent的力,拉扯,TextView當然就居中了,如果我想控制右邊的力大一些, app:layout_constraintHorizontal_bias="0.8"


豎直方向的自行琢磨!!

基準線(Guideline)

畫畫的都知道,在畫之前會畫一些輔助線,幫助畫畫,ConstraintLayout提供了Guideline標籤,他定義的標籤在介面上是不會顯示的,只是幫其它控制元件定位

Guideline特有的屬性

    <android.support.constraint.Guideline
        android:id="@+id/line1"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
  1. android:orientation 控制線的方向
  2. app:layout_constraintGuide_percent 控制線的位置,如果是豎直方向,就代表螢幕位置的N%
總結

控制元件的大小如果設定的是0dp,大小會通過約束條件,來改變大小,如果是包裹內容,約束條件只會控制其位置,不會改變大小,我就掉入了這個誤區

整個XML程式碼
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.Guideline
        android:id="@+id/line1"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <android.support.constraint.Guideline
        android:id="@+id/line2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="409dp" />

    <TextView
        android:text="我是偏差的demo"
        android:background="#000"
        android:textColor="#fff"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.8"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


    <TextView
        android:id="@+id/banner"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#765"
        android:gravity="center"
        android:text="Banner"
        app:layout_constraintBottom_toTopOf=""
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="測試文字啊"
        android:textColor="#000000"
        app:layout_constraintTop_toBottomOf="@id/banner" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="測試文字啊"
        android:textColor="#FF0000"
        app:layout_constraintLeft_toRightOf="@id/tv1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/tv1" />


    <TextView
        android:id="@+id/tab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f00"
        android:gravity="center"
        android:text="tab1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tab2" />

    <TextView
        android:id="@+id/tab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:gravity="center"
        android:text="tab2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toRightOf="@id/tab1"
        app:layout_constraintRight_toLeftOf="@+id/tab3" />


    <TextView
        android:id="@+id/tab3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00f"
        android:gravity="center"
        android:text="tab3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toRightOf="@id/tab2"
        app:layout_constraintRight_toRightOf="parent" />


    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginTop="348dp"
        app:layout_constraintRight_toLeftOf="@id/line1"
        app:layout_constraintBottom_toTopOf="@id/line2"
        android:background="#612"
  />


    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="0dp"
        app:layout_constraintVertical_bias="0.9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_height="wrap_content">
        <FrameLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content">
            <TextView
                android:background="#F00"
                android:text="1111"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </FrameLayout>

        <FrameLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content">
            <TextView
                android:background="#0F0"
                android:text="2222"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </FrameLayout>

        <FrameLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content">
            <TextView
                android:background="#00f"
                android:text="3333"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </FrameLayout>
    </LinearLayout>

    <TextView
        android:id="@+id/tab_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#f00"
        android:gravity="center"
        app:layout_constraintHorizontal_weight="2"
        android:text="tab1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tab_2" />

    <TextView
        android:id="@+id/tab_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:gravity="center"
        app:layout_constraintHorizontal_weight="1"
        android:text="tab2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tab_1"
        app:layout_constraintRight_toLeftOf="@+id/tab_3" />


    <TextView
        android:id="@+id/tab_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#00f"
        android:gravity="center"
        app:layout_constraintHorizontal_weight="1"
        android:text="tab3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tab_2"
        app:layout_constraintRight_toRightOf="parent" />



</android.support.constraint.ConstraintLayout>

相關推薦

效能優化之佈局優化(ConstraintLayout)

遇到的問題面試的時候,面試官總問我做過效能優化嗎?我這種低階程式設計師當然會說一些基本的防止給自己的挖坑,例如佈局優化啊,減少覆蓋渲染呀啥的,我經常說不要包裹過多的佈局,因為在xml生成view物件的也是需要解析xml解析效率降低,渲染view的層級過多都會導致效能降低,都是

Android效能優化之佈局優化

          佈局優化可以通過減少佈局層級來提高，儘量減少使用效能低的佈局，LineaLayout的效率最高，在可以使用LinearLayout或者RelativeLayout時，選擇LinearLayout。因為RelativeLayout測量較為複雜，需要測量水平和

效能優化之佈局優化

佈局優化: 1使用抽象標籤 include標籤：用於將公共部分提取出來 viewstub標籤：引入的佈局不顯示也不佔用位置，解析時節省記憶體，主要用於進度佈局、網路失敗顯示的重新整理佈局、資訊出錯出現的提示佈局等，同view的gone merge標籤：使用include時

Android 效能優化（二）之佈局優化

60fps VS 16ms 根據Google官方出品的Android效能優化典範，60幀每秒是目前最合適的影象顯示速度，事實上絕大多數的Android裝置也是按照每秒60幀來重新整理的。為了讓螢幕的重新整理幀率達到60fps，我們需要確保在時間16ms（100

Android效能優化系列之佈局優化

在Android開發中，UI佈局可以說是每個App使用頻率很高的，隨著UI越來越多，佈局的重複性、複雜度也會隨之增長，這樣使得UI佈局的優化，顯得至關重要，UI佈局不慎，就會引起過度繪製，從而造成UI卡頓的情況，本篇部落格，我就來總結一下UI佈局優化的相關技巧。

Android進階——效能優化之佈局渲染原理和底層機制詳解（四）

引言 UI 全稱User Interaction，我第一次聽到這個名詞是在大學的時候，當時候上人機互動課，我們教授說他認為iPhone的i 就是代表Interaction的意思，暫且不必爭辯是非。回到我們軟體開發中來，UI是使用者感知與互動的第一且唯一的途徑,

效能優化之記憶體優化

效能優化之記憶體優化 計算 APP 獲得的最大記憶體分配值 Runtime rt=Runtime.getRuntime(); long maxMemory=rt.maxMemory(); Log.i("maxMemory:",Long.toString(max

MySQL(三) —— MySQL效能優化之 索引優化

MySQL索引優化 如何選擇合適的列建立索引？ 在where從句、group by 從句、order by 從句、on 從句中出現的列 索引欄位越小越好 離散度大的列放在聯合索引的前面 如何判斷列的離散度？ 去重查詢看列的唯一值，唯一值越多則離散度越大。 mysql&

Linux效能優化之CPU優化(一)

前言 何為效能優化？個人認為，效能優化是為了提高應用程式或系統能力為目的。那麼如何才能實現對應用程式的效能調優呢？這裡很設計到很多的內容，包括Linux核心、CPU架構以及Linux核心對資源的分配以及管理，瞭解程序的建立過程等。這方面由於篇幅較多，所以我的文章就不過多介紹。接下來的幾篇文章中，

MySQL(三) —— MySQL效能優化之 索引優化

MySQL索引優化 　　如何檢視mysql資料庫的引擎 一般情況下，mysql會預設提供多種儲存引擎,你可以通過下面的檢視: 看mysql支援哪些儲存引擎: mysql> show engines； mysql> show engines; +--

KVM總結-KVM效能優化之記憶體優化

EPT 技術 大頁和透明大頁 KSM 技術 記憶體限制 EPT技術 EPT也就是擴充套件頁表，這是intel開創的硬體輔助記憶體虛擬化技術。我們知道記憶體的使用，是一個邏輯地址跟實體地址轉換的過程。虛擬機器內部有邏輯地址轉成成實體地址的過程，然後再跳出來，虛擬機器

Android最佳效能實踐 四 ——佈局優化技巧

                在前面幾篇文章當中，我們學習瞭如何通過合理管理記憶體，以及高效能編碼技巧的方式來提升應用程式的效能。然而實際上介面佈局也會對應用程式的效能產生比較大的影響，如果佈局寫得糟糕的話，那麼程式載入UI的速度就會非常慢，從而造成不好的使用者體驗。那麼本篇文章我們就來學習一下，如何通過優

Unity效能優化之程式碼優化

對於Unity效能優化，目前接觸到的大概有這幾個方面： 1. Draw Call 2. 資源（模型、貼圖、粒子） 3. 渲染（相機、光照、Shader） 4. 網路 5. 程式碼（程式碼編寫、資源載入、物理系統） 可以在Unity自帶的Profiler視窗檢視專案效能消耗主要

2017版：KVM效能優化之CPU優化

前言 任何平臺根據場景的不同，都有相應的優化。不一樣的硬體環境、網路環境，同樣的一個平臺，它跑出的效果也肯定不一樣。就好比一輛法拉利，在高速公路里跑跟鄉村街道跑，速度和激情肯定不同… 所以，我們做運維工作，也是如此。首先你得充分了解你所用的軟體平臺，然後根據你現有的生產環境去充分的測試，最後得出結果

KVM總結-KVM效能優化之CPU優化

前言 任何平臺根據場景的不同，都有相應的優化。不一樣的硬體環境、網路環境，同樣的一個平臺，它跑出的效果也肯定不一樣。就好比一輛法拉利，在高速公路里跑跟鄉村街道跑，速度和激情肯定不同… 所以，我們做運維工作，也是如此。首先你得充分了解你所用的軟體平臺，然後根據你現有的生產環境去充分的測試，最後得出結果，做最

mysql效能優化之配置優化

1、目的： 通過根據伺服器目前狀況，修改MySQL的系統引數，達到合理利用伺服器現有資源，最大合理的提高MySQL效能。 2、伺服器引數： 32G記憶體、4個CPU,每個CPU 8核。 3、MySQL目前安裝狀況。     MySQL目前安裝，用的是MySQL

App效能優化之View優化（2）——UI問題的解決

一.概況 上一篇中App效能優化之View優化（1）——UI問題的檢測主要講的是我們在寫完程式碼之後，如何發現程式碼中的問題。從問題中提取經驗，規範好自己之後的程式碼編寫，本文就是講如何規範的進行UI關聯程式碼的書寫。 二.主要的點 View控制元件

MySQL 資料庫效能優化之索引優化

非常感謝作者。 大家都知道索引對於資料訪問的效能有非常關鍵的作用，都知道索引可以提高資料訪問效率。 為什麼索引能提高資料訪問效能？他會不會有“副作用”？是不是索引建立越多，效能就越好？到底該如何設計索引，才能最大限度的發揮其效能？ 這篇文章主要是帶著上面這幾個問題來做一個

03.SQLServer效能優化之---儲存優化系列

以下內容皆為個人摸索，沒有人專門指導（公司不給力啊！DBA和大牛都木有。。。），所以難免出錯，如有錯誤歡迎指正，小子勇於接受批評~(*^__^*) ~ 水平分庫分表和垂直分庫分表，大家都經常談，我說下我的理解，看圖： 垂直分表就不用說了，基本上會SQLServer的都會。 垂直分庫就是根

Linux效能優化之磁碟優化（三）

前言 關於本章內容，設計的東西比較多。這裡會有關於檔案系統、磁碟、CPU等方面的知識，以及涉及到關於這方面的效能排查等。 術語 檔案系統通過快取和緩衝以及非同步I/O等手段來緩和磁碟的延時對應用程式的影響。為了更詳細的瞭解檔案系統，以下就簡單介紹一些相關術語： 檔案系統：一種把資料組織成檔案和目錄的儲存方式