2 Constraint Layout Android Studio 2 2 Linear

靜宜大學資管系 楊子青 2 Constraint. Layout • Android Studio 2. 2推出的版面配置 – 使用Linear. Layout與Relative. Layout， 能夠實作出大部份的版面 • 缺點：Layout層級太多會造成設計更動上 的困擾，取用元件時也較耗費資源 – Constraint. Layout主要目的：將複雜的 版面設計之層級，變為扁平化 – A Constraint. Layout is a View. Group which allows you to position and size widgets in a flexible way.

靜宜大學資管系 楊子青 4 專案：Constraint. Layout • 選擇Empty Activity • 版面配置：保留Constraint. Layout – Text. View：刪掉 – button：id為@+id/btn. A，text為A

靜宜大學資管系 楊子青 8 查看XML <Button android: id="@+id/btn. A" android: layout_width="wrap_content" android: layout_height="wrap_content" 我的左邊，對齊parent的左邊 android: layout_margin. Start="92 dp" android: layout_margin. Top="88 dp" android: text="A" app: layout_constraint. Start_to. Start. Of="parent" app: layout_constraint. Top_to. Top. Of="parent" /> 我的上面，對齊parent的上面 左 上 下 右

靜宜大學資管系 楊子青 9 2. 水平置中(加入右邊限制關係，並 刪掉左邊邊界) <Button android: id="@+id/btn. A" android: layout_width="wrap_content" android: layout_height="wrap_content" 刪掉左邊邊界 android: layout_margin. Start android: layout_margin. Top="88 dp" android: text="A" app: layout_constraint. End_to. End. Of="parent" app: layout_constraint. Start_to. Start. Of="parent" app: layout_constraint. Top_to. Top. Of="parent" />

靜宜大學資管系 楊子青 10 Bias(偏移，決定空白分配比例) <Button android: id="@+id/btn. A" android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_margin. Top="88 dp" android: text="A" app: layout_constraint. End_to. End. Of="parent" app: layout_constraint. Start_to. Start. Of="parent" app: layout_constraint. Top_to. Top. Of="parent" app: layout_constraint. Horizontal_bias="0. 3" />

靜宜大學資管系 楊子青 12 查看水平導覽線的XML <android. support. constraint. Guideline android: id="@+id/guideline" android: layout_width="wrap_content" android: layout_height="wrap_content" android: orientation="horizontal" app: layout_constraint. Guide_begin="255 dp" /> 刪掉最後一行，改用比例看看： app: layout_constraint. Guide_percent="0. 4"

靜宜大學資管系 楊子青 13 讓按鈕A對齊導覽線 先將導覽線的id設為： @+id/g 1 再修改按鈕A的上方參考的元件 <Button android: id="@+id/btn. A" android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_margin. Top="88 dp" android: text="A" app: layout_constraint. End_to. End. Of="parent" app: layout_constraint. Horizontal_bias="0. 3" app: layout_constraint. Start_to. Start. Of="parent" app: layout_constraint. Top_to. Top. Of="@+id/g 1" />

靜宜大學資管系 楊子青 14 4. 加入按鈕B，並設定與按鈕A關係 <Button android: id="@+id/btn. B" android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_margin. Start="20 dp" android: text="B" app: layout_constraint. Start_to. End. Of="@+id/btn. A" app: layout_constraint. Top_to. Top. Of="@+id/btn. A" /> 隨意拖曳A按鈕 B會跟著A移動！

靜宜大學資管系 楊子青 16 將A與B按鈕Chains在一起 A按鈕 <Button android: id="@+id/btn. A" android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_margin. Top="92 dp" android: text="A" app: layout_constraint. Top_to. Top. Of="@+id/g 1" app: layout_constraint. Start_to. Start. Of="parent" app: layout_constraint. End_to. Start. Of="@+id/btn. B"/> B按鈕 <Button android: id="@+id/btn. B" android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="B" app: layout_constraint. Top_to. Top. Of="@+id/btn. A" app: layout_constraint. End_to. End. Of="parent" app: layout_constraint. Start_to. End. Of="@+id/btn. A"/>

靜宜大學資管系 楊子青 18 為按鈕A加入Chain Style app: layout_constraint. Horizontal_chain. Style="spread_inside" 如果是"spread" 如果是"packed"

靜宜大學資管系 楊子青 19 參考資料 • Constraint. Layout – https: //developer. android. com/reference/android/support/ constraint/Constraint. Layout. html • 【 Android 中文開放式課程 】Constraint. Layout 約束佈局 for Android Studio 3 – http: //tw-hkt. blogspot. tw/2017/11/constraintlayout. html? m=1