欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android首页底部导航栏实现方式

程序员文章站 2022-05-16 16:16:53
android底部导航栏的实现方式这里主要总结了3种,代码尽量追求精简,可以直接拷贝使用,便于大家比较选择。 1.bottomnavigationview实现底部导航栏 <1>首先在gr...

android底部导航栏的实现方式这里主要总结了3种,代码尽量追求精简,可以直接拷贝使用,便于大家比较选择。

1.bottomnavigationview实现底部导航栏

<1>首先在gradle文件中添加依赖,implementation'com.android.support:design:26.1.0',注意该依赖的版本不要高于compilesdkversion,否则会报错。

<2>在res目录下新建menu文件夹,创建bottom_view.xml,也就是我们底部tab的样式,代码如下:


<3>activity中引入我们的bottom_view.xml,代码如下:

 

    
    

<4>activity中的代码处理如下:

public class bottomnavigationviewactivity extends appcompatactivity {
    private button button;
    private menuitem lastitem; // 上一个选中的item
    private viewpager viewpager;
    @override
    protected void oncreate(bundle savedinstancestate) {
        super.oncreate(savedinstancestate);
        setcontentview(r.layout.activity_main);
        initview();
    }
    public void initview(){
        viewpager=findviewbyid(r.id.viewpager);
        final bottomnavigationview view=(bottomnavigationview)findviewbyid(r.id.bottom_navigation);
        //默认 >3 的选中效果会影响viewpager的滑动切换时的效果,故利用反射去掉
     //   bottomnavigationviewhelper.disableshiftmode(view);
        //拿到默认选中的item
        lastitem=view.getmenu().getitem(0);
        //点击选择item
        view.setonnavigationitemselectedlistener(new bottomnavigationview.onnavigationitemselectedlistener() {
            @override
            public boolean onnavigationitemselected(@nonnull menuitem item) {
                switch (item.getitemid()) {
                    case r.id.item_news:
                        viewpager.setcurrentitem(0);
                        break;
                    case r.id.item_lib:
                        viewpager.setcurrentitem(1);
                        break;
                    case r.id.item_find:
                        viewpager.setcurrentitem(2);
                        break;
                    case r.id.item_more:
                        viewpager.setcurrentitem(3);
                        break;
                }
                return false;
            }
        });
        viewpager.addonpagechangelistener(new viewpager.onpagechangelistener() {
            @override
            public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {
            }
            @override
            public void onpageselected(int position) {
                if (lastitem != null) {
                    lastitem.setchecked(false);
                } else {
                   view.getmenu().getitem(0).setchecked(false);
                }
                lastitem= view.getmenu().getitem(position);
                lastitem.setchecked(true);
            }
            @override
            public void onpagescrollstatechanged(int state) {
            }
        });
        setupviewpager(viewpager);
    }
    private void setupviewpager(viewpager viewpager) {
        viewpageradapter adapter = new viewpageradapter(getsupportfragmentmanager());

        adapter.addfragment(new homefragment());
        adapter.addfragment(new giftfragment());
        adapter.addfragment(new personfragment());
        adapter.addfragment(new settingfragment());
        viewpager.setadapter(adapter);
    }
}

我们可以看一下实现的效果图:

Android首页底部导航栏实现方式

截止到上面的代码,需要说明一下几点:
1.当menu文件夹下的bottom_view中的item数<=3时,item的展示是没有问题的,但是当item数>=4时,就会出现上图的动画效果,比较丑陋,那么如何去规避这个动画效果呢?只需要将我们上面代码中的这行代码取消注释,使其生效即可。

bottomnavigationviewhelper.disableshiftmode(view);

2.在activity_main的布局文件中,我们给高度为5dp的view文件添加了水波纹的背景,但是为什么在点击item的时候,水波纹会出现呢?虽然这是我想要的结果。

3.最终实现的效果图如下:

Android首页底部导航栏实现方式