目錄
- 1.相對定位約束
- 2.居中和偏移約束
約束布局(ConstraintLayout)是當前Android Studio默認的布局方式,也是最靈活的一種布局方式。約束布局推薦使用所見即所得的模式進行布局,約束布局的大部分布局可以通過Design視圖完成,可以在布局文件的Design視圖中采用鼠標拖放操作結合屬性欄窗口設置完成約束布局的界面設計,大幅簡化布局代碼輸入和控件間位置關系的人為判斷。約束布局的屬性非常多,但是不需要強記,可以通過Design頁面來認識各種屬性。
早期的Android的相對布局(RelativeLayout)基本被約束布局所ConstraintLayout取代,ConstraintLayout使用起來比RelativeLayout更靈活,性能更出色。此外,ConstraintLayout可以按照比例約束控件位置和尺寸,能夠更好地適配屏幕大小不同的機型。
約束布局屬性主要可以分為:相對定位、邊距、居中和偏移、尺寸約束、鏈等。
1.相對定位約束
相對定位是控件對于另一個控件位置的約束,可以讓控件相對于其他控件或父控件進行布局,也可以設置控件相對于其他控件或父控件進行上下左右對齊。如圖1所示,被選中的TextView控件距離父控件上邊緣60dp,距離左邊的一個TextView右邊緣92dp。
圖1 相對定位示例
圖1的布局對應的代碼如下,其中android:layout_marginStart=“92dp"和app:layout_constraintStart_toEndOf=”@+id/textView6"用于設置該控件的左側距離textView6控件的右側92dp。android:layout_marginTop="60dp"和app:layout_constraintTop_toTopOf="parent"用于設置該控件的上側距離父窗體的上側60dp。
<TextViewandroid:id="@+id/textView8"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="92dp"app:layout_constraintStart_toEndOf="@+id/textView6"android:layout_marginTop="60dp"app:layout_constraintTop_toTopOf="parent"android:text="TextView" />
如圖2所示,被選中的控件分別與上方控件左對齊,與右邊的控件底對齊,同樣也確定了該控件的位置。一個控件在約束布局中要確定位置,至少要一個垂直方向的約束和一個水平方向的約束。在所有需要對齊的控件被選中的情況下,對齊也可以通過單擊Design視圖中的工具欄的對齊工具 來完成。
圖2 控件對齊示例
圖2中被選中控件的布局約束代碼如下,
<TextViewandroid:id="@+id/textView8"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView"app:layout_constraintBottom_toBottomOf="@+id/textView9"app:layout_constraintStart_toStartOf="@+id/textView10" />
app:layout_constraintBottom_toBottomOf=“@+id/textView9"用于設置該控件與textView9控件底部對齊,app:layout_constraintStart_toStartOf=”@+id/textView10"用于設置該控件與textView10控件的左邊對齊。
2.居中和偏移約束
居中可以通過設置距離為0dp來實現。如果需要將控件水平居中顯示,可以將控件水平方向的兩個約束設置為0。如果需要將控件垂直居中顯示,可以將控件垂直方向的兩個約束設置為0。如圖3所示,偏移則可以通過Attributes Layout區滑動圖中的滑條來實現。
圖3 居中偏移控制圖
<TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello World!"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.6"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" />
上述代碼對應的Layout預覽圖如圖4所示。其中app:layout_constraintHorizontal_bias用于設置偏移比例,默認為0.5,即中間位置;圖中設置為0.6,即控件位于布局寬度60%的位置。
圖4 居中偏移布局圖