24
Support Library 25.0.0 BottomNavigationView FiNC Inc Yuki Nanri

Bottom navigation

Embed Size (px)

Citation preview

Page 1: Bottom navigation

Support Library 25.0.0

BottomNavigationView

FiNC Inc Yuki Nanri

Page 2: Bottom navigation

自己紹介

• 南里勇気 (@neonankiti)• FiNC Android エンジニア• 趣味 : ネイチャー

Page 3: Bottom navigation

FiNC App とは• データ収集→分析→ソリューション→ EC• 行動変容と継続のためのウェルネスバリューチェーン

ウェルネスサーベイ

遺伝子・血液検査 食事指導

サーベイ+各種検査 分析結果レポート パーソナライズソリューション&コンテンツ

専門家のアドバイス SNSヘルスケアの知識・智恵レシピ豆知識理想の食事

腕を大きくふって歩く背伸びを 3回する肩甲骨を 3回す

野菜を毎食食べる1日 1ℓ以上水を飲む朝ヨーグルトを食べる

• 総合結果• 心身の状態• 解決すべき行動• 生活習慣病リスク• お勧めプラン etc.

フィットネスタスク

FiNC STORE

ポイント獲得

• オーダメイド・ パ ーソナル・ サプリメント

• 酵素ドリンク• スムージー etc.

タスク実行や食事投稿で貯まるポイントポイント適用可サーベイ結果

ヘルスケアツーリズム健康食コンテンツ

etc.

食事タスク

スクワットを 10回x3

継続して 10分歩く ライスを半分に控える毎食野菜から食べる

Page 4: Bottom navigation

Today’s Theme

BottomNavigationView

Page 5: Bottom navigation

Bottom Navigation View とは

参照 : https://material.google.com/components/bottom-navigation.html

Page 6: Bottom navigation

API は?

参照 : https://material.google.com/components/bottom-navigation.html

・デザインガイドラインはあったが、 API が提供されていなかった !!

Page 7: Bottom navigation

!!!!!

参照 : https://developer.android.com/topic/libraries/support-library/revisions.html

Page 8: Bottom navigation

!!!!!

参照 : https://developer.android.com/topic/libraries/support-library/revisions.html

Page 9: Bottom navigation

New Release!!

Support Library 25.0.0 Release!!

Page 10: Bottom navigation

Bottom Navigation View

BottomNaviationView クラス群の提供

Page 11: Bottom navigation

関連クラス

• a.s.d.widget.BottomNavigationView (FrameLayout)

• a.s.d.internal.BottomNavigationPresenter

• a.s.d.internal.BottomNavigationMenuView (ViewGroup)

• a.s.d.internal.BottomNavigationItemView (FrameLayout)

Page 12: Bottom navigation

構成

a.s.d.w.BNV

Presenter

MenuView

MenuItemViewMenu

Item Item Item

Xml Parse

Page 13: Bottom navigation

コンポーネント

1. BottomNavigationView

3. BottomNavigationMenuItemView

2. BottomNavigationMenuView

Page 14: Bottom navigation

設定

・ support library の version を 25.0.0 に

// builg.gradle

dependencies { // これで ButtomNavigationView が利用可能 compile 'com.android.support:appcompat-v7:25.0.0’

// 他の design support libs も使いたい。 compile 'com.android.support:design:25.0.0'}

Page 15: Bottom navigation

Menu の設定

・ res/menu に以下の xml を作成

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+id/item1" android:icon="@android:drawable/ic_btn_speak_now" android:title="item1" />

<item android:id="@+id/item2" android:icon="@android:drawable/ic_delete" android:title="item2" />

<item android:id="@+id/item3" android:icon="@android:drawable/ic_dialog_alert" android:title="item3" />

</menu>

Page 16: Bottom navigation

レイアウト

・以下のように xml にセット

・ menu で前ページでセットしたメニューをセットする。

<!-- xml --><a.s.d.w.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent">

<a.s.d.w.BottomNavigationView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:menu="@menu/item_bottom_navigation" />

</a.s.d.w.CoordinatorLayout>

Page 17: Bottom navigation

リスナー

・ BottomNavigationView のイベントリスナーをセット

・各アイテムが選択された際には View を入れ替え。

  (※Swipe では切り替わってはいけない。 )// Activity.javabnv.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {

@Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.item1: setFragment(); return true; case R.id.item2: setFragment(); return true; case R.id.item3: setFragment(); return true; } return false; }});

Page 18: Bottom navigation

xml の属性

・ xml と view の結びつけ

Page 19: Bottom navigation

アイテムは最大 5 個

Maximum number of items supported by BottomNavigationView is 5. Limit can be checked with BottomNavigationView#getMaxItemCount()

・ IllegalArgumentsException

Page 20: Bottom navigation

所感 1

・ itemBackground をセットするとエフェクトが効かない ( バグ? ) -> selector をセットするしかない?

Page 21: Bottom navigation

所感 2

・ Behavior が提供されていないので、ガイドライン通りの動きをする

には、カスタマイズが必要。

public class BisonBehavior extends CoordinatorLayout.Behavior<BottomNavigationView> {

public BisonBehavior(Context context, AttributeSet attrs) { super(context, attrs); }

@Override public boolean layoutDependsOn(CoordinatorLayout parent, BottomNavigationView child, View dependency) { return dependency instanceof FrameLayout; }

@Override public boolean onDependentViewChanged(CoordinatorLayout parent, BottomNavigationView child, View dependency) { return true; }}

Page 22: Bottom navigation

所感 3

<!--xml-->

<CoordinatorLayout>

<AppBarLayout>

<Toolbar />

</AppBarLayout>

<FrameLayout />

<BottomNavigationView />

</CoordinatorLayout>

・ xml を Activity と Fragment の実装の切り分けが属人的になりそ

う。

Page 23: Bottom navigation

所感 4

・ Fragment 切り替えのアニメーションは提供されていないのか?

Page 24: Bottom navigation

Thank you!!