あるあるLT 2019/11/27

Transcript

1. ConstraintLayout ͋Δ͋Δ(͡Όͳ͍͔΋͠Εͳ͍)࿩ ͋Δ͋ΔLTʙ AndroidΞϓϦ։ൃΤϯδχΞ ʙ Vol.8 oshima @and factory 1
2. About Me େౡ / @k_shinnʢఀ଺ؾຯʣ and factoryגࣜձࣾ AndroidΤϯδχΞ ೖࣾ1೥νϣοτɺAndroidྺ4.5೥͘Β͍ ઎͍ΞϓϦ୲౰த 2
3. ConstraintLayout ࢖ͬͯ·͔͢ʁ 3
4. and factoryͰ͸࠷ۙࣾ಺ษڧձͰ࿩୊ʹͯ͠·ͨ͠ 4
5. ࠓճ͸ࣾ಺ษڧձͰग़ͨ࿩୊Λத৺ʹ ʮ͋Δ͋Δʯ΍ʮ͋Δ͋Δ…ʁʯΛ͝঺հ 5
6. ͦͷ̍ɽTextView͕͸Έग़͕ͪ 6
7. ྫʣ͜͏͍͏Layout࡞ͬͯͨΒ… • ঎඼໊ʴ஋ஈͷ߲໨ • ߲໨෯ʢ৭෇͖ͷ෦෼ʣ͸ݻఆ 7
8. λΠτϧ͕௕͘ͳͬͨΒࠨӈʹ͸Έग़ͨ • ঎඼໊ͷ಄ͱ஋ஈͷ຤ඌ͕࿮֎ʹ͸Έग़ͨ • 
 • ཧ૝ͱͯ͠͸࿮ʹऩ·ͬͯ຤ඌলུ 8
