ConstrainLayout解決複雜的巢狀佈局
最近,專案比較忙,沒什麼時間寫部落格。
今天我要講的是,專案中複雜的巢狀佈局你講採取何種方式呢?如果按常規方式去做,估計你做完一個介面,估計夠嗆。我將推薦你們使用谷歌推出的ConstrainLayout,雖然還沒有出正式版本,但用於複雜巢狀佈局,能解決你很多問題。
首先你要在專案中依賴於compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
其次,你要明確,ConstrainLayout可能顛覆你以往寫佈局的方式,因為現在的一切你可能是直接在介面操作的。
1.建立一個ConstrainsLayout的xml檔案,你將看到直接可以查詢ConstrainLayout。
2.xml檔案的起始和結束
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。我就先演示一些基礎的東西,以後想到,再演示其他給大家。趕出來的東西,還有很多不足,以後我再完善。