1. 程式人生 > >使用ConstraintLayout構建響應式UI(Build a Responsive UI with ConstraintLayout)

使用ConstraintLayout構建響應式UI(Build a Responsive UI with ConstraintLayout)

垂直 邊緣 ddn style 元素 package ext tle font

原文:https://weiyf.cn/2017/03/10/Build%20a%20Responsive%20UI%20with%20ConstraintLayout/

原文:http://www.jianshu.com/p/f61227a2775f

簡介:

ConstraintLayout不需要使用嵌套布局就可以讓我們去構建一個大而復雜的布局,他與RelativeLayout很相似,所有在裏面的View的布局方式取決於View與View之間的關系和父布局。但是他比RelativeLayout更靈活,並且在Android Studio‘s Layout Editor中可以很容易的去使用。

ConstraintLayout的所有工作都可以使用布局編輯器的可視化工具中完成,因為布局API和布局編輯器對此專門構建的。因此你可以完全通過拖拽的方式去構建一個使用了ConstraintLayout的布局,而不用直接在XML中編輯。

ConstraintLayout可在兼容Android 2.3(API level 9)及更高版本的API庫中使用。本頁提供了再Android Sutdio2.3或更高版本中使用ConstraintLayout構建布局的指南。

如果你想了解有關布局編輯器本身的更多信息,請參閱Android Studio指南使用布局編輯器構建UI。

要查看使用ConstraintLayout創建的各種布局,請查看GitHub上的約束布局示例項目

約束布局概述(Constraints overview)

要在ConstraintLayout中定義view的位置,你必須為view至少添加一個水平和垂直的約束。

每一個約束表示到另一個view,父布局,或者不可見的參考線(後面會講到“參考線”的概念)的連接或者對齊。每一個約束都定義了View在水平或垂直方向的位置。因此View與每一個軸線(即垂直和水平方向)都至少應該有一個約束。

當你拖動一個view到布局編輯器中,它會停留在你放開它的地方,即使它沒有任何約束。然而,這只是為了更容易編輯;如果當你在設備上運行你的布局時,一個view沒有任何約束,則會在位置【0, 0】(左上角)繪制它。

在圖1,在布局編輯器上看起來不錯,但是在view C上沒有垂直約束。當這個布局在設備上繪制的時候,view C與view A的左邊緣和右邊緣水平對齊,但它會出現在屏幕的頂部,因為它沒有垂直約束。

技術分享 圖1.編輯器顯示A下面的view C,但沒有垂直約束 技術分享 圖2.view C現在垂直限制在view A下方 即使是缺少了約束也不會造成編譯錯誤,布局編輯器將會在工具欄上顯示有一個缺少約束的錯誤,如果想去看這些錯誤和其他警告請點擊Show Warnings and Errors(如下圖)。為了幫助我們去避免出現缺少約束的錯誤,布局編輯器的Auto connect and infer constraints(如果沒有開啟,則需要我們去開啟,下圖工具欄第二排的第二個和第四個圖標對應這兩個功能)將會自動加約束。 技術分享

將ConstraintLayout添加到您的項目(Add ConstraintLayout to your project)

要在你的項目中使用ConstraintLayout,操作如下:

確認你擁有最新版本的Constraint Layout庫。

  1. 點擊 Tools > Android > SDK Manager。
  2. 點擊 SDK Tools 選項卡。
  3. 展開 Support Repository 然後勾選 ConstraintLayout For Android 和 Solver for ConstraintLayout。選中 Show Package Details 並記下你要下載的版本。(下面步驟需要)。
  4. 點擊OK。
  5. 將該庫作為依賴關系添加到模塊機的build.gradle文件中:

    dependencies {
      compile ‘com.android.support.constraint:constraint-layout:1.0.1‘
    }

    你下載的庫版本可能會更高,因此請確保此處指定的值與你第3步中的版本相匹配

  6. 在工具欄或者同步通知中,點擊 Sync Project with Gradle Files。

現在你已經準備好實用ConstraintLayout來構建布局了。

轉換已經存在的布局成ConstraintLayout

  1. 打開你的布局文件,切換到Design tab
  2. 在Component Tree窗體中,右擊布局文件,然後點擊Convert layout to ConstraintLayout(如下圖)。
    技術分享

四、創建一個新的布局

    1. 新建一個布局文件
    2. 輸入布局文件的名字,將布局的根元素改為android.support.constraint.ConstraintLayout
    3. 最後點擊完成

使用ConstraintLayout構建響應式UI(Build a Responsive UI with ConstraintLayout)