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
83
談談 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
7
使用 Kong 與 GitOps 來管理您企業的 API 呼叫 @ 2024 台灣雲端大會
j796160836
0
23
[AI / ML] 用 LLM (Large language model) 來整理您的知識庫 @ Devfest Taipei 2023
j796160836
0
68
[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
Regular Expressions, REXML, Automata Learning
makenowjust
0
210
GraphQL あるいは React における自律的なデータ取得について
quramy
11
2.8k
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
190
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
150
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
370
Swift Concurrencyとレースコンディション
objectiveaudio
1
400
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
190
New Order in Cascade Sorting Order
mugi_uno
3
2.6k
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
3k
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
150
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
350
REXML改善のその後
naitoh
0
180
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
In The Pink: A Labor of Love
frogandcode
139
22k
Rails Girls Zürich Keynote
gr2m
93
13k
GitHub's CSS Performance
jonrohan
1029
450k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Design by the Numbers
sachag
277
19k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
How to train your dragon (web standard)
notwaldorf
85
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