ConstraintLayout再入門

 ConstraintLayout再入門

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

C8097f17712da7f3123f28a4d3e6bdb9?s=128

Takahiro Shimokawa

March 22, 2017
Tweet

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