9. ʢͳΜͰ͔ʣ͓෼͔Γ͍͚ͨͩͨͩΖ͏͔ʁ 9
10. ࠨͷtextΛ `wrap_content` ʹͯͨ͠ͷ͕ݪҼ • `wrap_content`͸਌Viewͷ௕͞·Ͱ͸෯Λͱͬͯ͠·͏ • Φʔόʔ͢Δͱࠨӈۉ౳ʹ͸Έग़Δ 10 <TextView android:id="@+id/text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=“঎඼λΠτϧ঎඼λΠτϧʢུ” ………
11. ͪͳΈʹ… • ChainStyle+biasࢦఆ͢ΔͱͣΕΔํ޲΋ยํʹدΔ 11 <TextView … app:layout_constraintHorizontal_bias="0.0" app:layout_constraintHorizontal_chainStyle=“packed" …
12. 0dp(match_constraint)Λ࢖͓͏ • ੍ݶతʹՄೳͳൣғΛ֬อͯ͘͠ΕΔ • LinearLayoutͰ͍͏weight=1 • 0dpʹͨ͠Օॴ͕༨നΛશ෦͍࣋ͬͯ͘ͱߟ͑Δͱָ 12
13. 13 <TextView android:id="@+id/text1" android:layout_width=“0dp" // ࢒Γͷԣ෯෼·Ͱ͕ॆ͕ͯΘΕΔ android:layout_height="wrap_content" android:layout_margin="4dp" android:ellipsize="end" android:lines="1" android:text="঎඼λΠτϧ঎඼λΠτϧ" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@id/text2" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/text2" android:layout_width=“wrap_content" // ͪ͜Βͷԣ෯͸֬อ͞ΕΔ android:layout_height="wrap_content" android:layout_margin="4dp" android:text="500ԁ" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@id/text1" app:layout_constraintTop_toTopOf="parent" />
14. ͨͩ͠… • 0dp≒༨ന • ଞͷView͕े෼ʹେ͖͍ͱදࣔ͞Εͳ͘ͳΔ • ঎඼λΠτϧ΋ଘࡏͯ͠Δ͚Ͳ஋ஈʹӅ͞Εͨਤ 14
15. wrap_contentͱ0dpͷੑ࣭Λཧղ͢Δͱ໘ന͍ 15
16. ͦͷ̎ɽ `constraintStart_toXxx` ͷࢦఆϛε͕ͪ͠ 16
17. Ұ൪؊͚ͩͲҰ൪ΊΜͲ͍͘͞෦෼ 17 <TextView android:id="@+id/text1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="4dp" android:ellipsize="end" android:lines="1" android:text="঎඼λΠτϧ঎඼λΠτϧ" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@id/text2" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
18. Tips:ิ׬ػೳʹཔΔͱͪΐͬͱָʹॻ͚Δ • toptop… ͱ͔ enst… ͱ͔ଧͭ 18
19. ࣮͸… 19
20. ඃΒͳ͚Ε͹શ෦ॻ͚Δ • ͜ΕͰ΋Build௨Γ·͢ 20 <TextView android:id="@+id/text2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="4dp" android:text="500ԁ" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintBottom_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toStartOf="parent" app:layout_constraintStart_toEndOf="@id/text1" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent" />
21. Ͳ͏ͳΔͷʁ 21
22. start_to…Λ2ݸ෇͚ͨ৔߹ • `start_toStart` ͕༏ઌ͞Εͨ 22 <TextView android:id="@+id/text2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="4dp" android:text="500ԁ" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@id/text1" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
23. ༏ઌॱҐ͕ଘࡏ͢Δ • ConstraintLayoutͷݩιʔεࢀর • ยํ͔͠൑ఆ͞Εͳ͍ 23 // Left constraint if (layoutParams.leftToLeft != LayoutParams.UNSET) { // ≒ startToStart ConstraintWidget target = getTargetWidget(layoutParams.leftToLeft); if (target != null) { widget.immediateConnect(ConstraintAnchor.Type.LEFT, target, ConstraintAnchor.Type.LEFT, layoutParams.leftMargin); } } else if (layoutParams.leftToRight != LayoutParams.UNSET) { // ≒ startToEnd ConstraintWidget target = getTargetWidget(layoutParams.leftToRight); if (target != null) { widget.immediateConnect(ConstraintAnchor.Type.LEFT, target, ConstraintAnchor.Type.RIGHT, layoutParams.leftMargin); } }
24. Build͸௨Δ…ͱ͍͏͔௨ͬͯ͠·͏᠘ 24
25. ͔͜͜Β͸౼࿦తͳ಺༰ 25
26. ͦͷ̏ɽ xmlϑϧϑϥοτʹ͢ΔͱٯʹݟͮΒ͘ͳ͍ʁ 26
27. Θ͔Δʢୡ؍ʣ 27
28. ύϑΥʔϚϯε্͕͕Δͱ͸ݴ͏͚ΕͲ… • େମ͸ମײ͢Δͷ͕೉͍͠Ϩϕϧ • ωετ͕͋Δͱߏ଄ͷ·ͱ·Γͱͯ͠ݟ΍͍͢ͷ΋ࣄ࣮ 28
29. ྑ͍ԘകΛ୳Γ͍ͨ • 1.2ஈ֊͘Β͍ͷωετΛڐ༰͢Δͱݟ΍͘͢ͳΔ • ࠨ٧Ίͷ୯७Layoutͱ͔͸Linearͱ࢖͍෼͚Δͱ͍͍͔΋ 29
30. ͦͷ̐ɽLinearͰྑ͘ͳ͍ʁ 30
31. Θ͔Δʢଥڠʣ 31
32. ศརػೳ͕ͨ͘͞Μ͋ΔͷͰ৭ʑ෍ڭ͠Α͏ʂʂ ʢ಺༰͜Εʹ͢Δ͔͔ͳΓ໎ͬͨʣ 32
33. ݸਓత෍ڭϙΠϯτ • GUIͰ༨ന֬ೝௐઅͯ͠ΈΔ • ChainStyleΛ࢖ͬͯ༨നΛ͍͍ײ͡ʹ͢Δ • BarrierͰՄมͳԣ෯Λ؆୯ʹἧ͑ͯΈΔ 33
34. ConstraintLayout͸ා͘ͳ͍ʂ 34
35. ࢀߟ • ConstraintLayout • https://android.googlesource.com/platform/frameworks/opt/ sherpa/+/studio-2.2/constraintlayout/src/main/java/android/ support/constraint/ConstraintLayout.java • 35