ConstraintLayout

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