Android ConstraintLayout 降低佈局層次,佈局優化首選

目錄

  1. 介紹
  2. ConstraintLayout的優點
  3. ConstraintLayout使用方法
    1. Relative positioning(相對定位)
    2. Margins(邊距)
    3. Centering positioning(居中偏移)
    4. Circular positioning(圓心偏移)
    5. Visibility behavior(隱藏行爲)
    6.  Dimension constraints(尺寸約束)
    7.  Chains(鏈)
  4. Virtual Helpers objects(輔助工具)

        4.1  Optimizer(計算優化)

        4.2  Barrier(屏障)

        4.3  Group(分組)

        4.4  PlaceHolder(佔位符)

        4.5  GuideLine(基準線)

 

 

1.介紹

Contrstraint Layout Library包是Android support library的一部分,現在不再維護了。Contrstraint Layout Library已經被AndroidX約束佈局庫所取代,後者是Jetpack的一部分。

ConstraintLayout類已經被androidx.constraintlayout.widget.ConstraintLayout所取代。我們建議在所有新項目中使用AndroidX庫。

您還應該考慮將現有項目遷移到AndroidX。

2 .ConstrainLayou優點

  1. 減少佈局的層次,減少過度繪製。

複雜的佈局一般會用RelativeLayout嵌套多層RelativeLayout,這樣會導致佈局層次

過深,性能會很低

  1. 適配上更靈活

ConstrainLayout可以按照比例約束控制尺寸和位置能夠更好的適配不通的機型

 

3. ConstraintLayout使用方法

   3.1相對定位

        相對定位是在ConstraintLayout中創建佈局的基本構件之一。這些約束允許控件

        將給定的控件相對於另一個控件進行定位。您可以約束一控件在水平方向和者

     垂直方向:

      Horizontal 方向: left, right, start and end sides

      Vertical 方向: top, bottom sides and text baseline

       文字描述比較抽象見圖3-1

     

     代碼如下:

         <Button android:id="@+id/buttonA" ... />

         <Button android:id="@+id/buttonB" ...

                 app:layout_constraintLeft_toRightOf="@+id/buttonA" />

 

             經常用到約束屬性列表:

             layout_constraintLeft_toLeftOf

             layout_constraintLeft_toRightOf

             layout_constraintRight_toLeftOf

             layout_constraintRight_toRightOf

              layout_constraintTop_toTopOf

             layout_constraintTop_toBottomOf

             layout_constraintBottom_toTopOf

             layout_constraintBottom_toBottomOf

             layout_constraintBaseline_toBaselineOf

             layout_constraintStart_toEndOf

              layout_constraintStart_toStartOf

             layout_constraintEnd_toStartOf

             layout_constraintEnd_toEndOf

             它們都採用另一個控件的引用id,或者父組件(父組件將引用父容器,

               即ConstraintLayout):<Button android:id="@+id/buttonB" ...

                 app:layout_constraintLeft_toLeftOf="parent" />

 

          3.2Margins(邊距)

             

           如果設置了margin,它們將應用於相應的約束(如上圖),將邊距強制設置爲目標和源端之間的空間。通常的佈局邊距屬性可以這樣                使用:

              android:layout_marginStart

             android:layout_marginEnd

             android:layout_marginLeft

             android:layout_marginTop

             android:layout_marginRight

             android:layout_marginBottom

            注意:邊界只能是正的或等於0,具體值dp。

           Margins  visiable=gone的控件

           當位置約束目標的可見性爲gone,可以使用以下屬性指定一個margin值:

            layout_goneMarginStart

           layout_goneMarginEnd

           layout_goneMarginLeft

           layout_goneMarginTop

            layout_goneMarginRight

            layout_goneMarginBottom

           

         3.3  Centering positioning(居中偏移)

              ConstraintLayout水平居中顯示寫法

             

              控件中居中的寫法爲:

                                   <Button

                                      app:layout_constraintBottom_toBottomOf="parent"

                                      app:layout_constraintLeft_toLeftOf="parent"

                                      app:layout_constraintRight_toRightOf="parent"

                                         app:layout_constraintTop_toTopOf="parent" />

                    意思是把控件的上下左右約束在佈局的上下左右,這樣就能把控件放在

                   佈局的中間了。相當於RelativeLayout  centerInParent=true

 

                  控件居中也可以添加偏差屬性進行調整定位例如:

                  layout_marginLeft=”100dp“

                     居中後使用marginLeft=100dp,button水平居中後向右偏移100dp除了這種,還可以使用Bias(比例)

                      layout_constraintHorizontal_bias和layout_constraintVertical_bias

                     layout_constraintHorizontal_bias取值範圍爲0-1,如果是0,則Button在佈局的最左側,如果賦值1則Button在佈局的最右                               側,如果爲0.5則是水平居中,如果是0.3,則傾向於左側。垂直偏移同理

 

             3.4  Circular positioning(圓心偏移)

                約束一個控件中心相對於另一個控件中心的角度和距離。

                 將控件定位在圓上(如下圖)。

                 layout_constraintCircle : references another widget id

                   layout_constraintCircleRadius : the distance to the other widget center

                 layout_constraintCircleAngle : which angle the widget should be at(in degrees, from 0 to 360)

                3.5 Visibility behavior(隱藏行爲)

                 ConstraintLayout會對標記爲View.GONE的控件進行的特定處理。設置Gone的控件不會顯示也不是佈局本身的一部分.

                  如果標記爲gone他們的尺寸不會改變,但在佈局計算方面,gone的控件仍然是它的一部分,有一個重要的區別:

                  對於佈局傳遞,它們的維度將被認爲是零(基本上,它們將被解析爲一個點)

                    如果它們對其他控件有約束,它們仍然會有用,但任何邊界都將等於零

           3.6 Dimension constraints(尺寸約束)

              控件的尺寸可以通過四種不同方式指定:

             1.使用指定的尺寸

 

              2.使用wrap_content,讓控件自己計算大小

                  當控件的高度或寬度爲wrap_content時,可以使用下列屬性來控制最大、最小的高度或寬度:

                    android:minWidth 最小的寬度

                  android:minHeight 最小的高度

                  android:maxWidth 最大的寬度

                  android:maxHeight 最大的高度

                   注意!當ConstraintLayout爲1.1版本以下時,使用這些屬性需要加上強制約束,如下所示:

                   app:constrainedWidth=”true”

                     app:constrainedHeight=”true”

 

               3. 使用 0dp (MATCH_CONSTRAINT)

               官方不推薦在ConstraintLayout中使用match_parent,可以設置 0dp (MATCH_CONSTRAINT) 配合約束代替match_parent,舉                   個例子:

                  4. 寬高比

                       當寬或高至少有一個尺寸被設置爲0dp時,可以通過屬性

                         layout_constraintDimensionRatio設置寬高比,

                  除此之外,在設置寬高比的值的時候,還可以在前面加W或H,分別指定寬度或高度限制。 例如:

                   app:layout_constraintDimensionRatio="H,2:3"指的是 高:寬=2:3

                   app:layout_constraintDimensionRatio="W,2:3"指的是 寬:高=2:3

 

                 5. Percent dimension

                   要使用Percent,您需要設置以下內容:

                  1.寬高設置爲MATCH_CONSTRAINT (0dp)

                   2.默認值應該設置爲% app:layout_constraintWidth_default="percent"或app:layout_constraintHeight_default="percent"

                    3.layout_constraintWidth_percent或layout_constraintHeight_percent屬性設置爲0到1之間的值

 

         3.7 Chains(鏈)

            Chains在單個軸(水平或垂直)中提供類似於組的行爲。另一個軸可以獨立約束。

            1.create chains

              如果一組控件通過雙向連接鏈接在一起,那麼它們就被認爲是一個鏈(如圖)

                 2.chains heads

                       鏈是由設置在鏈的第一個元素(鏈的“頭”)上的屬性控制的:如下圖

                       head是水平鏈最左邊的控件,垂直鏈最上面的控件

               3.margins in chains

                  如果在chains上指定了margins ,則會考慮到margins。在spread chains的情況下,margins 將從分配的空間中扣除。

                4.Chain Style

                  在第一個控件上設置屬性layout_constraintHorizontal_chainStyle或者layout_constraintVertical_chainStyle默認是值是                                  CHAIN_SPREAD

                  CHAIN_SPREAD:默認模式

                   Weighted chain:如果一些控件被設置爲MATCH_CONSTRAINT,它們將分割可用空間

                   CHAIN_SPREAD_INSIDE:chain的兩端不會被展開

                   CHAIN_PACKED:該鏈的控件將被打包在一起。子元素的水平或垂直偏差屬性將影響打包元素的位置

 

