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
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
180
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
yanzm
0
270
What’s new in Android development tools
yanzm
0
840
Google I/O 2025 Keynote & Developer Keynote Overview
yanzm
0
150
Coding Agent を使って Android アプリを作ってみる / Let's try using coding agent for Android app development
yanzm
0
170
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.4k
Kotlinらしいコードを書こう - Convert Java File to Kotlin File のあとにやること / What to do after Convert Java File to Kotlin File
yanzm
1
5.8k
個人アプリ開発 (メンテナンス) 14年の歴史 / My personal app development history
yanzm
1
960
Other Decks in Technology
See All in Technology
浸透しなさいRFC 5322&7208
hinono
0
120
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
2
140
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
130
事業価値と Engineering
recruitengineers
PRO
1
190
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.1k
Goでマークダウンの独自記法を実装する
lag129
0
210
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
oracle4engineer
PRO
2
140
モダンフロントエンド 開発研修
recruitengineers
PRO
2
260
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
TypeScript入門
recruitengineers
PRO
8
1.5k
知られざるprops命名の慣習 アクション編
uhyo
10
2.4k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Invisible Side of Design
smashingmag
301
51k
The Cult of Friendly URLs
andyhume
79
6.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
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