Android开发Android半栈工程师

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

2018-06-06  本文已影响498人  Vincent7Wong

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

无非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
上一篇 下一篇

猜你喜欢

热点阅读