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

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

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

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

#devfest17

D2bcabeeb1ddff142fb8988b412cb4d3?s=128

Yuki Anzai

October 09, 2017
Tweet

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