Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ConstraintLayout

D2bcabeeb1ddff142fb8988b412cb4d3?s=47 Yuki Anzai
September 13, 2017

 ConstraintLayout

D2bcabeeb1ddff142fb8988b412cb4d3?s=128

Yuki Anzai

September 13, 2017
Tweet

Transcript

  1. $POTUSBJOU-BZPVU ֮׿ְׂײֹ!ESPJEHJSMTNFFUVQ

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

    ˖ (56((JSMTHUVHHJSMTKQ ˖ ESPJEHJSMTIUUQTESPJEHJSMTDPOOQBTTDPN ͋Μ͍͟Ώ͖
  3. $POTUSBJOU-BZPVU ˖ "OESPJE4VQQPSU-JCSBSZך♧א ˖ 7JFX(SPVQ ˖ 3FMBUJWF-BZPVU׾넝堣腉ח׃׋䠬ׄ ˖ ⵖ秈$POTUSBJOUדꂁ縧㜥䨽׾寸׭׷

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

  5. -BZPVU 9.- ח剅ֻ㜥さ <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"

    android:layout_height="match_parent"> … </android.support.constraint.ConstraintLayout>
  6. 倜׃ֻ -BZPVU 9.- ׾⡲׷㜥さ <'JMF></FX><-BZPVUSFTPVSDFMF> 3PPUFMFNFOUח BOESPJETVQQPSUDPOTUSBJOU$POTUSBJOU-BZPVU

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

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

  9. 涫㜥➂暟 $POTUSBJOU-BZPVU $POTUSBJOU-BZPVUך㶨ؽُ٦ד ⡘縧׾寸׭״ֲה׃גְ׷׮ך $POTUSBJOU-BZPVUך➭ך㶨ؽُ٦ ! JEBODIPS

  10. ♳畭׾ $POTUSBJOU-BZPVU ח䲧ִ׷ app:layout_constraintTop_toTopOf="parent" )FMMP

  11. ♴畭׾ $POTUSBJOU-BZPVU ח䲧ִ׷ app:layout_constraintBottom_toBottomOf="parent" )FMMP

  12. 䊩畭׾ $POTUSBJOU-BZPVU ח䲧ִ׷ app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintStart_toStartOf="parent" )FMMP

  13. 〸畭׾ $POTUSBJOU-BZPVU ח䲧ִ׷ app:layout_constraintRight_toRightOf="parent" app:layout_constraintEnd_toEndOf="parent" )FMMP

  14. ♳♴׾ $POTUSBJOU-BZPVU ך⚥㣛ח䲧ִ׷ app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" )FMMP

  15. ♳♴ך嫰཰׾䭷㹀ׅ׷ app:layout_constraintVertical_bias="0.3" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"   )FMMP

  16. 䊩〸׾ $POTUSBJOU-BZPVU ך⚥㣛ח䲧ִ׷ app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP

  17. 䊩〸ך嫰཰׾䭷㹀ׅ׷ app:layout_constraintHorizontal_bias="0.3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"   )FMMP

  18. $POTUSBJOU-BZPVU ך⚥㣛ח䲧ִ׷ app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP

  19. ♳♴׾ $POTUSBJOU-BZPVU ְ׏םְח䎢־׷ android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" EQNBUDIDPOTUSBJOU )FMMP

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

  21. $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

  22. 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
  23. NBUDI DPOTUSBJOU ךהֹ XSBQ@DPOUFOU ך״ֲחׅ׷ android:layout_width="0dp" android:layout_height="0dp" … app:layout_constraintWidth_default="wrap"
 app:layout_constraintHeight_default="wrap"

    )FMMP
  24. 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
  25. ♳畭׾➭ך 7JFX ך♳畭ח䲧ִ׷ app:layout_constraintTop_toTopOf="@id/anchor"

  26. ♳畭׾➭ך 7JFX ך♳畭ח䲧ִ׷ app:layout_constraintTop_toTopOf="@id/anchor"

  27. ♳畭׾➭ך 7JFX ך♴畭ח䲧ִ׷ app:layout_constraintTop_toBottomOf="@id/anchor"

  28. ♳畭׾➭ך 7JFX ך♴畭ח䲧ִ׷ app:layout_constraintTop_toBottomOf="@id/anchor"

  29. ♴畭׾➭ך 7JFX ך♴畭ח䲧ִ׷ app:layout_constraintBottom_toBottomOf="@id/anchor"

  30. ♴畭׾➭ך 7JFX ך♴畭ח䲧ִ׷ app:layout_constraintBottom_toBottomOf="@id/anchor"

  31. ♴畭׾➭ך 7JFX ך♳畭ח䲧ִ׷ app:layout_constraintBottom_toTopOf="@id/anchor"

  32. ♴畭׾➭ך 7JFX ך♳畭ח䲧ִ׷ app:layout_constraintBottom_toTopOf="@id/anchor"

  33. CBTFMJOF ׾➭ך 7JFX ך CBTFMJOF ח䲧ִ׷ app:layout_constraintBaseline_toBaselineOf="@id/anchor" " "

  34. 䊩畭׾➭ך 7JFX ך䊩畭ח䲧ִ׷ app:layout_constraintLeft_toLeftOf="@id/anchor" or app:layout_constraintStart_toStartOf="@id/anchor"

  35. 䊩畭׾➭ך 7JFX ך〸畭ח䲧ִ׷ app:layout_constraintLeft_toRightOf="@id/anchor" or app:layout_constraintStart_toEndOf="@id/anchor"

  36. 〸畭׾➭ך 7JFX ך〸畭ח䲧ִ׷ app:layout_constraintRight_toRightOf="@id/anchor" or app:layout_constraintEnd_toEndOf="@id/anchor"

  37. 〸畭׾➭ך 7JFX ך䊩畭ח䲧ִ׷ app:layout_constraintRight_toLeftOf="@id/anchor" or app:layout_constraintEnd_toStartOf="@id/anchor"

  38. ♳♴׾➭ך 7JFX ך⚥㣛ח䲧ִ׷ app:layout_constraintTop_toTopOf="@id/anchor" app:layout_constraintBottom_toBottomOf="@id/anchor"

  39. 䊩〸׾➭ך 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"

  40. 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"

  41. (VJEFMJOF

  42. 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"

  43. HVJEFMJOF חさ׻ׇגꂁ縧ׅ׷ android:layout_width="0dp" app:layout_constraintLeft_toRightOf="@id/guideline1" app:layout_constraintRight_toLeftOf="@id/guideline2" ! JEHVJEFMJOF ! JEHVJEFMJOF

  44. HPOF NBSHJO

  45. 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
  46. $IBJO

  47. 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
  48. 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ח䭷㹀ׅ׷
  49. 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
  50. 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   
  51. 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