4.Virtual Helpers objects(輔助工具)

      4.1 Optimizer(計算優化)

     可以通過將設置: ConstraintLayout 屬性layout_optimizationLevel來進行計算優化

     取值:none : 無優化

     standard : 只優化直接約束和障礙約束

      direct : 優化直接約束

      barrier : 優化屏障約束

      chain : 優化鏈約束

      dimensions : 優化尺寸測量

   4.2 Barrier(屏障)

    

                        barrierDirection取值:BOTTOM  END  LEFT RIGHT  START

 

               4.3 Group

                   該類控制一組引用控件的可見性。控件通過添加到逗號分隔的id列表來引用

                       <androidx.constraintlayout.widget.Group
                             
android:layout_width="wrap_content"
                             
android:layout_height="wrap_content"
                             
android:visibility="visible"
                               
app:constraint_referenced_ids="TextView1,TextView2"
                              
/>

               4.4 GuideLine

                        Guildline像輔助線一樣,在預覽的時候幫助你完成佈局(不會顯示在界面上)。

                         Guildline的主要屬性:

                         android:orientation 垂直vertical,水平horizontal

                         layout_constraintGuide_begin 開始位置

                          layout_constraintGuide_end 結束位置

                         layout_constraintGuide_percent 距離頂部的百分比(orientation= horizontal時則爲距離左邊)

         <android.support.constraint.Guideline

                android:id="@+id/guideline1"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:orientation="horizontal"

                 app:layout_constraintGuide_begin="50dp" />



              <android.support.constraint.Guideline

                 android:id="@+id/guideline2"

                  android:layout_width="wrap_content"

                 android:layout_height="wrap_content"

                  android:orientation="vertical"

                 app:layout_constraintGuide_percent="0.5" />

 

                4.5 Placeholder

                     Placeholder指的是佔位符。在Placeholder中可使用setContent()設置另一個控件的id,使這個控件移動到佔位符的位置。          <android.support.constraint.Placeholder

              android:id="@+id/placeholder"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               app:content="@+id/textview"

               app:layout_constraintLeft_toLeftOf="parent"

               app:layout_constraintTop_toTopOf="parent" />



            <TextView

               android:id="@+id/textview"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:background="#cccccc"

                android:padding="16dp"

                 android:text="TextView"

               android:textColor="#000000"

               app:layout_constraintRight_toRightOf="parent"

               app:layout_constraintTop_toTopOf="parent" />

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章