bottom navigation
TRANSCRIPT
Support Library 25.0.0
BottomNavigationView
FiNC Inc Yuki Nanri
自己紹介
• 南里勇気 (@neonankiti)• FiNC Android エンジニア• 趣味 : ネイチャー
FiNC App とは• データ収集→分析→ソリューション→ EC• 行動変容と継続のためのウェルネスバリューチェーン
ウェルネスサーベイ
遺伝子・血液検査 食事指導
サーベイ+各種検査 分析結果レポート パーソナライズソリューション&コンテンツ
専門家のアドバイス SNSヘルスケアの知識・智恵レシピ豆知識理想の食事
腕を大きくふって歩く背伸びを 3回する肩甲骨を 3回す
野菜を毎食食べる1日 1ℓ以上水を飲む朝ヨーグルトを食べる
• 総合結果• 心身の状態• 解決すべき行動• 生活習慣病リスク• お勧めプラン etc.
フィットネスタスク
FiNC STORE
ポイント獲得
• オーダメイド・ パ ーソナル・ サプリメント
• 酵素ドリンク• スムージー etc.
タスク実行や食事投稿で貯まるポイントポイント適用可サーベイ結果
ヘルスケアツーリズム健康食コンテンツ
etc.
食事タスク
スクワットを 10回x3
継続して 10分歩く ライスを半分に控える毎食野菜から食べる
Today’s Theme
BottomNavigationView
Bottom Navigation View とは
参照 : https://material.google.com/components/bottom-navigation.html
API は?
参照 : https://material.google.com/components/bottom-navigation.html
・デザインガイドラインはあったが、 API が提供されていなかった !!
!!!!!
参照 : https://developer.android.com/topic/libraries/support-library/revisions.html
!!!!!
参照 : https://developer.android.com/topic/libraries/support-library/revisions.html
New Release!!
Support Library 25.0.0 Release!!
Bottom Navigation View
BottomNaviationView クラス群の提供
関連クラス
• a.s.d.widget.BottomNavigationView (FrameLayout)
• a.s.d.internal.BottomNavigationPresenter
• a.s.d.internal.BottomNavigationMenuView (ViewGroup)
• a.s.d.internal.BottomNavigationItemView (FrameLayout)
構成
a.s.d.w.BNV
Presenter
MenuView
MenuItemViewMenu
Item Item Item
Xml Parse
①
③
②
コンポーネント
1. BottomNavigationView
3. BottomNavigationMenuItemView
2. BottomNavigationMenuView
設定
・ 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'}
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>
レイアウト
・以下のように 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>
リスナー
・ 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; }});
xml の属性
・ xml と view の結びつけ
アイテムは最大 5 個
Maximum number of items supported by BottomNavigationView is 5. Limit can be checked with BottomNavigationView#getMaxItemCount()
・ IllegalArgumentsException
所感 1
・ itemBackground をセットするとエフェクトが効かない ( バグ? ) -> selector をセットするしかない?
所感 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; }}
所感 3
<!--xml-->
<CoordinatorLayout>
<AppBarLayout>
<Toolbar />
</AppBarLayout>
<FrameLayout />
<BottomNavigationView />
</CoordinatorLayout>
・ xml を Activity と Fragment の実装の切り分けが属人的になりそ
う。
所感 4
・ Fragment 切り替えのアニメーションは提供されていないのか?
Thank you!!