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

Create Layouts with the Wearable UI Library

Yui Matsuura
September 16, 2015

Create Layouts with the Wearable UI Library

#potatotips

Yui Matsuura

September 16, 2015
Tweet

More Decks by Yui Matsuura

Other Decks in Programming

Transcript

  1. Create Layouts
    with
    the Wearable UI Library
    potatotips#21
    teshi04

    View Slide

  2. About Me
    ɾদӜ༏ҥ ˏteshi04
    ɾuPhyca Inc.
    ɾAndroid app: Justaway, όʔίʔυॻ੶ݕࡧ
    ɾAndroid Wear app: Twitwear, ৺ഥ਺πΠʔτ, ෲےΧ΢ϯτ͘Μ
    !

    View Slide

  3. Android Support Wearable
    Library 1.3.0

    View Slide

  4. android.support.wearable
    .view.*
    http://developer.android.com/intl/ja/reference/android/
    support/wearable/view/package-summary.html

    View Slide

  5. WearableListView
    • WearσόΠεʹ࠷దԽ͞Εͨ
    ListView (RecyclerView)
    • εΫϩʔϧΛࢭΊΔͱɺۙ͘ͷ
    ΞΠςϜʹࣗಈͰεφοϓ͢Δ

    View Slide

  6. DelayedConfirmationView
    • ԁܗΧ΢ϯτμ΢ϯࣜ

    λΠϚʔView
    • DelayedConfirmationListener
    ͰɺλΠϚʔ͕Ұपͨ͠ͱ͖ͷ
    ॲཧͱɺλΠϚʔΛ్தͰλο
    ϓ͞Εͨͱ͖ͷॲཧΛొ࿥Ͱ
    ͖Δ

    View Slide

  7. DismissOverlayView
    • ϩϯάλοϓͰActicityΛऴྃͰ
    ͖ΔΞϓϦͷ࣮૷ͷͨΊͷView
    • ϩϯάλοϓ͞Εͨͱ͖ʹ
    show()ΛݺͿͱɺදࣔ͞ΕΔɻ

    ☓Λλοϓ͢ΔͱActivity.finish()
    ͕ݺ͹ΕΔ
    • ͜ΕΛ࢖͍ͬͯΔΞϓϦ͸গͳ͍

    View Slide

  8. CircledImageView
    • ԁܗͷImageView

    View Slide

  9. CardFrame
    • ΧʔυελΠϧͳViewGroup

    View Slide

  10. CardFragment
    • CardFrame͕ઃఆ͞ΕͯΔ
    Fragment

    View Slide

  11. • ਨ௚ํ޲ͱਫฏํ޲ʹҠಈͰ
    ͖Δ
    GridViewPager
    • GridViewPagerͷΠϯδέʔ
    λʔ
    DotsPageIndicator

    View Slide

  12. ProgressSpinner
    • Wear༻ʹσβΠϯ͞Εͨ
    ProgressBar
    • ΧϥϑϧͳϓϩάϨεόʔ͕

    ͘Δ͘ΔΞχϝʔγϣϯ͢Δ

    View Slide

  13. CrossfadeDrawable
    • 2ͭͷDrawableΛϒϨϯυͰ͖Δ Drawable
    • Base DrawableͱɺFading Drawableɺ

    progress Λࢦఆ͢Δ

    View Slide

  14. ConfirmationActivity
    • ΞΫγϣϯΛ׬ྃͨ͠ޙͷ݁Ռ
    දࣔʹ࢖͑ΔActivity
    • SUCCESS_ANIMATION

    FAILURE_ANIMATION

    OPEN_ON_PHONE_ANIMATI
    ON
    • ը૾ͷԼʹදࣔ͞ΕΔςΩετ
    ΋มߋՄೳ

    View Slide

  15. ActionLabel
    • ಛघͳTextView
    • ઃఆͨ͠࠷େߦ਺
    ʢmaxLinesʣͱ Viewͷ෯ͷ੍
    ໿Λຬͨ͢ɺ࠷େͷจࣈαΠζ
    Λܭࢉͯ͠ɺͦͷܭࢉͨ͠จࣈ
    αΠζͰςΩετ͕දࣔ͞ΕΔ

    View Slide

  16. CircularButton
    • FloatingActionButtonͷ
    Wearable ༻ View
    • FloatingActionButtonͱಉ༷ʹ
    λοϓͨ͠ͱ͖ʹϦοϓϧΞχ
    ϝʔγϣϯ͢Δ

    View Slide

  17. ActionPage
    • CircularButtonͱActionLabel
    Λ಺แ͍ͯ͠ΔView
    • Android Wearͷ௨஌ΧʔυΛ
    ӈʹૹͬͨͱ͖ͷը໘Λ࠶ݱ
    Ͱ͖Δ

    View Slide

  18. • ؙܕσόΠεͷͱ͖͚ͩɺ

    ࢦఆͨ͠ํ޲ʹɺܾΊΒΕͨ༨ന͕෇͘
    BoxInsetLayout
    • ؙܕͷσόΠεͱ֯ܕͷσόΠε
    Ͱදࣔ͢ΔlayoutΛม͑ΒΕΔ
    WatchViewStub
    • ؙܕͷσόΠεͷͱ͖͚ͩ༨
    നΛ෇͚Δ͜ͱ͕Ͱ͖Δ
    WearableFrameLayout

    View Slide

  19. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide