美文网首页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