$30 off During Our Annual Pro Sale. View Details »

ConstraintLayout

Yuki Anzai
September 13, 2017

 ConstraintLayout

Yuki Anzai

September 13, 2017
Tweet

More Decks by Yuki Anzai

Other Decks in Technology

Transcript

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

  5. -BZPVU 9.- ח剅ֻ㜥さ

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


    View Slide

  6. 倜׃ֻ -BZPVU 9.- ׾⡲׷㜥さ
    <'JMF><-BZPVUSFTPVSDFMF>
    3PPUFMFNFOUח
    BOESPJETVQQPSUDPOTUSBJOU$POTUSBJOU-BZPVU

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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


    )FMMP

    View Slide

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

    View Slide

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

    )FMMP

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  23. NBUDI DPOTUSBJOU ךהֹ XSBQ@DPOUFOU ך״ֲחׅ׷
    android:layout_width="0dp"
    android:layout_height="0dp"

    app:layout_constraintWidth_default="wrap"

    app:layout_constraintHeight_default="wrap"
    )FMMP

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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"

    View Slide

  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"

    View Slide

  41. (VJEFMJOF

    View Slide

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

    View Slide

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

    View Slide

  44. HPOF NBSHJO

    View Slide

  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

    View Slide

  46. $IBJO

    View Slide

  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

    View Slide

  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ח䭷㹀ׅ׷

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide