1. 程式人生 > >ConstrainLayout解決複雜的巢狀佈局

ConstrainLayout解決複雜的巢狀佈局

       最近,專案比較忙,沒什麼時間寫部落格。

       今天我要講的是,專案中複雜的巢狀佈局你講採取何種方式呢?如果按常規方式去做,估計你做完一個介面,估計夠嗆。我將推薦你們使用谷歌推出的ConstrainLayout,雖然還沒有出正式版本,但用於複雜巢狀佈局,能解決你很多問題。

       首先你要在專案中依賴於compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'

,很明顯你能看到beta版本,這就是谷歌對外發布的測試版本,他就是要通過公測,收集各項反饋意見。以往我們覺得寫佈局是最沒有技術含量,是因為佈局太過於簡單。現在我們就來玩玩ConstraintLayout。

       其次,你要明確,ConstrainLayout可能顛覆你以往寫佈局的方式,因為現在的一切你可能是直接在介面操作的。

       1.建立一個ConstrainsLayout的xml檔案,你將看到直接可以查詢ConstrainLayout。

     2.xml檔案的起始和結束

<android.support.constraint.ConstraintLayout

    xmlns:android=" http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.constraint.ConstraintLayout>

    3.當你看不到佈局欄目紅圈的內容,請注意在圖片右下角,你要把它點擊出來


    4.以前我們寫佈局,直接巢狀在LinearLayout或者RelativeLayout中,直接的約束條件就是layout_width和layout_height。但是,ConstrainLayout並不是這樣子,他是通過你在佈局介面
拖動控制元件,然後手動給他新增約束。因為不知道你到底要講控制元件放置在哪裡。如下圖
 

我們可以看出,控制元件我們必須給它束縛左上右下,如果我們不這樣子,控制元件就會預設跳到左上角,因為它不知道哪個地方屬於它的。通過我們確認束縛它幾個方向後,我們就可以去拖動,把它拖到你想要放置的位置。

5.接下來講講如何刪除束縛,就是我們給他四個方向添加了束縛後,我們不要了,如何取消。總共有三種辦法。

第一種,將滑鼠放置在空間上,四個方向上分辨有紅色圓圈,點選一個消除一個方向上的束縛


第二種,將滑鼠放置在控制元件上出現一個帶X的圖示,點選它,自動清除該控制元件上的所有束縛


第三種,點選欄目上帶有X的圖示,自動清除所有束縛

6.接下來講講比較重要的輔助線,分為水平和處置,能很好針對巢狀佈局

因為我們不可能每次通過螢幕四個邊去束縛控制元件,這樣長距離拖動它,心太累了。所以,有這兩個輔助線,實在很方便。注意拖動水平或者垂直線,它都會動態有一個相對於X軸和Y軸的距離值,這樣我們就很清楚佈局中,我們該把控制元件放置在哪個位置上。

第一種,垂直

第二種,水平

這裡有個注意點,如果在巢狀佈局中,這個兩根輔助線不可以隨意刪除,這樣控制元件就會少去一個或多個方向上的束縛,程式碼將會報紅,有error。

7.各種束縛和輔助還有刪除都講了,現在應該講講巢狀佈局中,如何去定義這個控制元件的大小和放置位置了,這個就是properties了,你應該注意到右邊這塊區域

第一,我們可以不用在佈局中拖動上下左右,這裡,我們便可以去操作


第二,你應該注意到properites中,這個控制元件四個方向上都有一個16,那是預設束縛該控制元件相對於一個方向上的距離,當我們將控制元件拖動到邊邊,我們發現一直拖不到邊,一直有一點距離,那是因為這個properties束縛了它。

注意控制元件四個方向相對於邊的束縛距離,我們可以選擇也可以去定義。

第三,我們在這裡可以修改控制元件的寬高還有名字,這裡我就不演示了。

          最近專案比較忙,這篇文章也是抽時間出來寫得,還有很多東西寫不完善,因為這篇文章我儲存到草稿箱很多次了,強迫症的我,要求我必須趕完發表一篇關於ConstrointLayout。我就先演示一些基礎的東西,以後想到,再演示其他給大家。趕出來的東西,還有很多不足,以後我再完善。