当前位置: 移动技术网 > IT编程>移动开发>Android > Android首页底部导航栏实现方式

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

2018年11月04日  | 移动技术网IT编程  | 我要评论

ca4113,龙井婊,apid平板电脑

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);
    }
}

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

\

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

bottomnavigationviewhelper.disableshiftmode(view);

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

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

\

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网