BottomAppBarの話 - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Support Library 28.0.0 Alpha1

Slide 3

Slide 3 text

Support Library 28.0.0 Alpha1

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

基本的な使い方

Slide 7

Slide 7 text

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' }

Slide 8

Slide 8 text

Layout XML

Slide 9

Slide 9 text

Layout XML

Slide 10

Slide 10 text

Layout XML

Slide 11

Slide 11 text

カスタマイズ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

アニメーション

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

おわり