or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Do you want to remove this version name and description?
Syncing
xxxxxxxxxx
tags:
android
,compose
,constraintLayout
title: [Compose 系列 - 3] Compose UI - ConstraintLayout
[Compose 系列 - 3] Compose UI - ConstraintLayout
前言
前面介紹了基本的 Layout:
前面的Layout, 僅能提供間單的佈局位置. 而ConstraintLayout 提供 相對位置 / 百分比例 的方法進行佈局, 從而讓佈局更容易進行.
Gradle
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →由於還在
alpha/beta
階段需注意其他相關的
compose
版本是否跑起來沒問題自行斟酌版本號的使用
Usage
用法跟之前的Constraint 差不多:
Ex:
假設我希望有一個
button
, 下方要有一個text
. 除了使用Column
也可以用以下的方式又或者透過ConstraintSet, 先進行關係的聯繫, 在賦予對應component id:
畫面是長一樣的~
GuideLine
使用者可以創建一條輔助線, 僅提供幫助進行建構畫面, 實際上在繪畫階段時並不會進行繪製.
ConstraintLayoutBaseScope
底下, 有createGuidelineFromXXX()
可以創建Ex:
Barrier
類似於GuideLine 的效果, 差別在於他是可隨著條件進行變動的 GuideLine.
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →ConstraintLayout-Barrier 介紹
用法同上,
createXXXBarrier()
Chains
直接上code:
小記
基本的佈局皆以介紹~
但我想大家應該會很好奇,
RecyclerLayout
/ViewPager
/ … 其他常用的 Layout, 在compose 裡要怎麼用呢?延伸閱讀
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →環境配置
1.0.0-beta07
1.4.32
7.0.0-beta03