Android 開発のボトムナビゲーション初体験

Material Design のデザインはとても美しいと感じており、特に下部のナビゲーションバー、シンプルなアイコン、透明な背景が気に入っています。自分でも体験してみることにしました。

Material Design は Google によって導入された新しいデザイン言語で、Google はこのデザイン言語がスマートフォン、タブレット、デスクトップ、そして「その他のプラットフォーム」に対して、より一貫性があり、広範な「外観と感触」を提供することを目的としていると述べています。

Material Design のいくつかの重要な機能には、システムフォント Roboto のアップグレード版が含まれており、色がより鮮やかで、アニメーション効果が際立っています。Google の考えは、Google プラットフォーム上の開発者がこの新しいフレームワークを習得することで、すべてのアプリが統一された外観を持つようにすることです。これは、Apple が開発者に提案したデザイン原則と同様です。

コンポーネント紹介#

Bottom Navigation は、下部ナビゲーションバーによく使用されます。ただし、含まれるタブの数は多すぎず少なすぎないべきであり、Google 公式ドキュメントによれば、タブの数は 3〜5 個が適切です。

実装方法#

Module の build.gradle に以下のコードを追加

compile 'com.roughike:bottom-bar:2.0.2'

Bottom Navigation 機能を実現するために、比較的使いやすいのはサードパーティの BottomBar ライブラリです。2017 年 1 月 8 日現在、最新のバージョンは 2.0.2 です。最新バージョンが必要な場合は、BottomBar の Github リポジトリを訪れてください。

res の下に xml タイプの xml フォルダーを新規作成

xml フォルダーの下に bottombar_tabs.xml ファイルを新規作成

res/xml/bottombar_tabs.xml

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
    <tabs>
        <tab
            id="@+id/tab_one"
            icon="@drawable/ic_3d_rotation_white_24dp"
            title="財務"
            barColorWhenSelected="#865242"
            inActiveColor="#FFFFFF"
            activeColor = "#FFFFFF"/>
        <tab
            id="@+id/tab_two"
            icon="@drawable/ic_account_balance_white_24dp"
            title="群组"
            barColorWhenSelected="#268434"
            inActiveColor="#FFFFFF"
            activeColor = "#FFFFFF"/>
        <tab
            id="@+id/tab_three"
            icon="@drawable/ic_accessibility_white_24dp"
            title="友達"
            barColorWhenSelected="#8b2099"
            inActiveColor="#FFFFFF"
            activeColor = "#FFFFFF"/>
    </tabs>
</PreferenceScreen>

barColorWhenSelected属性は、このタブが選択されたときの BottomBar の全体の色を制御します。inActiveColor属性は、このタブが未アクティブなときの画像の色です。それに対してactiveColor属性は、アクティブなときの画像の色を制御します。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="me.luzhoumin.bottomnavigation.MainActivity">

    <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        app:bb_tabXmlResource="@xml/bottombar_tabs"
        app:bb_behavior="underNavbar"
        app:bb_inActiveTabAlpha="0.6"
        app:bb_activeTabAlpha="1"
        app:bb_showShadow="true"/>

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        android:text="Hello World!"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="51dp" />

</RelativeLayout>

app:bb_tabXmlResourceは、3 ステップ目で作成した xml ファイルを指しており、各タブの属性が含まれています。

MainActivity.java

import android.support.annotation.IdRes;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
import com.roughike.bottombar.BottomBar;
import com.roughike.bottombar.BottomBarTab;
import com.roughike.bottombar.OnTabReselectListener;
import com.roughike.bottombar.OnTabSelectListener;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Bottom Barコンポーネントを取得
        BottomBar bottomBar = (BottomBar) findViewById(R.id.bottomBar);
        // 表示用のTextViewコンポーネントを取得
        final TextView tv = (TextView) findViewById(R.id.textview);
        // Bottom Barの選択リスナーを設定
        bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelected(@IdRes int tabId) {
                if (tabId == R.id.tab_one){
                    tv.setText("tab_one がクリックされました");
                }
                if (tabId == R.id.tab_two){
                    tv.setText("tab_group がクリックされました");
                }
                if (tabId == R.id.tab_three){
                    tv.setText("tab_three がクリックされました");
                }
            }
        });
        // Bottom Barの再選択リスナーを設定
        bottomBar.setOnTabReselectListener(new OnTabReselectListener() {
            @Override
            public void onTabReSelected(@IdRes int tabId) {
                if (tabId == R.id.tab_one){
                    tv.setText("tab_one が再度クリックされました");
                }
                if (tabId == R.id.tab_two){
                    tv.setText("tab_two が再度クリックされました");
                }
                if (tabId == R.id.tab_three){
                    tv.setText("tab_three が再度クリックされました");
                }
            }
        });
        // タブのバッジを設定
        BottomBarTab nearby = bottomBar.getTabWithId(R.id.tab_two);
        nearby.setBadgeCount(5);
    }
}

