ConstraintLayoutをもうちょっと深く知ってみる

Slide 1

Slide 1 text

$POTUSBJOU-BZPVU׾ ׮ֲ㼰׃帾ֻ濼׏ג׫׷ UBLBIJSPN

Slide 2

Slide 2 text

˖ "OESPJEָ㥨ֹ ˖ UBLBIJSPNהְֲせ⵸ד  2JJUBהַ׮剅ְגְ׷ךד  ״׹׃ֶֻ격ְ׃תׅ 荈䊹稱➜

Slide 3

Slide 3 text

˖ (PPHMF*0،فٔך،صً٦ءّٝ ˖ $POTUSBJOU-BZPVUד㹋鄲ׁ׸גְ׷׵׃ ְ ˖ װ׏ג׫׋ְ ֹ׏ַֽ

Slide 4

Slide 4 text

˖ $POTUSBJOU ⵖ秈 ׾⢪׏׋ٖ؎،ؐز ˖ ؿٓحزזٖ؎،ؐزחדֹ׷ ˖ ٖ؎،ؐزؒر؍ةה鸬䵿ׅ׷ ˖ "OESPJE4UVEJPךرؿٕؓز ˖ זו ְְהֿ׹ְ׏םְ֮׷ $POTUSBJOU-BZPVUהכ

Slide 5

Slide 5 text

˖ ֿ׸תד׍׳׏ה׃׋ٖ؎،ؐزכ⡲׏׋ֿהָ ֮׷ֽוծ  ׍ׯ׿ה锃ץ׋ֿהכזְ➂ぢֽ ˖ 荈ⴓָ锃ץג׫גծ锃ץ׷תדח濼׵זַ׏׋ֿ ה׾⚥䗰ח稱➜ ˖ 2JJUBח׮ⰕꟚ׃גְ׷ךד׫גֻ׌ְׁ ˖ ջ$POTUSBJOU-BZPVU׾׮ֲ㼰׃帾ֻ濼׏ג׫׷ռ ➙傈鑧׃׋ְֿה

Slide 6

Slide 6 text

㛇劤涸זהֿ׹ ֿ׸ָ䠐㄂ׅ׷הֿ׹כ

Slide 7

Slide 7 text

㛇劤涸זהֿ׹

Slide 8

Slide 8 text

$POTUSBJOU-BZPVUYדך堣腉  ♧鿇 ˖ #JBT ˖ $IBJO ˖ (VJEF-JOF ˖ $POTUSBJOU4FU ˖ (0/&ךהֹך䮙⹛חאְג

Slide 9

Slide 9 text

#JBT ˖ YFEַXSBQ@DPOUFOU ךהֹח鏣㹀〳腉 ˖ 㞮歲简ַ׵ו׸ּ׵ְ ꨄ׸גְ׷ַ׾ⵖ䖴

Slide 10

Slide 10 text

$POTUSBJOU4FU׾⢪׏ג  #JBT׾㢌刿 ConstraintSetΛ࢖͏͜ͱͰ ConstraintLayoutͷϓϩύςΟΛ  มߋ͢Δ͜ͱ͕Ͱ͖Δ(ޙड़)

Slide 11

Slide 11 text

#JBT ˖ 兛媮ך䊩㺔ׇד׮ծ  歗꬗ָ杞ֻז׏׋הֹךو٦آٝ׮然⥂דֹ׷

Slide 12

Slide 12 text

$POTUSBJOU-BZPVUYדך堣腉  ♧鿇 ˖ #JBT ˖ $IBJO ˖ (VJEF-JOF ˖ $POTUSBJOU4FU ˖ (0/&ךהֹך䮙⹛חאְג

Slide 13

Slide 13 text

$IBJO ˖ ➭ך7JFXה㣐ֹׁ׾侭ִ׷  ״ֲז䕎דךٖ؎،ؐزָ  〳腉 ˖ 㛇劤כ̒ך⹛歗ך乼⡲ד0,

Slide 14

Slide 14 text

$IBJO ˖ $IBJO4UZMFהְֲ銲稆׾ $)"*/@413&"%  $)"*/@413&"%@*/4*%&  $)"*/@1"$,&%ה  ⴖ׶剏ִגְ׷ ⟃♴ך״ֲז䕎דYNMד鎸鶢ׁ׸׷ app:layout_constraintHorizontal_chainStyle="spread_inside"

Slide 15

Slide 15 text

$IBJOXFJHIU -JOFBS-BZPVUדֶזׄ׫ךXFJHIU׮⢪ִ׷ ח׃גְ׷ ཁૉΛmatch constraint(0dp)ʹͨ͠ঢ়ଶͰ app:layout_constraintHorizontal_weight="1"

