BottomNavigationView的使用(结合Fragment)

实现的效果如下图,既可以切换下面的标签来切换fragment,也可以直接左右滑动切换fragment。



1、首先当然是依赖导包

compile 'com.android.support:support-v4:25.3.1'
compile 'com.android.support:design:25.3.1'

2、xml文件中布局

 <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:overScrollMode="never"
        android:scrollbars="none"
        app:itemBackground="@color/orange"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/menu_bottom_nav">
    </android.support.design.widget.BottomNavigationView>


底部条的背景颜色    app :itemBackground= " @color/orange "

每个item的icon的颜色   app:itemIconTint="@color/white"

每个item的文字的颜色   app:itemTextColor="@color/white"

3、上面的控件还需要一个menu_bottom_nav.xml放置于res/menu中

<?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/bottom_nav_movie"
        android:enabled="true"
        android:icon="@mipmap/ic_location_on_white_24dp"
        android:title="@string/movie"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/bottom_nav_photo"
        android:enabled="true"
        android:icon="@mipmap/ic_find_replace_white_24dp"
        android:title="@string/photo"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/bottom_nav_ui"
        android:enabled="true"
        android:icon="@mipmap/ic_favorite_white_24dp"
        android:title="@string/ui"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/bottom_nav_net"
        android:enabled="true"
        android:icon="@mipmap/ic_book_white_24dp"
        android:title="@string/network"
        app:showAsAction="ifRoom"/>
</menu>

4、初始化(包括Fragment、viewPager、 BottomNavigationView

    private void initView() {
        mBottomNav = (BottomNavigationView) findViewById(R.id.bottom_nav);
        mPager = (ViewPager) findViewById(R.id.viewpager);
        fragmentList = new ArrayList<Fragment>();

        mMovieFragment = MovieFragment.newInstance(mResources.getString(R.string.movie));
        mPhotoFragment = PhotoFragment.newInstance(mResources.getString(R.string.photo));
        mUiFragment = UiFragment.newInstance(mResources.getString(R.string.ui));
        mNetworkFragment = NetworkFragment.newInstance(mResources.getString(R.string.network));
        fragmentList.add(mMovieFragment);
        fragmentList.add(mPhotoFragment);
        fragmentList.add(mUiFragment);
        fragmentList.add(mNetworkFragment);
        //给ViewPager设置适配器
        MainFragmentpagerAdapter adapter = new MainFragmentpagerAdapter(getSupportFragmentManager(), fragmentList);
        mPager.setAdapter(adapter);
        mPager.setCurrentItem(0);//设置当前显示标签页为第一页
    }

5、 MainFragmentpagerAdapter
package com.example.doubanrxjava2demo.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Created by gd02881 on 2017/7/4.
 */

public class MainFragmentpagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragList;

    public MainFragmentpagerAdapter(FragmentManager fm, List<Fragment> fragList) {
        super(fm);
        this.fragList = fragList;
    }

    @Override
    public Fragment getItem(int position) {
        return fragList.get(position);
    }

    @Override
    public int getCount() {
        return fragList.size();
    }
}


6、事件监听

 private void setListener() {
        mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                switch (position) {
                    case 0:
                        mBottomNav.setSelectedItemId(R.id.bottom_nav_movie);
                        break;
                    case 1:
                        mBottomNav.setSelectedItemId(R.id.bottom_nav_photo);
                        break;
                    case 2:
                        mBottomNav.setSelectedItemId(R.id.bottom_nav_ui);
                        break;
                    case 3:
                        mBottomNav.setSelectedItemId(R.id.bottom_nav_net);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        mBottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.bottom_nav_movie:
                        mPager.setCurrentItem(0);
                        break;
                    case R.id.bottom_nav_photo:
                        mPager.setCurrentItem(1);
                        break;
                    case R.id.bottom_nav_ui:
                        mPager.setCurrentItem(2);
                        break;
                    case R.id.bottom_nav_net:
                        mPager.setCurrentItem(3);
                        break;
                }
                return true;
            }
        });

    }


  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值