ConstraintLayout再入門

Transcript

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

2. ࣗݾ঺հ • @androhi • FiNC inc. • Android ΞϓϦ։ൃ୲౰ •

   DroidKaigi ӡӦελοϑ by @androhi 2

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

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

   (From Build a Responsive UI with ConstraintLayout) by @androhi 4

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

6. by @androhi 6

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

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

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

   Example by @androhi 9

10. ৽͍͠Layout Editor by @androhi 10

11. by @androhi 11

12. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" ... android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.android.constraintlayoutexamples.MainActivity"> <android.support.constraint.ConstraintLayout android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="wrap_content">

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

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

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

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

    @androhi 15

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

17. by @androhi 17

18. by @androhi 18

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

20. by @androhi 20

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

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

    22

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

    by @androhi 23

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