Android Studio 3.0 ハンズオン : LayoutEditor & ConstraintLayout

DevFest Tokyo 2017 #devfest17
https://gdg-tokyo.connpass.com/event/66236/

Transcript

1. "OESPJE
   4UVEJP
   
   عٝؤؔٝ ֮׿ְׂײֹ
   !
   %FW'FTU
   5PLZP
    -BZPVU&EJUPS
   
   $POTUSBJOU-BZPVU
2. HPPHM%C,I-:
3. ˖ CMPH
   
   :".
   ך꧟鎸䌘
   ˖ ZBO[NCMPHTQPUDPN
   ˖ UXJUUFS
   
   !ZBO[N
   װ׿ׂ׬
   ˖ V1IZDB
   *OD
   吳䒭⠓爡ؐؿ؍ؕ
   ˖ (56(
   (JSMT
   HUVHHJSMTKQ
   ˖ ESPJE
   HJSMTIUUQTESPJEHJSMTDPOOQBTTDPN ͋Μ͍͟Ώ͖
4. -BZPVU&EJUPS
   
   $POTUSBJOU-BZPVU
   ד
   5XJUUFS
   ך״ֲז
   6*
   ׾ꥡ㾴ד⡲׷
5. 倜׃ְفٗآؙؑز׾ ⡲׷
10. $POTUSBJOU-BZPVU
11. $POTUSBJOU-BZPVU ˖ "OESPJE
    4VQQPSU
    -JCSBSZ
    ך♧א
    ˖ 7JFX(SPVQ
    ˖ 3FMBUJWF-BZPVU
    ׾넝堣腉ח׃׋䠬ׄ
    ˖ ⵖ秈$POTUSBJOUדꂁ縧㜥䨽׾寸׭׷
12. ⵖ秈׾䭷㹀ׅ׷ ˖ 㶨ؽُ٦חⵖ秈׾䭷㹀
    ˖ ⵖ秈ח״׶ꂁ縧㜥䨽ָ寸ת׷
    app:layout_constraintXXXXXXX
13. NBUDI DPOTUSBJOU ˖ $POTUSBJOU-BZPVU
    ך㶨ؽُ٦דכ
    NBUDI@QBSFOU
    כ⢪׻זְ
    ˖ EQ
    
    NBUDI
    DPOTUSBJOU
    ˖ ⵖ秈׾弫׋ׅ朐䡾ד剑׮䎢ָ׷
14. CVJMEHSBEMF ך鏣㹀 implementation 'com.android.support.constraint:constraint-layout:1.0.2' compile 'com.android.support.constraint:constraint-layout:1.0.2' HSBEMF
    Y
    ⟃꣬ HSBEMF
    Y
    ⟃⵸
15. BQQCVJMEHSBEMF
16. BDUJWJUZ@NBJOYNM
    ׾Ꟛֻ
17. ػٖحز 1BMFUUF
18. سٓحؚ
    
    سٗحف
19. 㾩䚍 "UUSJCVUFT
20. %FTJHO
    4VSGBDF
    ך㢌刿 %FTJHO
    
    #MVFQSJOU
21. %FTJHO
    4VSGBDF
    ך㢌刿 %FTJHO
22. %FTJHO
    4VSGBDF
    ך㢌刿 #MVFQSJOU
23. %FGBVMU
    .BSHJOT ⵖ秈׾אֽ׋הֹח荈⹛ד鏣㹀ׁ׸׷و٦آٝ
24. 5XJUUFS
    ך״ֲז
    6*
    ׾ꥡ㾴ד⡲׷
25. 5FYU7JFX
    ׾⵴ꤐׅ׷ 鼅䫛׃ג
    EFMFUF
27. *NBHF7JFX
    ׾鷄⸇ׅ׷ 鼅䫛 سٓحؚ
    
    سٗحف
28. 鼅䫛 ؙٔحؙ
30. عٝسٕ 筮
    
    سٓحؚ׃ג
    $POTUSBJOU
    ׾鏣㹀 饔
    
    ؙٔحؙ׃ג
    $POTUSBJOU
    ׾鍑ꤐ
31. %FGBVMU
    .BSHJOT
    ׾חׅ׷ ؙٔحؙ ؙٔحؙ
32. *NBHF7JFX
    ׾䊩♳חꂁ縧ׅ׷ ♳ךعٝسٕ׾سٓحؚ׃ג♳畭
    דꨄׅ 䊩ךعٝسٕ׾سٓحؚ׃ג䊩畭
    דꨄׅ
34. 5FYU7JFX
    ׾鷄⸇ׅ׷ 鼅䫛 سٓحؚ
    
    سٗحف
36. 5FYU7JFX
    ׾
    *NBHF7JFX
    ך〸חꂁ縧ׅ׷ ♳ךعٝسٕ׾سٓحؚ׃ג
    *NBHF7JFX
    ך♳ךعٝسٕ
    דꨄׅ 䊩ךعٝسٕ׾سٓحؚ׃ג
    *NHBF7JFX
    ך〸ךعٝسٕ
    דꨄׅ
38. 5FYU7JFX
    ךو٦آٝ׾㢌刿ׅ׷ ؙٔحؙ ؙٔحؙ
40. 5FYU"QQFBSBODF
    ׾㢌刿ׅ׷ ؙٔحؙ ؙٔحؙ
42. فٖؽُ٦欽ך俑㶵⴨׾㢌刿ׅ׷ ؙٔحؙ ؙٔحؙ
44. 劤俑欽ך
    5FYU7JFX
    ׾鷄⸇ׅ׷
45. 劤俑欽ך
    5FYU7JFX
    ׾ꂁ縧ׅ׷ ♳ךعٝسٕ
    
    ̔
    せ⵸欽ך
    5FYU7JFX
    ך♴畭 䊩ךعٝسٕ
    
    ̔
    せ⵸欽ך
    5FYU7JFX
    ך䊩畭 〸ךعٝسٕ
    
    ̔
    $POTUSBJOU-BZPVU
    ך〸畭
47. XJEUI
    ׾
    NBUDI
    DPOTUSBJOU
    חׅ׷ ؙٔحؙ
48. 8SBQ
    $POUFOU
    XSBQ@DPOUFOU 'JYFE
    99EQ .BUDI
    $POTUSBJOUT
    EQ
50. 䊩ךو٦آٝ׾
    EQ
    חׅ׷
51. 7FDUPS
    %SBXBCMF
    ׾鷄⸇ׅ׷ 鼅䫛 'JMF
    
    /FX
    
    7FDUPS
    "TTFU
    ׾ؙٔحؙ
52. ؙٔحؙ
53. Ⰵ⸂ 鼅䫛 ؙٔحؙ
54. ؙٔحؙ
55. ؙٔحؙ
56. GBWPSJUF
    TIBSF
    TFUUJOHT
    ׾鷄⸇
57. *NBHF7JFX
    ⦐
    5FYU7JFX
    ⦐׾鷄⸇ׅ׷ 埆♧⴨ח⚛ץ׷
58. DIBJOחׅ׷ 
    ؙٔحؙ 
    Ⰻ鼅䫛ׅ׷
60. ⦐ך
    5FYU7JFX
    ך䌴׾
    NBUDI
    DPOTUSBJOU
    חׅ׷
61. %FGBVMU
    .BSHJOT
    ׾
    
    חׅ׷
62. DIBJO
    ך䊩〸畭׾劤俑ח֮׻ׇ׷
63. ♳♴׾
    GBWPSJUF
    ח֮׻ׇ׷
64. GBWPSJUF
    ך♳畭׾劤俑ך♴畭חאז־׷
65. 儗꟦欽ך
    5FYU7JFX
    ׾ꂁ縧ׅ׷ ؙٔحؙ CBTFMJOF
    欽ךعٝسٕ
66. CBTFMJOF
    ׾せ⵸חさ׻ׇ׷
67. JE欽ך
    5FYU7JFX
    ׾ꂁ縧ׅ׷ CBTFMJOF
    ׾せ⵸חさ׻ׇ׷
    
    䊩〸׾せ⵸ה儗꟦חאז־׷
68. ؟؎ؤװ⡭涯זו锃侭 ׃ג㸣䧭ׇׁ״ֲ
69. ֶתֽ
70. 涫㜥➂暟 $POTUSBJOU-BZPVU $POTUSBJOU-BZPVU
    ך㶨ؽُ٦ד
    ⡘縧׾寸׭״ֲה׃גְ׷׮ך $POTUSBJOU-BZPVU
    ך➭ך㶨ؽُ٦
    ! JEBODIPS
71. ♳畭׾ $POTUSBJOU-BZPVU ח䲧ִ׷ app:layout_constraintTop_toTopOf="parent" )FMMP
72. ♴畭׾ $POTUSBJOU-BZPVU ח䲧ִ׷ app:layout_constraintBottom_toBottomOf="parent" )FMMP
73. 䊩畭׾ $POTUSBJOU-BZPVU ח䲧ִ׷ app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintStart_toStartOf="parent" )FMMP
74. 〸畭׾ $POTUSBJOU-BZPVU ח䲧ִ׷ app:layout_constraintRight_toRightOf="parent" app:layout_constraintEnd_toEndOf="parent" )FMMP
75. ♳♴׾ $POTUSBJOU-BZPVU ך⚥㣛ח䲧ִ׷ app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" )FMMP
76. ♳♴ך嫰཰׾䭷㹀ׅ׷ app:layout_constraintVertical_bias="0.3" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"   )FMMP
77. 䊩〸׾ $POTUSBJOU-BZPVU ך⚥㣛ח䲧ִ׷ app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP
78. 䊩〸ך嫰཰׾䭷㹀ׅ׷ app:layout_constraintHorizontal_bias="0.3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"   )FMMP
79. $POTUSBJOU-BZPVU ך⚥㣛ח䲧ִ׷ app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP
80. ♳♴׾ $POTUSBJOU-BZPVU ְ׏םְח䎢־׷ android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" EQ
    
    NBUDI
    DPOTUSBJOU )FMMP