Slide 16

Slide 16 text

$POTUSBJOU-BZPVUYדך堣腉  ♧鿇 ˖ #JBT ˖ $IBJO ˖ (VJEF-JOF ˖ $POTUSBJOU4FU ˖ (0/&ךהֹך䮙⹛חאְג

Slide 17

Slide 17 text

(VJEF-JOF ˖ رؠ؎ٝ♳ד㛇彊הז׷简׾䒷ֽגծ  ׉ַֿ׵7JFX׾ꂁ縧דֹ׷ ˖ EQ䭷㹀׌ֽדזֻךⶴさד׮䭷㹀דֹ׷ ⚵ְהֿ׹׾䬃ׅהⴖ׶剏ִדֹ׷ app:layout_constraintGuide_percent="0.5"

Slide 18

Slide 18 text

$POTUSBJOU-BZPVUYדך堣腉  ♧鿇 ˖ #JBT ˖ $IBJO ˖ (VJEF-JOF ˖ $POTUSBJOU4FU ˖ (0/&ךהֹך䮙⹛חאְג

Slide 19

Slide 19 text

$POTUSBJOU4FU ϓϩάϥϜ͔ΒConstraintΛઃఆ͢ΔͨΊͷΫϥε LayoutParamsͱͷҧ͍͸ɺ  શͯͷViewͷConstraintΛऔಘɺมߋɺ൓өͰ͖Δ

Slide 20

Slide 20 text

$POTUSBJOU4FU ➙֮׷$POTUSBJOU-BZPVUַ׵$POTUSBJOU4FU׾《䖤 val constraintSet = ConstraintSet() constraintSet.clone(constraintLayout)

Slide 21

Slide 21 text

$POTUSBJOU4FU ٖ؎،ؐزַ׵$POTUSBJOU4FU׾《䖤 val constraintSet = ConstraintSet() constraintSet.clone(context, R.layout.bigimage)

Slide 22

Slide 22 text

$POTUSBJOU4FU $POTUSBJOU4FU׾$POTUSBOU-BZPVUח⿾僥 constraintSet.applyTo(constraintLayout)

Slide 23

Slide 23 text

$POTUSBJOU4FU׾⢪׏ג#JBT  ׾㢌刿

Slide 24

Slide 24 text

$POTUSBJOU4FU׾⢪׏ג#JBT  ׾㢌刿 val constraintSet = ConstraintSet() constraintSet.clone(constraintLayout) val bias = 0.5F constraintSet  .setVerticalBias(R.id.button, bias) constraintSet.applyTo(constraintLayout) $POTUSBJOU-BZPVUך؎ٝأةٝأַ׵ $POTUSBJOU4FU׾《䖤

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

$POTUSBJOU4FU׾⢪׏ג $POTUSBJOU-BZPVUךٖ؎،ؐز׾㢌刿 ˖ ➭ח׮ׁתׂתזًاحسָ֮׶㢌刿דֹ׷

Slide 28

Slide 28 text

$POTUSBJOU-BZPVUYדך堣腉  ♧鿇 ˖ #JBT ˖ $IBJO ˖ (VJEF-JOF ˖ $POTUSBJOU4FU ˖ (0/&ךהֹך䮙⹛חאְג

Slide 29

Slide 29 text

(0/&ךהֹך䮙⹛חאְג ConstraintLayout͸View͕GONEͷͱ͖ͷڍಈ΋αϙʔτ ͍ͯ͠Δ ConstraintLayoutͷதͷView͕GONEʹͳͬͨͱ͖͸ͦͷ View͕0 x 0ͰMargin΋0ʹ

Slide 30

Slide 30 text

(0/&ךהֹך䮙⹛חאְג (0/&חז׏׋7JFX׾⿫撑׃גְ׋ٖ؎،ؐزד (0/&חז׏׋הֹךو٦آٝך㣐ֹׁ׾鏣㹀ׅ׷ֿהָדֹ׷ app:layout_goneMarginLeft="200dp"

Slide 31

Slide 31 text

$POTUSBJOU-BZPVU#FUBדך 堣腉

Slide 32

Slide 32 text

$POTUSBJOU-BZPVU#FUBדך 堣腉

Slide 33

Slide 33 text

$POTUSBJOU-BZPVU#FUBדך 堣腉 ˖ #BSSJFS ˖ (SPVQ ˖ 1MBDFIPMEFS ˖ QFSDFOUEJNFOTJPO

Slide 34

Slide 34 text

#BSSJFS ֿך״ֲזٖ؎،ؐزד  〸ך&EJU5FYU׾䲧ִ׷䕎ד⡲׷ה 兛鸐כ♳ך䕎חז׶תׅ ְֲֲֿ儗ח#BSSJFSָ⢪ִתׅկ رٌד⢪ְ倯鍑铡

Slide 35

Slide 35 text

#BSSJFS #BSSJFSך♴ח7JFX׾䭯׏גֻ׷ 鼘ׇֽׁ׷׋׭חٖ؎،ؐز׾  ⡲׷؎ً٦آ "EE7FSUJDBM#BSSJFSד#BSSJFS׾鷄⸇

Slide 36

Slide 36 text

#BSSJFS #BSSJFS׾⡲׷㜥䨽׾  䭷㹀 5FYU7JFXך〸⩎ח  #BSSJFS׾⡲׶׋ְךד SJHIUת׋כFOE׾䭷㹀

Slide 37

Slide 37 text

#BSSJFS ֿ׸ָ#BSSJFS ˖ ת׆➙אְגְ׷  5FYU7JFXפך  $POTUSBJOU׾⵴ꤐ

Slide 38

Slide 38 text

#BSSJFS ֿ׸ָ#BSSJFS ˖ ➿׻׶ח#BSSJFSח  $POTUSBJOU׾אֽ׷

Slide 39

Slide 39 text

#BSSJFSך⢪ְ䨽 ٖ؎،ؐز׾勴⟝ד  "#ذأزהַדծ(0/&׃גⴖ׶剏ִ׋׶הַ׃גְ׷儗זו

Slide 40

Slide 40 text

$POTUSBJOU-BZPVU#FUBדך 堣腉 ˖ #BSSJFS ˖ (SPVQ ˖ 1MBDFIPMEFS ˖ QFSDFOUEJNFOTJPO

Slide 41

Slide 41 text

(SPVQ (SPVQ׾⢪ֲה♧孡ח(SPVQד䭷㹀׃׋  ׮ךךWJTJCJMJUZ׾㢌ִ׋׶דֹ׷ $IBJOדך⢽

Slide 42

Slide 42 text

(SPVQ ⢪ְ倯כ㛇劤涸ח#BSSJFSה♧筰 ⟃♴ך؝٦سד♧孡ח7JFXך7JTJCJMJUZ׾㢌刿 findViewById(R.id.Group).visibility = View.GONE

Slide 43

Slide 43 text

$POTUSBJOU-BZPVU#FUBדך 堣腉 ˖ #BSSJFS ˖ (SPVQ ˖ 1MBDFIPMEFS ˖ QFSDFOUEJNFOTJPO

Slide 44

Slide 44 text

1MBDFIPMEFS ˖ ֿ׸㹋鄲׃׋ְ׏גז׏׋׵  וֲװ׏גװ׶תׅ $POTUSBJOU-BZPVU׾⢪ֲהֿ׸׌ֽד㹋鄲דֹתׅ val onClickListener: (View) -> Unit = { view -> TransitionManager.beginDelayedTransition(root as ViewGroup) placeholder.setContentId(view.id) } imageA.setOnClickListener(onClickListener) imageB.setOnClickListener(onClickListener) imageC.setOnClickListener(onClickListener) imageD.setOnClickListener(onClickListener)

Slide 45

Slide 45 text

1MBDFIPMEFS ˖ ת׆➙㔐כ،؎ذيך$IBJO׾⡲׷

Slide 46

Slide 46 text

1MBDFIPMEFS 如ח1MBDFIPMEFS׾鏣縧ׅ׷ ֿֿדכ㣐ֹֻׅ׷״ֲח1MBDFIPMEFSח  $POTUSBJOU׾鏣㹀䊩〸ַ׵ךꥴ꟦ז׃זו app:content=“@+id/image_d” ך״ֲח$IBJOך⚥ח֮׷7JFXךJE׾  鏣㹀ׅ׷ֿהד䊩ך״ֲז邌爙חז׷

Slide 47

Slide 47 text

1MBDFIPMEFS 5SBOTJUJPO.BOBHFSCFHJO%FMBZFE5SBOTJUJPO ד،صً٦ءׇׁّٝאאծ  QMBDFIPMEFSTFU$POUFOU*Eׅ׸ל䊩ך״ֲחז׷ val onClickListener: (View) -> Unit = { view -> TransitionManager.beginDelayedTransition(root as ViewGroup) placeholder.setContentId(view.id) } imageA.setOnClickListener(onClickListener) imageB.setOnClickListener(onClickListener) imageC.setOnClickListener(onClickListener) imageD.setOnClickListener(onClickListener)

Slide 48

Slide 48 text

$POTUSBJOU-BZPVU#FUBדך 堣腉 ˖ #BSSJFS ˖ (SPVQ ˖ 1MBDFIPMEFS ˖ QFSDFOUEJNFOTJPO

Slide 49

Slide 49 text

QFSDFOUEJNFOTJPO ˖ 簚埆ךنةٝ ֿ׿ז䠬ׄד䭷㹀ׅ׸ל㹋植דֹ׷ android:layout_width="0dp" app:layout_constraintWidth_default="percent" app:layout_constraintWidth_percent=“0.5" %FQSFDBUFEחז׏׋  1FSDFOU4VQQPSU-JCSBSZך縧ֹ䳔ִָ䯴׶׉ֲ

Slide 50

Slide 50 text

$POTUSBJOU-BZPVUה  ،صً٦ءّٝ

Slide 51

Slide 51 text

$POTUSBJOU-BZPVUה  ،صً٦ءّٝ $POTUSBJOU-BZPVU׾⢪׏׋ٖ؎،ؐز׾  א欽䠐ׅ׷ ،صً٦ءّٝ⵸ה،صً٦ءّٝ䖓ך ٖ؎،ؐز

Slide 52

Slide 52 text

$POTUSBJOU-BZPVUה  ،صً٦ءّٝ

Slide 53

Slide 53 text

$POTUSBJOU-BZPVUך؎ٝأةٝأַ׵ $POTUSBJOU4FU׾《䖤

Slide 54

Slide 54 text

ٖ؎،ؐزؿ؋؎ַٕ׵ $POTUSBJOU4FU׾《䖤

Slide 55

Slide 55 text

ו׏׍ך$POTUSBJOU4FU׾⢪ֲַ寸׭׷

Slide 56

Slide 56 text

5SBOTJUJPO.BOBHFSCFHJO%FMBZFE5SBOTJUJPOד 如ךٖ؎،ؐز㢌刿儗ח،صً٦ءّׅٝ׷״ֲחׅ׷ DPOTUSBJOU4FUBQQMZ5P ד$POTUSBJOU4FUח⿾僥

Slide 57

Slide 57 text

$POTUSBJOU-BZPVUה  ،صً٦ءّٝ $POTUSBJOU4FUה5SBOTJUJPO.BOBHFSCFHJO%FMBZFE5SBOTJUJPO ׾ 穈׫さ׻ׇ׷ֿהד،صً٦ءّٝדֹ׷ ➙㔐כٖ؎،ؐزַ׵$POTUSBJOU4FU׾《䖤׃׋ָծ  فؚٗٓيַ׵$POTUSBJOU4FU׾ְׄ׏ג  ،صً٦ءׇׁّٝ׷ֿה׮〳腉 (PPHMF*0،فٔכֿ׸ח$VTUPN5SBOTJUJPO׾穈׫さ׻ׇג ׮׏ה갹䓸׏גְ׷ ➙㔐כ铡僇׃זְ

Slide 58

Slide 58 text

$POTUSBJOU-BZPVUך䭁䓸䚍 #BSSJFSװ(SPVQכ$POTUSBJOU)FMQFSؙٓأ׾竰䪫׃ג㹋植ׁ׸גְ׷ 7JFXךٓ؎ؿ؟؎ؙٕךة؎ىؚٝדծ  䭷㹀ׁ׸׋7JFX׾⢪׏ג乼⡲⳿勻׷ ؕأةي׃׋ך׾知⽃ח⡲׏ג׫׋  Ⱅ䒭ח؟ه٦ز׃גְ׷

Slide 59

Slide 59 text

$POTUSBJOU-BZPVUך䭁䓸䚍 VQEBUF1SF-BZPVU ׾ؔ٦غ٦ٓ؎س׃גⳢ椚׾䊴׃鴥׿דְ׷ ׍ׯ׿ה׃׋⢪ְ倯כسًُؗٝزָ⳿גַ׵חז׶׉ֲ

Slide 60

Slide 60 text

תה׭ ˖ ְ׹׿זٖ؎،ؐزך堣腉ָⰅ׏גְגծ  穠圓ְ׹׿זػة٦ٝח黝䘔דֹ׉ֲ ˖ ֮׷玎䏝䭁䓸דֹ׷״ֲח⡲׏ג֮׷ ˖ $POTUSBJOU-BZPVUָ䖉׍黅׃ְ ˖ ،صً٦ءّٝ׾知⽃חדֹ׷