1. 程式人生 > >Android開發 - 掌握ConstraintLayout(三)編輯器

Android開發 - 掌握ConstraintLayout(三)編輯器

too 其它 開始 cloud con activity end ons 按鈕

從本篇博客開始我們開始介紹如何使用ConstraintLayout。
既然ConstraintLayout叫約束布局,首先我們先介紹什麽叫約束(Constraints):

約束(Constraints)

一個約束表示View之間的"布局約束"關系,以及約束的位置,類似RelativeLayout的"相對"概念。

編輯器介紹

在工程中我們新建一個布局activity_main.xml,整個界面如下:

技術分享圖片

這是一個編輯器整體的界面,下面我們來介紹一些常用的功能:

  • 設計/文本視圖

技術分享圖片

左下角有視圖切換的選項,通過這個選項我們可以切換設計/(代碼)文本視圖,傳統在開發的過程中可能覺得設計視圖並不常用,但是在使用ConstraintLayout時它確實很強大,反而可能很少用代碼視圖了。

  • 設計/藍圖

技術分享圖片

這裏我們可以看到左上角的按鈕,這個是用來切換設計界面和藍圖界面的,通常我們需要兩個界面都展示,這樣我們可以更加清晰地看到各個View的約束。

  • 設備與分辨率適配

技術分享圖片

這個功能我們可以切換橫豎屏等UI的模式,這個功能也可以使我們方便的進行各種UI模式的適配。

技術分享圖片

在這裏我們可以預覽當前布局在不同的分辨率下的效果,這個功能在適配的時候非常方便,這裏提一下下面的Custom選項,這個功能允許我們將當前布局拖拽成任意的大小:

技術分享圖片

  • 自動約束

技術分享圖片

這個功能允許編輯器自動進行約束,當我們拖拽一個空間到視圖中後,編輯器會自動為我們創建一個約束,可能很多時候我們並不需要自動約束,我們可以點擊把它關閉。

  • 約束推斷

技術分享圖片

這個按鈕類似PS的魔棒,它的功能是進行約束的推斷,如圖我拖拽了兩個按鈕到布局中,一開始並沒有任何約束,當我點擊了這個按鈕後,自動為我生成了如圖的約束。

代碼視圖

我們切換到代碼視圖:

技術分享圖片

此時我們發現界面的哪些約束在代碼中也僅僅增加了幾行代碼,用來表示當前的約束,仔細觀察後我們發現其實都是toStartOf,toEndOf,toTopOf...,這些都是指定的當前View與其它View(或Parent)之間的關系,對比一下RelativeLayout,我們很容易就能明白。

如果當前沒有任何約束的時候,我們觀察代碼:

技術分享圖片

註意這些tools:xxx,只是表示View在編輯器的絕對位置,是用來我們設計(拖拽)時使用的。如果不添加約束,運行後只是顯示在屏幕的左上角,重疊在一起。

總結

本文我們主要講解了ConstraintLayout編輯器常用功能的使用。這些功能靈活且方便地幫助我們布局頁面。下一篇:Android開發 - 使用ConstraintLayout(四)創建基本約束我們將介紹使用基本的約束。

本文地址,如有更多疑問,請參考我的其它Android相關博客:我的博客地址

Android開發 - 掌握ConstraintLayout(三)編輯器