Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
談談 Android constraint layout
Search
Johnny Sung
July 01, 2019
Programming
0
110
談談 Android constraint layout
談談 Android layout 系統與 ConstraintLayout
Johnny Sung
July 01, 2019
Tweet
Share
More Decks by Johnny Sung
See All by Johnny Sung
[GDG Build with AI] 善用現代 AI 科技:打造專屬行銷工具箱 @ GDG Changhua 彰化
j796160836
0
8
Kubernetes 地端自建 v.s. GKE,哪個更適合你? @Devfest Taipei 2024
j796160836
0
41
地端自建 Kubernetes (K8s) 小宇宙 (On-premises Kubernetes) @ CNTUG 2024/11 Meetup #63
j796160836
0
22
[AI LLM] Gemma 初體驗 @ GDG Cloud Taipei Meetup #70
j796160836
0
19
ArgoCD 的雷 碰過的人就知道 @TSMC IT Community Meetup #4
j796160836
0
69
使用 Kong 與 GitOps 來管理您企業的 API 呼叫 @ 2024 台灣雲端大會
j796160836
0
61
[AI / ML] 用 LLM (Large language model) 來整理您的知識庫 @ Devfest Taipei 2023
j796160836
0
190
[Flutter] Flutter Provider 看似簡單卻又不簡單的狀態管理工具
j796160836
0
34
[Golang] 以 Mobile App 工程師視角,帶你進入 Golang 的世界 (Introduction of GoLang)
j796160836
0
57
Other Decks in Programming
See All in Programming
Language Server と喋ろう – TSKaigi 2025
pizzacat83
2
470
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.3k
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
270
Cloudflare Workersで進めるリモートMCP活用
syumai
13
1.8k
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
150
私のRubyKaigi 2025 Kaigi Effect / My RubyKaigi 2025 Kaigi Effect
chobishiba
1
200
“技術カンファレンスで何か変わる?” ──RubyKaigi後の自分とチームを振り返る
ssagara00
0
200
LRパーサーはいいぞ
ydah
7
1.5k
VibeCoding時代のエンジニアリング
daisuketakeda
0
300
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
seike460
PRO
2
670
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
1.6k
データと事例で振り返るDevin導入の"リアル" / The Realities of Devin Reflected in Data and Case Studies
rkaga
3
3.3k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
730
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
180
53k
4 Signs Your Business is Dying
shpigford
183
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
450
Optimizing for Happiness
mojombo
378
70k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
How STYLIGHT went responsive
nonsquared
100
5.6k
Transcript
ႇႇ$POTUSBJOU-BZPVU Johnny Sung
+0)//:46/( Mobile Device developer https://fb.com/j796160836 https://blog.jks.coffee/ https://www.slideshare.net/j796160836 https://github.com/j796160836
-":065 • LinearLayout • FrameLayout • RelativeLayout • ConstraintLayout
-*/&"3-":065 線性布局 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <View android:layout_width="match_parent" android:layout_height="wrap_content"/> <View
android:layout_width="match_parent" android:layout_height="wrap_content"/> <View android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout>
<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="150sp" android:text="T"/> <TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textSize="200sp" android:text="A"/> </FrameLayout> '3".&-":065 框架布局
3&-"5*7&-":065 相對布局 http://fiend1120.pixnet.net/blog/post/191809863 android:layout_above 將此元件置於"指定元件"(使⽤用元件id指定)上⽅方. android:layout_below 將此元件置於"指定元件"(使⽤用元件id指定)下⽅方. android:layout_toLeftOf 將此元件置於"指定元件"(使⽤用元件id指定)左⽅方. android:layout_toRightOf
將此元件置於"指定元件"(使⽤用元件id指定)右⽅方.
3&-"5*7&-":065 相對布局 http://fiend1120.pixnet.net/blog/post/191809863 android:layout_alignParentTop 將此元件對⿑齊於佈局畫⾯面上邊線 android:layout_alignParentRight 將此元件對⿑齊於佈局畫⾯面右邊線 android:layout_alignParentLeft 將此元件對⿑齊於佈局畫⾯面左邊線 android:layout_alignParentBottom
將此元件對⿑齊於佈局畫⾯面底線 android:layout_centerHorizontal 將該元件⽔水平居中於整個布局畫⾯面 android:layout_centerVertical 將該元件垂直居中於整個布局畫⾯面 android:layout_centerInParent 將該元件⽔水平及垂直均居中於整個布局畫⾯面
3&-"5*7&-":065 相對布局 <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/view1" android:layout_width="match_parent" android:layout_height="wrap_content"/> <View
android:id="@+id/view2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/view1"/> <View android:id="@+id/view3" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/view2"/> </RelativeLayout>
A ConstraintLayout is a ViewGroup which allows you to position
and size widgets in a flexible way.
*/45"--"5*0/ dependencies { // ... implementation 'com.android.support.constraint:constraint-layout:1.1.3' } Add constraint-layout
to gradle 安裝
-":0651"3".4 佈局參參數 • app:layout_constraintLeft_toLeftOf • app:layout_constraintStart_toStartOf • app:layout_constraintRight_toRightOf • app:layout_constraintEnd_toEndOf
• app:layout_constraintTop_toTopOf • app:layout_constraintBottom_toBottomOf • ...
• layout_constraintLeft_toLeftOf • layout_constraintLeft_toRightOf • layout_constraintRight_toLeftOf • layout_constraintRight_toRightOf • layout_constraintTop_toTopOf
• layout_constraintTop_toBottomOf • layout_constraintBottom_toTopOf -":0651"3".4 佈局參參數 • layout_constraintBottom_toBottomOf • layout_constraintBaseline_toBaselineOf • layout_constraintStart_toEndOf • layout_constraintStart_toStartOf • layout_constraintEnd_toStartOf • layout_constraintEnd_toEndOf
語法格式 (⾃自⼰己) 的 (⽅方位) 在 (⽬目標) 的 (⽅方位)
(⾃自⼰己) 的上⽅方在⽗父親的上⽅方 語法格式 app:layout_constraintTop_toTopOf="parent" 靠上
-":0651"3".4 佈局參參數 android:layout_alignParentLeft="true" android:layout_alignParentStart="true" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintEnd_toEndOf="parent" android:layout_alignParentRight="true" android:layout_alignParentEnd="true"
3&-"5*7&-":065 $0/453"*/5-":065
-":0651"3".4 佈局參參數 android:layout_alignParentTop="true" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_alignParentBottom="true" 3&-"5*7&-":065 $0/453"*/5-":065
-":0651"3".4 佈局參參數 android:layout_centerVertical="true" android:layout_width="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent" android:layout_centerHorizontal="true" 3&-"5*7&-":065 $0/453"*/5-":065
-":0651"3".4 佈局參參數 android:layout_toLeftOf="@id/viewA" android:layout_toStartOf="@+id/viewA" app:layout_constraintRight_toLeftOf="@id/viewA" app:layout_constraintEnd_toStartOf="@id/viewA" app:layout_constraintLeft_toRightOf="@id/viewA" app:layout_constraintStart_toEndOf="@id/viewA" android:layout_toRightOf="@id/viewA" android:layout_toEndOf="@id/viewA"
3&-"5*7&-":065 $0/453"*/5-":065 A A (在...的左邊) (在...的右邊) (在...的左邊) (在...的右邊) A A
-":0651"3".4 佈局參參數 android:layout_below="@+id/viewA" app:layout_constraintTop_toBottomOf="@id/view" app:layout_constraintBottom_toTopOf="@id/viewA" android:layout_above="@id/viewA" 3&-"5*7&-":065 $0/453"*/5-":065 A A
A A (在...的下⽅方) (在...的上⽅方) (在...的下⽅方) (在...的上⽅方)
• android:layout_marginStart • android:layout_marginEnd • android:layout_marginLeft • android:layout_marginTop • android:layout_marginRight
• android:layout_marginBottom • layout_goneMarginStart • layout_goneMarginEnd • layout_goneMarginLeft • layout_goneMarginTop • layout_goneMarginRight • layout_goneMarginBottom ."3(*/4 間距參參數
• MATCH_PARENT ❌ • Specific dimension 指定數字(例例如: 25dp ) •
WRAP_CONTENT • 0dp (MATCH_CONSTRAINT)
$)*"/*/(
None
None
• layout_constraintHorizontal_bias • layout_constraintVertical_bias #*"4 偏移度
<android.support.constraint.Guideline android:id="@+id/guideline_hoz_center" android:layout_width="0dp" android:layout_height="0dp" android:orientation="vertical" app:layout_constraintGuide_percent="0.3" /> (6*%&-*/& 參參考線
%&.0
https://developer.android.com/reference/android/support/constraint/ConstraintLayout https://blog.csdn.net/guolin_blog/article/details/53122387 https://medium.com/verybuy-dev/android- %E8%A3%A1%E7%9A%84%E7%B4%84%E6%9D%9F%E6%80%96%E5%B1%80- constraintlayout-6225227945ab https://constraintlayout.com/ 3&'&3&/$&4 參參考資料 http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2017/1019/8618.html
26&45*0/4