Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ConstraintLayout再入門

 ConstraintLayout再入門

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

Takahiro Shimokawa

March 22, 2017
Tweet

More Decks by Takahiro Shimokawa

Other Decks in Programming

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