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
ConstraintLayout
Search
Yuki Anzai
September 13, 2017
Technology
4
3.6k
ConstraintLayout
第8回 droid girls meetup「ConstraintLayout」
https://droidgirls.connpass.com/event/64089/
Yuki Anzai
September 13, 2017
Tweet
Share
More Decks by Yuki Anzai
See All by Yuki Anzai
AI ツールを活用したコードリーディング - Android の公式サンプル Now in Android のソースコードを読んでみよう - / Code reading with AI tools
yanzm
1
60
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
1.4k
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
240
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
yanzm
0
340
What’s new in Android development tools
yanzm
0
890
Google I/O 2025 Keynote & Developer Keynote Overview
yanzm
0
160
Coding Agent を使って Android アプリを作ってみる / Let's try using coding agent for Android app development
yanzm
0
180
MediaPipe と ML Kit ってどう ちがうの? / What is the difference between MediaPipe and ML Kit?
yanzm
0
1.3k
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
8
5.6k
Other Decks in Technology
See All in Technology
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
640
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
1.8k
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
850
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.9k
20251010_HCCJP_AdaptiveCloudUpdates
sdosamut
0
130
CoRL 2025 Survey
harukiabe
1
200
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
200
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
580
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
920
Git in Team
kawaguti
PRO
3
370
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
120
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
8
910
Six Lessons from altMBA
skipperchong
29
4k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Speed Design
sergeychernyshev
32
1.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Thoughts on Productivity
jonyablonski
70
4.9k
A designer walks into a library…
pauljervisheath
209
24k
Transcript
$POTUSBJOU-BZPVU ְׂ֮ײֹ!ESPJEHJSMTNFFUVQ
˖ CMPH:".ך꧟鎸䌘 ˖ ZBO[NCMPHTQPUDPN ˖ UXJUUFS!ZBO[Nװׂ ˖ V1IZDB*OD 吳䒭⠓爡ؐؿ؍ؕ
˖ (56((JSMTHUVHHJSMTKQ ˖ ESPJEHJSMTIUUQTESPJEHJSMTDPOOQBTTDPN ͋Μ͍͟Ώ͖
$POTUSBJOU-BZPVU ˖ "OESPJE4VQQPSU-JCSBSZך♧א ˖ 7JFX(SPVQ ˖ 3FMBUJWF-BZPVU넝堣腉ח׃䠬ׄ ˖ ⵖ秈$POTUSBJOUדꂁ縧㜥䨽寸
CVJMEHSBEMF ך鏣㹀 implementation 'com.android.support.constraint:constraint-layout:1.0.2' compile 'com.android.support.constraint:constraint-layout:1.0.2' HSBEMFY⟃꣬ HSBEMFY⟃
-BZPVU 9.- ח剅ֻ㜥さ <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
android:layout_height="match_parent"> … </android.support.constraint.ConstraintLayout>
倜׃ֻ -BZPVU 9.- ⡲㜥さ <'JMF></FX><-BZPVUSFTPVSDFMF> 3PPUFMFNFOUח BOESPJETVQQPSUDPOTUSBJOU$POTUSBJOU-BZPVU
ⵖ秈䭷㹀ׅ ˖ 㶨ؽُ٦חⵖ秈䭷㹀 ˖ ⵖ秈ח״ꂁ縧㜥䨽ָ寸ת app:layout_constraintXXXXXXX
NBUDI DPOTUSBJOU ˖ $POTUSBJOU-BZPVUך㶨ؽُ٦דכNBUDI@QBSFOU כ⢪זְ ˖ EQNBUDIDPOTUSBJOU ˖ ⵖ秈弫ׅ朐䡾ד剑䎢ָ
涫㜥➂暟 $POTUSBJOU-BZPVU $POTUSBJOU-BZPVUך㶨ؽُ٦ד ⡘縧寸״ֲה׃גְך $POTUSBJOU-BZPVUך➭ך㶨ؽُ٦ ! JEBODIPS
♳畭 $POTUSBJOU-BZPVU ח䲧ִ app:layout_constraintTop_toTopOf="parent" )FMMP
♴畭 $POTUSBJOU-BZPVU ח䲧ִ app:layout_constraintBottom_toBottomOf="parent" )FMMP
䊩畭 $POTUSBJOU-BZPVU ח䲧ִ app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintStart_toStartOf="parent" )FMMP
〸畭 $POTUSBJOU-BZPVU ח䲧ִ app:layout_constraintRight_toRightOf="parent" app:layout_constraintEnd_toEndOf="parent" )FMMP
♳♴ $POTUSBJOU-BZPVU ך⚥㣛ח䲧ִ app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" )FMMP
♳♴ך嫰䭷㹀ׅ app:layout_constraintVertical_bias="0.3" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" )FMMP
䊩〸 $POTUSBJOU-BZPVU ך⚥㣛ח䲧ִ app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP
䊩〸ך嫰䭷㹀ׅ app:layout_constraintHorizontal_bias="0.3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP
$POTUSBJOU-BZPVU ך⚥㣛ח䲧ִ app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP
♳♴ $POTUSBJOU-BZPVU ְםְח䎢־ android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" EQNBUDIDPOTUSBJOU )FMMP
䊩〸 $POTUSBJOU-BZPVU ְםְח䎢־ android:layout_width="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP EQNBUDIDPOTUSBJOU
$POTUSBJOU-BZPVU ְםְח䎢־ android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" )FMMP
NBUDI DPOTUSBJOU ךהֹך NBYJNVN TJ[F android:layout_width="0dp" android:layout_height="0dp" … app:layout_constraintWidth_max="300dp" app:layout_constraintHeight_max="100dp"
EQ EQ )FMMP
NBUDI DPOTUSBJOU ךהֹ XSBQ@DPOUFOU ך״ֲחׅ android:layout_width="0dp" android:layout_height="0dp" … app:layout_constraintWidth_default="wrap" app:layout_constraintHeight_default="wrap"
)FMMP
NBUDI DPOTUSBJOU XSBQ ךהֹך NJOJNVN TJ[F android:layout_width="0dp" android:layout_height="0dp" … app:layout_constraintWidth_min="100dp"
app:layout_constraintHeight_min="100dp" EQ EQ )FMMP
♳畭➭ך 7JFX ך♳畭ח䲧ִ app:layout_constraintTop_toTopOf="@id/anchor"
♳畭➭ך 7JFX ך♳畭ח䲧ִ app:layout_constraintTop_toTopOf="@id/anchor"
♳畭➭ך 7JFX ך♴畭ח䲧ִ app:layout_constraintTop_toBottomOf="@id/anchor"
♳畭➭ך 7JFX ך♴畭ח䲧ִ app:layout_constraintTop_toBottomOf="@id/anchor"
♴畭➭ך 7JFX ך♴畭ח䲧ִ app:layout_constraintBottom_toBottomOf="@id/anchor"
♴畭➭ך 7JFX ך♴畭ח䲧ִ app:layout_constraintBottom_toBottomOf="@id/anchor"
♴畭➭ך 7JFX ך♳畭ח䲧ִ app:layout_constraintBottom_toTopOf="@id/anchor"
♴畭➭ך 7JFX ך♳畭ח䲧ִ app:layout_constraintBottom_toTopOf="@id/anchor"
CBTFMJOF ➭ך 7JFX ך CBTFMJOF ח䲧ִ app:layout_constraintBaseline_toBaselineOf="@id/anchor" " "
䊩畭➭ך 7JFX ך䊩畭ח䲧ִ app:layout_constraintLeft_toLeftOf="@id/anchor" or app:layout_constraintStart_toStartOf="@id/anchor"
䊩畭➭ך 7JFX ך〸畭ח䲧ִ app:layout_constraintLeft_toRightOf="@id/anchor" or app:layout_constraintStart_toEndOf="@id/anchor"
〸畭➭ך 7JFX ך〸畭ח䲧ִ app:layout_constraintRight_toRightOf="@id/anchor" or app:layout_constraintEnd_toEndOf="@id/anchor"
〸畭➭ך 7JFX ך䊩畭ח䲧ִ app:layout_constraintRight_toLeftOf="@id/anchor" or app:layout_constraintEnd_toStartOf="@id/anchor"
♳♴➭ך 7JFX ך⚥㣛ח䲧ִ app:layout_constraintTop_toTopOf="@id/anchor" app:layout_constraintBottom_toBottomOf="@id/anchor"
䊩〸➭ך 7JFX ך⚥㣛ח䲧ִ app:layout_constraintLeft_toLeftOf="@id/anchor" app:layout_constraintRight_toRightOf="@id/anchor" or app:layout_constraintStart_toStartOf="@id/anchor" app:layout_constraintEnd_toEndOf="@id/anchor"
7JFX ך㣐ֹׁ嫰ד䭷㹀ׅ android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintDimensionRatio="h,2:1" or app:layout_constraintDimensionRatio="w,1:2"
(VJEFMJOF
HVJEFMJOF <android.support.constraint.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.5"/> app:layout_constraintGuide_begin="20dp" app:layout_constraintGuide_end="20dp"
HVJEFMJOF חさׇגꂁ縧ׅ android:layout_width="0dp" app:layout_constraintLeft_toRightOf="@id/guideline1" app:layout_constraintRight_toLeftOf="@id/guideline2" ! JEHVJEFMJOF ! JEHVJEFMJOF
HPOF NBSHJO
HPOF.BSHJO )FMMP )FMMP )FMMP android:layout_marginLeft="16dp" app:layout_constraintLeft_toRightOf="@id/anchor" app:layout_goneMarginLeft="0dp" BODIPSךWJTJCJMJUZHPOF ⵖ秈⯓ך7JFXךWJTJCJMJUZָHPOFהֹח⢪ NBHJO⦼
BODIPSךWJTJCJMJUZWJTJCMF EQ
$IBJO
DIBJO )FMMP )FMMP )FMMP ✼ְחⵖ秈׃֮גְ app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/view2" WJFX app:layout_constraintLeft_toRightOf="@+id/view1" app:layout_constraintRight_toLeftOf="@+id/view3"
WJFX app:layout_constraintLeft_toRightOf="@+id/view2" app:layout_constraintRight_toRightOf="parent" WJFX ! JEWJFX ! JEWJFX ! JEWJFX
DIBJO4UZMF )FMMP )FMMP )FMMP app:layout_constraintHorizontal_chainStyle="spread" )FMMP )FMMP )FMMP app:layout_constraintHorizontal_chainStyle="packed" )FMMP
)FMMP )FMMP app:layout_constraintHorizontal_chainStyle="spread_inside" WJFXח䭷㹀ׅ
DIBJO TQSFBE NBUDI DPOTUSBJOU )FMMP )FMMP )FMMP android:layout_width="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/view2"
app:layout_constraintHorizontal_chainStyle="spread" WJFX android:layout_width="0dp" app:layout_constraintLeft_toRightOf="@+id/view1" app:layout_constraintRight_toLeftOf="@+id/view3" WJFX android:layout_width="0dp" app:layout_constraintLeft_toRightOf="@+id/view2" app:layout_constraintRight_toRightOf="parent" WJFX
DIBJO TQSFBE NBUDI DPOTUSBJOU XFJHIU )FMMP )FMMP )FMMP android:layout_width="0dp" app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/view2" app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintHorizontal_weight="2" WJFX android:layout_width="0dp" app:layout_constraintLeft_toRightOf="@+id/view1" app:layout_constraintRight_toLeftOf="@+id/view3" app:layout_constraintHorizontal_weight="1" WJFX android:layout_width="0dp" app:layout_constraintLeft_toRightOf="@+id/view2" app:layout_constraintRight_toRightOf="parent" app:layout_constraintHorizontal_weight="1" WJFX
DIBJO QBDLFE CJBT app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/view2" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintHorizontal_bias="0.3" WJFX app:layout_constraintLeft_toRightOf="@+id/view1" app:layout_constraintRight_toLeftOf="@+id/view3"
WJFX app:layout_constraintLeft_toRightOf="@+id/view2" app:layout_constraintRight_toRightOf="parent" WJFX )FMMP )FMMP )FMMP