Save 37% off PRO during our Black Friday Sale! »

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

D2bcabeeb1ddff142fb8988b412cb4d3?s=47 Yuki Anzai
October 09, 2017
13
2k

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

#devfest17

D2bcabeeb1ddff142fb8988b412cb4d3?s=128

Yuki Anzai

October 09, 2017
Tweet

More Decks by Yuki Anzai

See All by Yuki Anzai
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
7
5.2k
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
7
3.3k
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
1
410
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
4
2.8k
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
7
2.8k
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
8
3.1k
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
3
240
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
7
1.3k
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
8
570

Featured

See All Featured
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
56k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
261
24k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
129
20k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
17k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1352
200k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
10k
78b475797a14c84799063c7cd073962f?s=48 holman
464
280k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
100
15k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
307
33k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
156
12k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
16
940

Transcript

  1. "OESPJE4UVEJP عٝؤؔٝ ֮׿ְׂײֹ!%FW'FTU5PLZP -BZPVU&EJUPS$POTUSBJOU-BZPVU

  2. HPPHM%C,I-:

  3. ˖ CMPH:".ך꧟鎸䌘 ˖ ZBO[NCMPHTQPUDPN ˖ UXJUUFS!ZBO[Nװ׿ׂ׬ ˖ V1IZDB*OD 吳䒭⠓爡ؐؿ؍ؕ 

    ˖ (56((JSMTHUVHHJSMTKQ ˖ ESPJEHJSMTIUUQTESPJEHJSMTDPOOQBTTDPN ͋Μ͍͟Ώ͖

  4. -BZPVU&EJUPS$POTUSBJOU-BZPVU ד 5XJUUFSך״ֲז6*׾ꥡ㾴ד⡲׷

  5. 倜׃ְفٗآؙؑز׾ ⡲׷

  6. None
  7. None
  8. None
  9. None

  10. $POTUSBJOU-BZPVU

  11. $POTUSBJOU-BZPVU ˖ "OESPJE4VQQPSU-JCSBSZך♧א ˖ 7JFX(SPVQ ˖ 3FMBUJWF-BZPVU׾넝堣腉ח׃׋䠬ׄ ˖ ⵖ秈$POTUSBJOUדꂁ縧㜥䨽׾寸׭׷

  12. ⵖ秈׾䭷㹀ׅ׷ ˖ 㶨ؽُ٦חⵖ秈׾䭷㹀 ˖ ⵖ秈ח״׶ꂁ縧㜥䨽ָ寸ת׷ app:layout_constraintXXXXXXX

  13. NBUDI DPOTUSBJOU ˖ $POTUSBJOU-BZPVUך㶨ؽُ٦דכNBUDI@QBSFOU כ⢪׻זְ ˖ EQNBUDIDPOTUSBJOU ˖ ⵖ秈׾弫׋ׅ朐䡾ד剑׮䎢ָ׷

  14. CVJMEHSBEMF ך鏣㹀 implementation 'com.android.support.constraint:constraint-layout:1.0.2' compile 'com.android.support.constraint:constraint-layout:1.0.2' HSBEMFY⟃꣬ HSBEMFY⟃⵸

  15. BQQCVJMEHSBEMF

  16. BDUJWJUZ@NBJOYNM׾Ꟛֻ

  17. ػٖحز 1BMFUUF

  18. سٓحؚسٗحف

  19. 㾩䚍 "UUSJCVUFT

  20. %FTJHO4VSGBDFך㢌刿 %FTJHO #MVFQSJOU

  21. %FTJHO4VSGBDFך㢌刿 %FTJHO

  22. %FTJHO4VSGBDFך㢌刿 #MVFQSJOU

  23. %FGBVMU.BSHJOT ⵖ秈׾אֽ׋הֹח荈⹛ד鏣㹀ׁ׸׷و٦آٝ

  24. 5XJUUFSך״ֲז6* ׾ꥡ㾴ד⡲׷

  25. 5FYU7JFX׾⵴ꤐׅ׷ 鼅䫛׃גEFMFUF

  26. None

  27. *NBHF7JFX׾鷄⸇ׅ׷ 鼅䫛 سٓحؚسٗحف

  28. 鼅䫛 ؙٔحؙ

  29. None

  30. عٝسٕ 筮سٓحؚ׃ג$POTUSBJOU׾鏣㹀 饔ؙٔحؙ׃ג$POTUSBJOU׾鍑ꤐ

  31. %FGBVMU.BSHJOT׾חׅ׷ ؙٔحؙ ؙٔحؙ

  32. *NBHF7JFX׾䊩♳חꂁ縧ׅ׷ ♳ךعٝسٕ׾سٓحؚ׃ג♳畭 דꨄׅ 䊩ךعٝسٕ׾سٓحؚ׃ג䊩畭 דꨄׅ

  33. None

  34. 5FYU7JFX׾鷄⸇ׅ׷ 鼅䫛 سٓحؚسٗحف

  35. None

  36. 5FYU7JFX׾*NBHF7JFXך〸חꂁ縧ׅ׷ ♳ךعٝسٕ׾سٓحؚ׃ג *NBHF7JFXך♳ךعٝسٕ דꨄׅ 䊩ךعٝسٕ׾سٓحؚ׃ג *NHBF7JFXך〸ךعٝسٕ דꨄׅ

  37. None

  38. 5FYU7JFXךو٦آٝ׾㢌刿ׅ׷ ؙٔحؙ ؙٔحؙ

  39. None

  40. 5FYU"QQFBSBODF׾㢌刿ׅ׷ ؙٔحؙ ؙٔحؙ

  41. None

  42. فٖؽُ٦欽ך俑㶵⴨׾㢌刿ׅ׷ ؙٔحؙ ؙٔحؙ

  43. None

  44. 劤俑欽ך5FYU7JFX׾鷄⸇ׅ׷

  45. 劤俑欽ך5FYU7JFX׾ꂁ縧ׅ׷ ♳ךعٝسٕ ̔せ⵸欽ך5FYU7JFXך♴畭 䊩ךعٝسٕ ̔せ⵸欽ך5FYU7JFXך䊩畭 〸ךعٝسٕ ̔$POTUSBJOU-BZPVUך〸畭

  46. None

  47. XJEUI׾NBUDIDPOTUSBJOUחׅ׷ ؙٔحؙ

  48. 8SBQ$POUFOU XSBQ@DPOUFOU 'JYFE 99EQ .BUDI$POTUSBJOUT EQ

  49. None

  50. 䊩ךو٦آٝ׾EQחׅ׷

  51. 7FDUPS%SBXBCMF׾鷄⸇ׅ׷ 鼅䫛 'JMF/FX7FDUPS"TTFU׾ؙٔحؙ

  52. ؙٔحؙ

  53. Ⰵ⸂ 鼅䫛 ؙٔحؙ

  54. ؙٔحؙ

  55. ؙٔحؙ

  56. GBWPSJUF  TIBSF  TFUUJOHT ׾鷄⸇

  57. *NBHF7JFX⦐ 5FYU7JFX⦐׾鷄⸇ׅ׷ 埆♧⴨ח⚛ץ׷

  58. DIBJOחׅ׷ ؙٔحؙ Ⰻ鼅䫛ׅ׷

  59. None

  60. ⦐ך5FYU7JFXך䌴׾NBUDIDPOTUSBJOUחׅ׷

  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" EQNBUDIDPOTUSBJOU )FMMP

  81. 䊩〸׾ $POTUSBJOU-BZPVU ְ׏םְח䎢־׷ android:layout_width="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP EQNBUDIDPOTUSBJOU

  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ךWJTJCJMJUZHPOF ⵖ秈⯓ך7JFXךWJTJCJMJUZָHPOFהֹח⢪׻׸׷ NBHJO⦼

    BODIPSךWJTJCJMJUZWJTJCMF 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