Android BottomNavigationBar底部导航控制器的使用

原创 2016年03月23日 12:37:25

转载请标明出处:http://blog.csdn.net/u010046908/article/details/50962081本文出自:【李东的博客】

最近Google在自己推出的Material design中增加了Bottom Navigation导航控制。Android一直没有官方的导航控制器,自己实现确实是五花八门,有了这个规定之后,就类似苹果的底部Toolbar,以后我们的APP就会有一致的风格,先看一张效果:

这里写图片描述

这是官方在Material design中给出一张图,确实很不错。

1.BottomNavigationBar的下载地址

https://github.com/Ashok-Varma/BottomNavigation

2.使用的方法

2.1在Gradle中添加

compile ‘com.ashokvarma.android:bottom-navigation-bar:0.9.5’

2.2布局实现

 <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:layout_gravity="bottom"
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

2.3类中Activity中添加BottomNavigationItem

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);

bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
                .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
                .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
                .initialise();

2.4设置事件监听器TabChangeListener

 bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){
            @Override
            public void onTabSelected(int position) {
            }
            @Override
            public void onTabUnselected(int position) {]
            }
            @Override
            public void onTabReselected(int position) {
            }
        });

3.案例的实现

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_navigation_view_demo"
    tools:context="com.lidong.demo.navigation_view.BottomNavigationBarDemoActivity">

    <LinearLayout
        android:id="@+id/tb"
        android:layout_width="match_parent"
         android:layout_height="match_parent"
        android:orientation="vertical" />
    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_height="wrap_content"/>
</RelativeLayout>

Activity的代码:

package com.lidong.demo.navigation_view;

import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;

import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;
import com.lidong.demo.R;

/**
 * BottomNavigationBar实现
 */
public class BottomNavigationBarDemoActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {

    private BottomNavigationBar bottomNavigationBar;
    int lastSelectedPosition = 0;
    private String TAG = BottomNavigationBarDemoActivity.class.getSimpleName();
    private LocationFragment mLocationFragment;
    private FindFragment mFindFragment;
    private FavoritesFragment mFavoritesFragment;
    private BookFragment mBookFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation_view_demo);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);

        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.mipmap.ic_location_on_white_24dp, "位置").setActiveColor(R.color.orange))
                .addItem(new BottomNavigationItem(R.mipmap.ic_find_replace_white_24dp, "发现").setActiveColor(R.color.blue))
                .addItem(new BottomNavigationItem(R.mipmap.ic_favorite_white_24dp, "爱好").setActiveColor(R.color.green))
                .addItem(new BottomNavigationItem(R.mipmap.ic_book_white_24dp, "图书").setActiveColor(R.color.blue))
                .setFirstSelectedPosition(lastSelectedPosition )
                .initialise();

        bottomNavigationBar.setTabSelectedListener(this);
        setDefaultFragment();
    }

    /**
     * 设置默认的
     */
    private void setDefaultFragment() {
        FragmentManager fm = getFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        mLocationFragment = LocationFragment.newInstance("位置");
        transaction.replace(R.id.tabs, mLocationFragment);
        transaction.commit();
    }

    @Override
    public void onTabSelected(int position) {
        Log.d(TAG, "onTabSelected() called with: " + "position = [" + position + "]");
        FragmentManager fm = this.getFragmentManager();
        //开启事务
        FragmentTransaction transaction = fm.beginTransaction();
        switch (position) {
            case 0:
                if (mLocationFragment == null) {
                    mLocationFragment = LocationFragment.newInstance("位置");
                }
                transaction.replace(R.id.tb, mLocationFragment);
                break;
            case 1:
                if (mFindFragment == null) {
                    mFindFragment = FindFragment.newInstance("发现");
                }
                transaction.replace(R.id.tb, mFindFragment);
                break;
            case 2:
                if (mFavoritesFragment == null) {
                    mFavoritesFragment = FavoritesFragment.newInstance("爱好");
                }
                transaction.replace(R.id.tb, mFavoritesFragment);
                break;
            case 3:
                if (mBookFragment == null) {
                    mBookFragment = BookFragment.newInstance("图书");
                }
                transaction.replace(R.id.tb, mBookFragment);
                break;
            default:
                break;
        }
        // 事务提交
        transaction.commit();
    }

    @Override
    public void onTabUnselected(int position) {
        Log.d(TAG, "onTabUnselected() called with: " + "position = [" + position + "]");
    }

    @Override
    public void onTabReselected(int position) {

    }
}

fragment的代码

package com.lidong.demo.navigation_view;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.lidong.demo.R;

public class LocationFragment extends Fragment {


    public static LocationFragment newInstance(String param1) {
        LocationFragment fragment = new LocationFragment();
        Bundle args = new Bundle();
        args.putString("agrs1", param1);
        fragment.setArguments(args);
        return fragment;
    }

    public LocationFragment() {

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_location, container, false);
        Bundle bundle = getArguments();
        String agrs1 = bundle.getString("agrs1");
        TextView tv = (TextView)view.findViewById(R.id.tv_location);
        tv.setText(agrs1);
        return view;
    }



}

代码实现起来很简单,就加载布局,添加BottomNavigationItem,设置TabChangeListener就这三步搞定底部导航控制器。

代码下载地址

效果实现:
这里写图片描述 这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Android学习之BottomNavigationBar实现Android特色底部导航栏

Android底部导航栏的实现方式特别多,例如TabHost,TabLayout,或者TextView等,都可以实现底部导航栏的效果,但是却没有Google官方统一的导航栏样式,今天讲的就是Googl...

BottomNavigationBar的使用

最近在写底部导航栏,平时用到的就常见了,不过Material Desigh的导航栏却用的不多。在谷歌官方文档上有这种设计,可惜却没用过。所以学习了一下,这里记录下来。那么BottomNavigatio...

导航栏BottomNavigationBar使用

最近在写底部导航栏,平时用到的就常见了,不过Material Desigh的导航栏却用的不多。在谷歌官方文档上有这种设计,可惜却没用过。所以学习了一下,这里记录下来。 那么BottomNavigat...

底部导航控件——BottomNavigationBar简单使用

Google在自己推出的Material design中增加了Bottom Navigation导航控制。Android一直没有官方的导航控制器,自己实现确实是五花八门,有了这个规定之后,以后我们的A...

BottomNavigationBar和VieaPage实现滑动切换

BottomNavigationBar和ViewPage实现滑动切换

BottomNavigationBar+ViewPager+fragment

首先,你要导入依赖compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0' 布局: LinearLayout android:...
  • Lay_y
  • Lay_y
  • 2017年10月25日 15:35
  • 87

Android 底部导航栏 BottomNavigationBar的简单使用

BottomNavigationView bottomNavigationBar的简单使用

ANDROID底部导航栏的实现(一)— BottomNavigationBar

第一种介绍的就是使用开源库,因为使用开源库最简单,也更加的符合我们的审美标准,同时BottomNavigationBar还是符合当前的Material Design标准的。效果展示依赖 compile...

fdgfdggggggggggggggggggggg

sdfdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

Android仿小米商城底部导航栏之二(BottomNavigationBar、ViewPager和Fragment的联动使用)

Android仿小米商城底部导航栏之二(BottomNavigationBar、ViewPager和Fragment的联动使用)...
  • CN_DXTZ
  • CN_DXTZ
  • 2017年10月11日 13:14
  • 124
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android BottomNavigationBar底部导航控制器的使用
举报原因:
原因补充:

(最多只允许输入30个字)