Save 37% off PRO during our Black Friday Sale! »

BottomAppBarの話

 BottomAppBarの話

shibuya.apk #23

80a3a3857a55f154d23acb705eff72cc?s=128

star_zero

March 20, 2018
Tweet

Transcript

  1. BottomAppBarの話 shibuya.apk #23 2018/03/20 @STAR_ZERO

  2. Support Library 28.0.0 Alpha1

  3. Support Library 28.0.0 Alpha1

  4. Material Design Components for iOS https://material.io/components/ios/catalog/

  5. None
  6. 基本的な使い方

  7. build.gradle apply plugin: 'com.android.application' apply plugin: 'kotlin-android' apply plugin: 'kotlin-android-extensions'

    android { compileSdkVersion 'android-P' // ... } dependencies { // ... implementation 'com.android.support:appcompat-v7:28.0.0-alpha1' implementation 'com.android.support:design:28.0.0-alpha1' }
  8. Layout XML <android.support.design.widget.CoordinatorLayout> <android.support.design.widget.AppBarLayout> <android.support.v7.widget.Toolbar /> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" />

    <android.support.design.bottomappbar.BottomAppBar android:id="@+id/bottomappbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" app:backgroundTint="@color/colorPrimary" app:layout_dodgeInsetEdges="bottom" app:popupTheme="@style/AppTheme.PopupOverlay" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/bottomappbar" app:srcCompat="@drawable/ic_add" /> </android.support.design.widget.CoordinatorLayout>
  9. Layout XML <android.support.design.bottomappbar.BottomAppBar android:id="@+id/bottomappbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" app:backgroundTint="@color/colorPrimary" app:layout_dodgeInsetEdges="bottom" app:popupTheme="@style/AppTheme.PopupOverlay"

    />
  10. Layout XML <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/bottomappbar" app:srcCompat="@drawable/ic_add" />

  11. カスタマイズ

  12. FABの表示位置変更 app:fabAlignmentMode="end"

  13. メニューを表示 bottomappbar.replaceMenu(R.menu.menu_bottom) Center End

  14. くぼみの距離(深さ) 0dp (default) 20dp app:fabCradleVerticalOffset="20dp"

  15. くぼみの直径 64dp (default) 92dp app:fabCradleDiameter="92dp"

  16. くぼみの角の丸み 12dp 8dp (default) app:fabCradleRoundedCornerRadius="12dp" 0dp

  17. アニメーション

  18. くっついたり離れたり // くっつく bottomappbar.isFabAttached = true // 離れる bottomappbar.isFabAttached =

    false
  19. 真ん中いったり右にいったり // 真ん中 bottomappbar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_CENTER // 右 bottomappbar.fabAlignmentMode =

    BottomAppBar.FAB_ALIGNMENT_MODE_END
  20. おわり