ConstraintLayout再入門

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

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