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
What’s new in Android development tools
yanzm
0
810
Google I/O 2025 Keynote & Developer Keynote Overview
yanzm
0
140
Coding Agent を使って Android アプリを作ってみる / Let's try using coding agent for Android app development
yanzm
0
160
MediaPipe と ML Kit ってどう ちがうの? / What is the difference between MediaPipe and ML Kit?
yanzm
0
1.2k
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
8
5.3k
Kotlinらしいコードを書こう - Convert Java File to Kotlin File のあとにやること / What to do after Convert Java File to Kotlin File
yanzm
1
5.7k
個人アプリ開発 (メンテナンス) 14年の歴史 / My personal app development history
yanzm
1
950
Material 3 やめました / Good-bye M3 design system
yanzm
4
8.8k
Compose Multiplatform で Bluesky のクライアント作ってみた / Bluesky client with Compose Multiplatform
yanzm
0
690
Other Decks in Technology
See All in Technology
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
210
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
150
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
1.1k
Claude Codeから我々が学ぶべきこと
s4yuba
6
1.7k
Findy Freelance 利用シーン別AI活用例
ness
0
290
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
390
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
190
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.5k
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
4
500
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
570
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
230
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
160
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Typedesign – Prime Four
hannesfritz
42
2.7k
Being A Developer After 40
akosma
90
590k
Why Our Code Smells
bkeepers
PRO
337
57k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Unsuck your backbone
ammeep
671
58k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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