テーマスタイルの変更

res/values/styles.xml

<resources>
    <!-- 基本アプリケーションテーマ。 -->
    <!-- テーマをActionBarなしに変更 -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- ここでテーマをカスタマイズします。 -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!-- 追加 -->
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    </style>
</resources>

BottomBar API#

BottomBar 用

<com.roughike.bottombar.BottomBar
    android:id="@+id/bottomBar"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_alignParentBottom="true"
    app:bb_tabXmlResource="@xml/bottombar_tabs_three"
    app:bb_tabletMode="true"
    app:bb_behavior="shifting|shy|underNavbar"
    app:bb_inActiveTabAlpha="0.6"
    app:bb_activeTabAlpha="1"
    app:bb_inActiveTabColor="#222222"
    app:bb_activeTabColor="@color/colorPrimary"
    app:bb_titleTextAppearance="@style/MyTextAppearance"
    app:bb_titleTypeFace="fonts/MySuperDuperFont.ttf"
    app:bb_showShadow="true" />

bb_tabXmlResource

タブの XML リソース ID で、values/xml/ に存在します。

bb_tabletMode

タブレット用に BottomBar の動作を異なるようにしたい場合。サンプルプロジェクトにこの例があります！

bb_behavior
- shifting: 選択されたタブは他のタブよりも広くなります。
- shy: BottomBar を CoordinatorLayout 内に置くと、スクロール時に自動的に隠れます！
- underNavbar: BottomBar をナビゲーションバーの下に描画します！
bb_inActiveTabAlpha

非アクティブタブのアルファ値で、タブアイコンとタイトルに使用されます。

bb_activeTabAlpha

アクティブタブのアルファ値で、タブアイコンとタイトルに使用されます。

bb_inActiveTabColor

非アクティブタブの色で、タブアイコンとタイトルに使用されます。

bb_activeTabColor

アクティブタブの色で、タブアイコンとタイトルに使用されます。

bb_badgeBackgroundColor

この BottomBar 内のバッジの背景色です。

bb_titleTextAppearance

タイトル用のカスタムテキスト外観です。

bb_titleTypeFace

カスタムフォントファイルのパス、例えばfonts/MySuperDuperFont.ttf。その場合、フォントパスはsrc/main/assets/fonts/MySuperDuperFont.ttfのようになりますが、fonts/MySuperDuperFont.ttfだけを提供すれば、アセットフォルダーは自動的に補完されます。

bb_showShadow

影が表示されるか隠されるかを制御し、デフォルトは true です。

タブ用

<tab
    id="@+id/tab_recents"
    title="最近の"
    icon="@drawable/empty_icon"
    inActiveColor="#00FF00"
    activeColor="#FF0000"
    barColorWhenSelected="#FF0000"
    badgeBackgroundColor="#FF0000" />

inActiveColor

非アクティブタブの色で、タブアイコンとタイトルに使用されます。

activeColor

アクティブタブの色で、タブアイコンとタイトルに使用されます。

barColorWhenSelected

このタブが選択されたときに BottomBar 全体が持つべき色です。

badgeBackgroundColor

このタブ内のバッジの背景色です。

注意すべき点#

タブのアイコンは完全に透明、純黒、24dp、Padding = 0dpでなければならず、すべての画面密度の画像を用意することが望ましいです。そうしないと、アイコンが大きすぎたり小さすぎたりして、表示効果に影響を与えます。
画面の最下部に保持したい場合は、レイアウト xml の<com.roughike.bottombar.BottomBar>タグに属性android:layout_alignParentBottom="true"を追加し、6 ステップ目の作業を行うことを忘れないでください。

半米牙的笔记