BottomNavigationBar+ViewPager+Fragment实现底部菜单栏

BottomNavigationBar+ViewPager+Fragment实现底部菜单栏，使用比较方便，记录一下使用方法，下面是效果图：

QQ截图20190304160943.png

1、fragment切换的Adapter

public class SectionsPagerAdapter extends FragmentPagerAdapter {
    List fragments;

    public SectionsPagerAdapter(FragmentManager fm, List fragments) {
        super(fm);
        this.fragments = fragments;
    }

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

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

2、MainActivity中写了相关的使用方法

public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener
        , ViewPager.OnPageChangeListener {
    private ViewPager viewPager;
    private BottomNavigationBar bottomNavigationBar;
    private List fragments;

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

    private void initView() {
        initViewPager();
        initBottomNavigationBar();

    }

    private void initBottomNavigationBar() {

        BadgeItem badge = new BadgeItem()
                //Badge的Border(边界)宽度
                .setBorderWidth(2)
                //Badge的Border颜色
                .setBorderColor("#FF0000")
                //Badge背景颜色
                .setBackgroundColor("#9ACD32")
                //位置，默认右上角
                .setGravity(Gravity.RIGHT | Gravity.TOP)
                .setText("22")
                .setTextColor("#FF4081")//文本颜色
                .setAnimationDuration(2000)
                .setHideOnSelect(true);//当选中状态时消失，非选中状态显示

        bottomNavigationBar = findViewById(R.id.bottom_navigation_bar);
        bottomNavigationBar.setTabSelectedListener(this);
        bottomNavigationBar.clearAll();
        bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED)
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.icon_main_home_selected, R.string.home)
                        .setInactiveIconResource(R.drawable.icon_main_home_normal)
                        .setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.icon_main_category_selected, R.string.category)
                        .setInactiveIconResource(R.drawable.icon_main_category_normal)
                        .setActiveColorResource(R.color.blue))
                .addItem(new BottomNavigationItem(R.drawable.icon_main_discover_selected, R.string.discover)
                        .setInactiveIconResource(R.drawable.icon_main_discover_normal)
                        .setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.icon_main_mine_selected, R.string.mine)
                        .setInactiveIconResource(R.drawable.icon_main_mine_normal)
                        .setActiveColorResource(R.color.grey).setBadgeItem(badge))
                .initialise();


    }

    private void initViewPager() {
        viewPager = findViewById(R.id.view_pager);

        fragments = new ArrayList<>();
        fragments.add(new HomeFragment());
        fragments.add(new CatagoryFragment());
        fragments.add(new DiscoverFragment());
        fragments.add(new UserCentralFragment());

        viewPager.setAdapter(new SectionsPagerAdapter(getSupportFragmentManager(), fragments));
        viewPager.addOnPageChangeListener(this);
        viewPager.setCurrentItem(0);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        bottomNavigationBar.selectTab(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    @Override
    public void onTabSelected(int position) {
        viewPager.setCurrentItem(position);
    }

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }
}

3、activity对应的layout文件

4、dimens文件也比较重要，相应的参数可以在dimens文件中进行修改，字体大小，间距等。

    
    16dp
    16dp


    // 以下是BottomNavigationBar属性
    120dp
    104dp
    168dp
    12dp

    56dp
    42dp
    56dp
    32dp
    32dp
    2dp
    0dp
    10dp

    14sp
    12sp
    0.857

    24dp
    36dp
    
    48dp
    


    96dp
    168dp
    64dp
    96dp
    6dp

    56dp
    42dp
    56dp
    32dp
    32dp
    16dp
    
    10dp
    0dp
    
    10dp
    

    14sp


    24dp
    36dp
    48dp

    8dp
    56dp
    64dp
    -8dp

    12sp
    //
    13dp
    4dp
    1dp
    2dp

四个fragment和相应的layout文件没有做处理，就不贴出来了，更多详细的使用方法可以查阅下面的github地址。

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