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

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

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

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

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

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

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

㛇劤涸זהֿ׹

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

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

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

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

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

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

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

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

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

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

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

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

$POTUSBJOU4FU׾⢪׏ג#JBT  ׾㢌刿

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

0.5F constraintSet  .setVerticalBias(R.id.button, bias) constraintSet.applyTo(constraintLayout) JE׾䭷㹀׃ג#JBT׾㢌刿ׅ׷

0.5F constraintSet  .setVerticalBias(R.id.button, bias) constraintSet.applyTo(constraintLayout) ٖ؎،ؐزח⿾僥

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

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

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

$POTUSBJOU-BZPVU#FUBדך 堣腉

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

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

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

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

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

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

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

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

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

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)

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

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

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)

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

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

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

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

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

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

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

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

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

$POTUSBJOU-BZPVUך䭁䓸䚍 #BSSJFSװ(SPVQכ$POTUSBJOU)FMQFSؙٓأ׾竰䪫׃ג㹋植ׁ׸גְ׷ 7JFXךٓ؎ؿ؟؎ؙٕךة؎ىؚٝדծ  䭷㹀ׁ׸׋7JFX׾⢪׏ג乼⡲⳿勻׷ ؕأةي׃׋ך׾知⽃ח⡲׏ג׫׋  Ⱅ䒭ח؟ه٦ز׃גְ׷ <com.github.takahirom.constraint_layout_samples.Blink android:layout_width="wrap_content" android:layout_height="wrap_content" app:constraint_referenced_ids="textView,imageView"
/>

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

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

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

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

More Decks by takahirom

Featured

Transcript