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
85
談談 Android constraint layout
談談 Android layout 系統與 ConstraintLayout
Johnny Sung
July 01, 2019
Tweet
Share
More Decks by Johnny Sung
See All by Johnny Sung
ArgoCD 的雷 碰過的人就知道 @TSMC IT Community Meetup #4
j796160836
0
9
使用 Kong 與 GitOps 來管理您企業的 API 呼叫 @ 2024 台灣雲端大會
j796160836
0
23
[AI / ML] 用 LLM (Large language model) 來整理您的知識庫 @ Devfest Taipei 2023
j796160836
0
69
[Flutter] Flutter Provider 看似簡單卻又不簡單的狀態管理工具
j796160836
0
12
[Golang] 以 Mobile App 工程師視角,帶你進入 Golang 的世界 (Introduction of GoLang)
j796160836
0
20
[Flutter] 來體驗 bloc 小方塊的神奇魔法 @Devfest 2022
j796160836
0
210
與 Sign in with Apple 的愛恨情仇 @ iPlayground2020
j796160836
3
14k
Flutter 是什麼?用 Flutter 會省到時間嗎? @ GDG Devfest2020
j796160836
1
1.1k
炎炎夏日學 Android 課程 - Part3: Android app 實作
j796160836
0
63
Other Decks in Programming
See All in Programming
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
150
XStateでReactに秩序を与えたい
gizm000
0
730
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
910
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
840
REXML改善のその後
naitoh
0
190
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
Rubyのobject_id
qnighy
6
1.3k
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Design by the Numbers
sachag
277
19k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
A designer walks into a library…
pauljervisheath
201
24k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
The Language of Interfaces
destraynor
153
23k
Into the Great Unknown - MozCon
thekraken
29
1.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Web development in the modern age
philhawksworth
205
10k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Web Components: a chance to create the future
zenorocha
309
42k
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