BottomAppBarの話

shibuya.apk #23

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/
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. おわり