81. 䊩〸׾ $POTUSBJOU-BZPVU ְ׏םְח䎢־׷ android:layout_width="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP EQ
    
    NBUDI
    DPOTUSBJOU
82. $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
83. 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
84. NBUDI DPOTUSBJOU ךהֹ XSBQ@DPOUFOU ך״ֲחׅ׷ android:layout_width="0dp" android:layout_height="0dp" … app:layout_constraintWidth_default="wrap"
 app:layout_constraintHeight_default="wrap" )FMMP
85. 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
86. ♳畭׾➭ך 7JFX ך♳畭ח䲧ִ׷ app:layout_constraintTop_toTopOf="@id/anchor"
87. ♳畭׾➭ך 7JFX ך♴畭ח䲧ִ׷ app:layout_constraintTop_toBottomOf="@id/anchor"
88. ♴畭׾➭ך 7JFX ך♴畭ח䲧ִ׷ app:layout_constraintBottom_toBottomOf="@id/anchor"
89. ♴畭׾➭ך 7JFX ך♳畭ח䲧ִ׷ app:layout_constraintBottom_toTopOf="@id/anchor"
90. CBTFMJOF ׾➭ך 7JFX ך CBTFMJOF ח䲧ִ׷ app:layout_constraintBaseline_toBaselineOf="@id/anchor" " "
91. 䊩畭׾➭ך 7JFX ך䊩畭ח䲧ִ׷ app:layout_constraintLeft_toLeftOf="@id/anchor" or app:layout_constraintStart_toStartOf="@id/anchor"
92. 䊩畭׾➭ך 7JFX ך〸畭ח䲧ִ׷ app:layout_constraintLeft_toRightOf="@id/anchor" or app:layout_constraintStart_toEndOf="@id/anchor"
93. 〸畭׾➭ך 7JFX ך〸畭ח䲧ִ׷ app:layout_constraintRight_toRightOf="@id/anchor" or app:layout_constraintEnd_toEndOf="@id/anchor"
94. 〸畭׾➭ך 7JFX ך䊩畭ח䲧ִ׷ app:layout_constraintRight_toLeftOf="@id/anchor" or app:layout_constraintEnd_toStartOf="@id/anchor"
95. ♳♴׾➭ך 7JFX ך⚥㣛ח䲧ִ׷ app:layout_constraintTop_toTopOf="@id/anchor" app:layout_constraintBottom_toBottomOf="@id/anchor"
96. 䊩〸׾➭ך 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"
97. 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"
98. (VJEFMJOF
99. 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"
100. HVJEFMJOF חさ׻ׇגꂁ縧ׅ׷ android:layout_width="0dp" app:layout_constraintLeft_toRightOf="@id/guideline1" app:layout_constraintRight_toLeftOf="@id/guideline2" ! JEHVJEFMJOF ! JEHVJEFMJOF
101. HPOF NBSHJO
102. HPOF.BSHJO )FMMP )FMMP )FMMP android:layout_marginLeft="16dp"
 app:layout_constraintLeft_toRightOf="@id/anchor"
 app:layout_goneMarginLeft="0dp" BODIPS
     ך
     WJTJCJMJUZ
     
     HPOF ⵖ秈⯓ך
     7JFX
     ך
     WJTJCJMJUZ
     ָ
     HPOF
     הֹח⢪׻׸׷
     NBHJO
     ⦼ BODIPS
     ך
     WJTJCJMJUZ
     
     WJTJCMF EQ
103. $IBJO
104. 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
105. 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
     ח䭷㹀ׅ׷
106. 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
107. 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   
108. 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