ConstraintLayout再入門

potatotips#38での発表資料です。

Transcript

1. ConstraintLayout
   ࠶ೖ໳
   Takahiro Shimokawa in potatotips #38
   by @androhi 1
   

   View Slide

2. ࣗݾ঺հ
   • @androhi
   • FiNC inc.
   • Android ΞϓϦ։ൃ୲౰
   • DroidKaigi ӡӦελοϑ
   by @androhi 2
   

   View Slide

3. ໨࣍
   1. ConstraintLayoutͬͯԿ͚ͩͬʁ
   2. ConstraintLayoutͷجຊ
   3. AndroidStudio2.3ͰՃΘͬͨศརػೳ
   by @androhi 3
   

   View Slide

4. 1. ConstraintLayoutͬͯԿ͚ͩͬʁ
   • RelativeLayoutͷ͍͢͝΍ͭ
   • શͯͷϏϡʔ͕૬ରҐஔͰ഑ஔ͞ΕΔ
   • ΑΓॊೈͳࢦఆ͕Մೳ
   • LayoutEditorͰ؆୯ʹ࢖͑ΔΑ͏ʹͳ͍ͬͯΔ
   (From Build a Responsive UI with ConstraintLayout)
   by @androhi 4
   

   View Slide

5. ඞཁͳ΋ͷ ͦͷ1
   ConstraintLayout library
   by @androhi 5
   

   View Slide

6. by @androhi 6
   

   View Slide

7. ඞཁͳ΋ͷ ͦͷ2
   build.gradle΁ͷهड़
   by @androhi 7
   

   View Slide

8. dependencies {
   compile 'com.android.support.constraint:constraint-layout:1.0.2'
   }
   by @androhi 8
   

   View Slide

9. 2. ConstraintLayoutͷجຊ
   • ৽͍͠Layout Editor
   • ੍໿Λ௥Ճ͢Δ
   play-ground : ConstraintLayout Example
   by @androhi 9
   

   View Slide

10. ৽͍͠Layout Editor
    by @androhi 10
    

    View Slide

11. by @androhi 11
    

    View Slide

12. ...
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.android.constraintlayoutexamples.MainActivity">
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    android:id="@+id/button"
    ...
    android:text="@string/centering_views"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_constraintLeft_creator="1"
    tools:layout_constraintRight_creator="1" />
    ...
    by @androhi 12
    

    View Slide

13. ੍໿Λ௥Ճ͢Δ
    by @androhi 13
    

    View Slide

14. ʢҾ༻ : Add a constraintʣ
    by @androhi 14
    

    View Slide

15. 3. AndroidStudio2.3ͰՃΘͬͨ3ͭͷศརػ
    ೳ
    • ৽ςϯϓϨʔτ
    • Viewͷେ͖͞ΛΞεϖΫτൺͰઃఆ
    • Viewಉ࢜Λ࠯Ͱܨ͍ͩΑ͏ͳ੍ޚ
    by @androhi 15
    

    View Slide

16. ৽ςϯϓϨʔτ
    by @androhi 16
    

    View Slide

17. by @androhi 17
    

    View Slide

18. by @androhi 18
    

    View Slide

19. Viewͷେ͖͞ΛΞεϖΫτൺͰઃఆ
    by @androhi 19
    

    View Slide

20. by @androhi 20
    

    View Slide

21. Viewಉ࢜Λ࠯Ͱܨ͍ͩΑ͏ͳ੍ޚ
    by @androhi 21
    

    View Slide

22. ʢҾ༻ : Control linear groups with a chainʣ
    by @androhi 22
    

    View Slide

23. ·ͱΊ
    • ConstraintLayout͸ϨεϙϯγϒϧͳUIΛ࡞ΔͨΊͷػೳ͕
    ๛෋
    • Viewʹ௚઀੍໿Λ௥Ճ͢ΔͷͰɺView֊૚Λϑϥοτʹอͯ
    Δ
    • LayoutEditor্ͷૢ࡞͸׳Ε͕ඞཁͳͷͰɺ·ͣ͸αϯϓϧ
    Ͱ༡ΜͰΈΔ
    by @androhi 23
    

    View Slide

24. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝
    ·ͨ͠
    by @androhi 24
    

    View Slide