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

Androidアプリのタブレット向けレイアウト

 Androidアプリのタブレット向けレイアウト

potatotips #10

こやまカニ大好き

October 22, 2014
Tweet

More Decks by こやまカニ大好き

Other Decks in Programming

Transcript

  1. AndroidΞϓϦͷ
    λϒϨοτ޲͚ϨΠΞ΢τ
    potatotips#10
    @nein37

    View Slide

  2. • @nein37
    • Android Developer
    • Blog:

    nein37.hatenablog.com
    • Qiita:

    http://qiita.com/nein37

    View Slide

  3. λϒϨοτ޲͚ϨΠΞ΢τ
    ̒ύλʔϯ

    View Slide

  4. 1.ίϯςϯπΛ֦େ͢Δ
    2.ίϯςϯπͷ෯Λݻఆ͢Δ
    3. ίϯςϯπͷ഑ஔΛม͑Δ
    4. άϦουԽ
    5. ϝχϡʔͷల։
    6. Master/Detailύλʔϯ

    View Slide

  5. View Slide

  6. 1. ίϯςϯπΛ֦େ͢Δ
    • ࣮૷͕؆୯
    • ৘ใྔ͕૿΍ͤΔ
    • ը૾Λѻ͏৔߹͸஫ҙ

    View Slide

  7. 1.ίϯςϯπΛ֦େ͢Δ
    2.ίϯςϯπͷ෯Λݻఆ͢Δ
    3. ίϯςϯπͷ഑ஔΛม͑Δ
    4. άϦουԽ
    5. ϝχϡʔͷల։
    6. Master/Detailύλʔϯ

    View Slide

  8. View Slide

  9. 2. ίϯςϯπͷ෯Λݻఆ͢Δ
    • ࣮૷͕؆୯
    • ೖྗཝ͕ଟ͍ը໘޲͚
    • ৘ใྔ͕૿͑ͳ͍

    View Slide

  10. 1.ίϯςϯπΛ֦େ͢Δ
    2.ίϯςϯπͷ෯Λݻఆ͢Δ
    3. ίϯςϯπͷ഑ஔΛม͑Δ
    4. άϦουԽ
    5. ϝχϡʔͷల։
    6. Master/Detailύλʔϯ

    View Slide

  11. View Slide

  12. 3. ίϯςϯπͷ഑ஔΛม͑Δ
    • ը໘Λޮ཰తʹ࢖͑Δ
    • ৘ใྔͷଟ͍ը໘޲͚
    • ը૾΍ಈը͕ͳ͍ͱऐ͍͠

    View Slide

  13. 1.ίϯςϯπΛ֦େ͢Δ
    2.ίϯςϯπͷ෯Λݻఆ͢Δ
    3. ίϯςϯπͷ഑ஔΛม͑Δ
    4. άϦουԽ
    5. ϝχϡʔͷల։
    6. Master/Detailύλʔϯ

    View Slide

  14. View Slide

  15. 4. άϦουԽ
    !
    • ը໘಺ͷ৘ใྔ͕૿͑Δ
    • AdapterViewͰ࣮૷
    • ը૾΍ಈը͕ͳ͍ͱऐ͍͠

    View Slide

  16. 1.ίϯςϯπΛ֦େ͢Δ
    2.ίϯςϯπͷ෯Λݻఆ͢Δ
    3. ίϯςϯπͷ഑ஔΛม͑Δ
    4. άϦουԽ
    5. ϝχϡʔͷల։
    6. Master/Detailύλʔϯ

    View Slide

  17. View Slide

  18. 5. ϝχϡʔͷల։
    • ࢖͍উख͕ྑ͍
    • ֊૚ͷઙ͍ΞϓϦ޲͖
    • ݁ہ ෯ͷௐ੔͸ඞཁ

    View Slide

  19. 1.ίϯςϯπΛ֦େ͢Δ
    2.ίϯςϯπͷ෯Λݻఆ͢Δ
    3. ίϯςϯπͷ഑ஔΛม͑Δ
    4. άϦουԽ
    5. ϝχϡʔͷల։
    6. Master/Detailύλʔϯ

    View Slide

  20. View Slide

  21. 6. Master/Detailύλʔϯ
    • ࢖͍উख͕ྑ͍
    • SlidingPaneLayoutͰ࣮૷
    • ݁ہ ෯ͷௐ੔͸ඞཁ

    View Slide

  22. ͓·͚
    • Material Design

    Resources > Layout Templates

    λϒϨοτͷϨΠΞ΢τςϯϓϨʔτ͋Γ·͢


    https://www.google.com/design/spec/resources/
    layout-templates.html#layout-templates-tablet

    View Slide