TShopping

 找回密碼
 註冊
搜索
查看: 658|回復: 0

[教學] Android ConstraintLayout 基本介紹

[複製鏈接]
發表於 2020-7-17 15:05:55 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk  
ConstraintLayout為一個Support Library,可以用在Android2.3(API 9)以上的版本。
之前在設計畫面的時候都是使用LinearLayout或RelativeLayout,但有時候在比較複雜的畫面,我們疊太多層的Layout會耗比較多的資源,而ConstraintLayout將Layout平面化,減少資源浪費。

增加Library到Project
  1. dependencies {
  2.         compile 'com.android.support.constraint:constraint-layout:1.0.2'
  3.     }
複製代碼
介紹相對定位屬性
  • 元件設置在整個畫面的正中央

Android ConstraintLayout Margin LinearLayout Layout

Android ConstraintLayout Margin LinearLayout Layout



  1. <Button
  2.     android:text="Button"
  3.     android:layout_width="wrap_content"
  4.     android:layout_height="wrap_content"
  5.     android:id="@+id/button"
  6.     app:layout_constraintBottom_toBottomOf="parent"
  7.     app:layout_constraintRight_toRightOf="parent"
  8.     app:layout_constraintLeft_toLeftOf="parent"
  9.     app:layout_constraintTop_toTopOf="parent" >
複製代碼

元件在另一個元件的上方

Android ConstraintLayout Margin LinearLayout Layout

Android ConstraintLayout Margin LinearLayout Layout


  1. <Button
  2.     android:text="Button"
  3.     android:layout_width="wrap_content"
  4.     android:layout_height="wrap_content"
  5.     android:id="@+id/button2"
  6.     android:layout_marginBottom="48dp"
  7.     app:layout_constraintBottom_toTopOf="@+id/button"
  8.     app:layout_constraintRight_toRightOf="@+id/button"
  9.     app:layout_constraintLeft_toLeftOf="@+id/button">
複製代碼


  • layout_constraintBottom_toTopOf : 將button2的下方與button的上方做約束
  • layout_constraintRight_toRightOf : 將button2的右邊與button的右邊做約束
  • layout_constraintLeft_toLeftOf : 將button2的左邊與button的左邊做約束
    所以上面的屬性就都可以依此類推啦~
    例如:想要A元件在B元件的左邊就使用



  1. app:layout_constraintRight_toLeftOf = "@+id/B"
複製代碼
  • 所有相對定位屬性
    • layout_constraintBaseline_toBaselineOf
    • layout_constraintTop_toBottomOf
    • layout_constraintTop_toTopOf
    • layout_constraintBottom_toBottomOf
    • layout_constraintBottom_toTopOf
    • layout_constraintStart_toEndOf
    • layout_constraintStart_toStartOf
    • layout_constraintEnd_toEndOf
    • layout_constraintEnd_toStartOf
    • layout_constraintLeft_toLeftOf
    • layout_constraintLeft_toRightOf
    • layout_constraintRight_toLeftOf
    • layout_constraintRight_toRightOf

    Margin
    Margin的用法和LinearLayout、RelativeLayout的用法相同
    • layout_marginStart
    • layout_marginEnd
    • layout_marginLeft
    • layout_marginTop
    • layout_marginRight
    • layout_marginBottom
    而ConstraintLayout還有一些不一樣的Margin
    • app:layout_goneMarginBottom
    • app:layout_goneMarginEnd
    • app:layout_goneMarginLeft
    • app:layout_goneMarginRight
    • app:layout_goneMarginStart
    • app:layout_goneMarginTop
    goneMargin是在當被依賴的View被設置為Gone的時候所使用的Margin

Android ConstraintLayout Margin LinearLayout Layout

Android ConstraintLayout Margin LinearLayout Layout

文章出處



 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2020-12-3 04:46 , Processed in 0.060492 second(s), 24 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表