美文网首页Android开发Android半栈工程师
几行代码实现ViewPager+Fragment底部导航(带红点

几行代码实现ViewPager+Fragment底部导航(带红点

作者: Vincent7Wong | 来源:发表于2018-06-06 15:17 被阅读498次

    因为公司好多项目会用到底部导航栏 大都千篇一律

    无非2-5个Tab(可能会有些动画、消息红点或者中间多个加号)

    总是重复相同的操作...

    所以 很懒的我希望几行代码就能实现这个效果(少敲一行是一行)

    先上效果图

    代码

    xml

    <com.next.easynavigition.view.NavigitionBar
        android:id="@+id/navigitionBar"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
    </com.next.easynavigition.view.NavigitionBar>
    

    Activity

    private String[] tabText = {"首页", "发现", "消息", "我的"};
    //未选中icon
    private int[] normalIcon = {R.mipmap.index, R.mipmap.find, R.mipmap.message, R.mipmap.me};
    //选中时icon
    private int[] selectIcon = {R.mipmap.index1, R.mipmap.find1, R.mipmap.message1, R.mipmap.me1};
    
    fragments.add(new FirstFragment());
    fragments.add(new SecondFragment());
    fragments.add(new FirstFragment());
    fragments.add(new SecondFragment());
    
    navigitionBar.setData(tabText, normalIcon, selectIcon, fragments, getSupportFragmentManager());
    

    如果你认同我的审美、只需传入必要的图标、文字、fragment就可以了

    传入三个Tab(你传入几个、我就生成几个)


    image

    展示红点

    navigitionBar.setMsgPointCount(2, 109);
    navigitionBar.setMsgPointCount(0, 5);
    navigitionBar.setHintPoint(3, true);
    
    image

    怎么样是不是很简单、代码也变得整洁了、、、

    如果不满意你也可以自己修改、很多属性供你修改

    <com.next.easynavigition.view.NavigitionBar
        android:id="@+id/navigitionBar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:navigition_height="60dp">
    
    </com.next.easynavigition.view.NavigitionBar>
    
    <!--底部导航栏高度-->
    <attr name="navigition_height" format="dimension" />
    <!--底部导航栏背景-->
    <attr name="navigition_background" format="color" />
    <!--Tab字体大小-->
    <attr name="tab_textsize" format="dimension" />
    <!--Tab文字距Tab图标的距离-->
    <attr name="tab_text_top" format="dimension" />
    <!--Tab图标大小-->
    <attr name="tab_icon_size" format="dimension" />
    <!--Tab未选中字体颜色-->
    <attr name="tab_normal_color" format="color" />
    <!--Tab选中字体颜色-->
    <attr name="tab_select_color" format="color" />
    <!--提示红点的大小-->
    <attr name="hint_point_size" format="dimension" />
    <!--消息红点的大小-->
    <attr name="msg_point_size" format="dimension" />
    <!--提示红点距Tab图标的距离-->
    <attr name="hint_point_left" format="dimension" />
    <!--消息红点距Tab图标的距离-->
    <attr name="msg_point_left" format="dimension" />
    <!--提示红点距离顶部的距离-->
    <attr name="red_point_top" format="dimension" />
    <!--消息红点距顶部的距离-->
    <attr name="msg_point_top" format="dimension" />
    <!--消息红点数字字体大小-->
    <attr name="msg_point_textsize" format="dimension" />
    <!--分割线高度-->
    <attr name="line_height" format="dimension" />
    <!--分割线颜色-->
    <attr name="line_color" format="color" />
    

    增加Tab点击动画

    navigitionBar.setData(tabText, normalIcon, selectIcon, fragments, getSupportFragmentManager(), Anim.ZoomIn);
    

    多种动画供你选择


    image

    添加监听事件

    
    navigitionBar.setData(tabText, normalIcon, selectIcon, fragments, getSupportFragmentManager(), Anim.ZoomIn, new NavigitionBar.OnItemClickListener() {
        @Override
        public void onItemClickEvent(View view, int position) {
            Toast.makeText(MainActivity.this,"您点击了第"+(position+1)+"个Tab",Toast.LENGTH_SHORT).show();
        }
    });
    

    页面切换动画(当点击底部Tab、页面滑动的动画)

    navigitionBar.setData(tabText, normalIcon, selectIcon, fragments, getSupportFragmentManager(), true);
    

    禁止页面滑动

     navigitionBar.getmViewPager().setCanScroll(false);
    
    image.png

    github:https://github.com/forvv231/EasyNavigition

    apk:https://fir.im/7r4d

    image.png

    相关文章

      网友评论

      • 6e99bf7c0c86:不想要任何tab的点击动画怎么写,找不到属性-_-。
        Vincent7Wong:@冗余_d303 1.0.1版本 默认无点击动画、也可以设置anim(null)
      • pandaneko:感谢 换了好用的插件神清气爽~
        Vincent7Wong:@pandaneko :smile:
      • e77d28f2a5b2:我想要加号是大图不带文字居中修改代码.mode(EasyNavigitionBar.RULE_CENTER),结果图标掉下去了并没有居中
        //RULE_CENTER 居中只需调节addLayoutHeight 默认和navigitionHeight相等 此时addLayoutBottom属性无效
        萌新有点不会用:disappointed_relieved:
        Vincent7Wong:@ICEDEATH mode是设置 普通模式、加号模式、自定义view模式。
        改为.addLayoutRule(EasyNavigitionBar.RULE_CENTER)
      • 最怕认真:哟,是个小姐姐啊
      • zzmn:没有早点看到,项目里自己写了一个,废了老大劲,感觉也没有楼主考虑周到。下次直接用楼主的😆
        Vincent7Wong:@vic_4af2 嗯,代码少点看着舒服:joy:
      • Lna_35da:建议加一个清除指定红点,不然只有下载楼主的源码自己去改 不能直接引用 写的很棒
        Vincent7Wong:@Lna_35da 1.0.0加入了更直观一点的方法
        //清除第四个红点提示
        navigitionBar.clearHintPoint(3);
        //清除第一个数字消息
        navigitionBar.clearMsgPoint(0);:smile:
        Lna_35da:@丶ZHI念 我没找到清除指定红点 好像是只能清除全部的
        Vincent7Wong:可以的、文章中有
        //数字消息大于99显示99+ 小于等于0不显示,取消显示则可以navigitionBar.setMsgPointCount(2, 0)
        //红点提示 第二个参数控制是否显示
        navigitionBar.setHintPoint(3, true);:joy:
      • 3A87娜就杰婚:你好,请问中间加号按钮下面支持添加文字吗?刚好有这个需求:yum:
        Vincent7Wong:1.0.0可以添加文字啦、耽搁的时间有点久了:smile:
      • 无声的喧闹:mark一下
        Vincent7Wong:@无声的喧闹 一有评论我就好激动\(≧▽≦)/
      • 当个海贼多好:大佬 你好,那个突出的按钮下面怎么加字啊
        Vincent7Wong:@当个海贼多好 1.0.0可以添加文字啦、耽搁的时间有点久了。有些改动、文章中有介绍、直接将加号图片文字和其他Tab一样传入即可:smile:
        当个海贼多好:@丶ZHI念 哦,这样啊,我说我研究了半天发现没有这个方法呢
        Vincent7Wong:@当个海贼多好 现在不能,之后加,我之前也看到过这样的需求
      • 微凉一季:感觉是还不错。
        @沐小晨曦
        Vincent7Wong:ni身后、那绿色的龙珠挺酷的:joy:
        沐小晨曦:的确,先fork再说。:blush: :blush: :blush:
      • 沐小晨曦:感觉是还不错。
        Vincent7Wong:@沐小晨曦 自己一边用一边完善、:joy:
      • cocobabi:你这个能不能加上一个设置禁止左右滑动的功能,NavigitionBar.this.mViewPager.setCurrentItem(view.getId());
        变成
        NavigitionBar.this.mViewPager.setCurrentItem(view.getId(),false);
        就行 我们可以自己传参
        cocobabi:@丶Jue 你的CustomViewPager 里面可以设置不滑动 现在加的参数可以用来设置CustomViewPager里面的isCanScroll,我一开始的方式好像不起作用
        Vincent7Wong:@cocobabi 恩恩,还有带加号的,我都想弄来着
      • AsianElite:赞同😀
        Vincent7Wong:@AsianElite :joy:
      • 65f3933d18d1:重要的是够不够轻量,只是一个导航加红点的话,太大了肯定是不如自己动手的。就是效果没那么好看hh
        65f3933d18d1:@丶Jue emmmmmmm
        Vincent7Wong:@快到怀里来_b846 我比较懒

      本文标题:几行代码实现ViewPager+Fragment底部导航(带红点

      本文链接:https://www.haomeiwen.com/subject/jxgvsftx.html