26

Google の新しいガイドライン (Pure android) に従って下部ナビゲーション タブを実装する方法。例はありますか。

参照: https://www.google.com/design/spec/components/bottom-navigation.html

4

11 に答える 11

13

サポート ライブラリ v25 を使用できます。

あなたのbuild.gradle

compile 'com.android.support:design:25.0.0'

をレイアウトに追加BottomNavigationViewします。

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        app:menu="@menu/bottom_navigation_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/mycolor"
        app:itemTextColor="@color/mycolor"/>

次に、メニュー ファイル (menu/bottom_navigation_menu.xml) を作成します。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/my_action1"
        android:enabled="true"
        android:icon="@drawable/my_drawable"
        android:title="@string/text"
        app:showAsAction="ifRoom" />
    ....
</menu>

次に、リスナーを追加します。

BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.bottom_navigation);

bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.my_action1:
                        //Do something...
                        break;

                }
                return false;
            }
        });
于 2016-10-20T18:47:09.390 に答える
13

私が知る限り、ここで最初のカスタムソリューションです。

アップデート:

公式の BottomNavigationViewは Support lib 25 に含まれています。

于 2016-03-17T12:46:07.877 に答える
10

現在、BottomNavigationViewは、2016 年 10 月にリリースされたデザイン サポート ライブラリ v25.0.0 に追加されています。

BottomNavigationViewxml ファイルに追加します。

たとえば。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"
    tools:context="priyank.patel.bottomnavigationdemo.MainActivity">

    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation"
        android:layout_alignParentTop="true">
    </FrameLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:menu="@menu/bottom_navigation_main" />
</RelativeLayout>

メニュー項目の xml をメニュー フォルダーに追加します。

たとえば。bottom_navigation_main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_video"
        android:enabled="true"
        android:icon="@drawable/ic_music_video_white_24dp"
        android:title="@string/text_video"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_audiotrack_white_24dp"
        android:title="@string/text_music"
        app:showAsAction="ifRoom" />

</menu>

あなたの活動クラスで設定OnNavigationItemSelectedListenerしてください。BottomNavigationView

たとえば。MainActivity.java

import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

private Fragment fragment;
private FragmentManager fragmentManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    fragmentManager = getSupportFragmentManager();
    fragment = new FavouriteFragment();
    final FragmentTransaction transaction = fragmentManager.beginTransaction();
    transaction.add(R.id.main_container, fragment).commit();

    BottomNavigationView bottomNavigationView = (BottomNavigationView)
            findViewById(R.id.bottom_navigation);

    bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.action_favorites:
                            fragment = new FavouriteFragment();
                            break;
                        case R.id.action_video:
                            fragment = new VideoFragment();
                            break;
                        case R.id.action_music:
                            fragment = new MusicFragment();
                            break;
                    }
                    final FragmentTransaction transaction = fragmentManager.beginTransaction();
                    transaction.replace(R.id.main_container, fragment).commit();
                    return true;
                }
            });
    }
}

BottomNavigation-Demo のチェックアウトはこちら

于 2016-11-23T14:42:59.947 に答える
2

user6146138 が言ったように、https://github.com/roughike/BottomBarは優れた実装です。そして、あなたはそれについての素晴らしいチュートリアルをここでチェックすることができます.これは本当に簡単に従うことができます.パート2では、フラグメントを添付して使用する方法を示しています.

別の優れた実装は、https://github.com/aurelhubert/ahbottomnavigationです。確認したい場合。私はそれに関するチュートリアルを知りませんが、リンクの指示はIMOで十分です.

于 2016-04-12T17:23:07.470 に答える
1

このリンクで完全なプロジェクトを追加した リポジトリhttps://gitlab.com/ashish29agre/android-bottom-navigation-view-support-libを見てください

こんにちは、これは少し遅れているかもしれません。ここに xml があります

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.BottomNavigationView
        android:id="@+id/nm_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimaryDark"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:layout_scrollFlags="scroll|enterAlways"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:menu="@menu/nav_menu" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/nm_bottom"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>

于 2016-10-20T10:17:00.453 に答える
0

コード例はまだありません。しかし、Androidアーセナルにはカスタムライブラリがあり、これは詳細なチュートリアルです。Androidマテリアルデザインの下部ナビゲーションを確認できます

于 2016-03-24T10:44:46.600 に答える
0

そのためにTabLayoutを使用できます。画面の下部に簡単に配置できます。

于 2016-03-17T12:47:10.470 に答える