效果图

主要功能以及特色:

 多种Tab切换的动画效果

 实现底部导航中间按钮凸出的效果

 实现类似Wechat图标渐变，并且带动画

 实现TabBar上的红色标记,并且可以拖动

 提供监听Tab的点击事件,中间点击以及badge被拖拉消失的接口

 引用注解方式,免去自己手动构造TabBarItem

用法:

1.引入Gradle依赖

repositories { jcenter() } dependencies{ compile 'com.jpeng:JPTabBar:1.2.3' }

2.添加JPTabBar到你的主界面布局

<com.jpeng.jptabbar.JPTabBar android:id="@+id/tabbar" android:layout_width="match_parent" android:layout_height="56dp" android:background="#fff" jp:TabTextSize="12sp" />

3.在你的主界面使用注解声明数组变量,内部通过反射来生成TabItem,注意的是:NorIcons是必须的,每个数组长度要保持一致

@Titles private static final String[] mTitles = {"页面一","页面二","页面三","页面四"}; @SeleIcons private static final int[] mSeleIcons = {R.mipmap.tab1_selected,R.mipmap.tab2_selected,R.mipmap.tab3_selected,R.mipmap.tab4_selected}; @NorIcons private static final int[] mNormalIcons = {R.mipmap.tab1_normal, R.mipmap.tab2_normal, R.mipmap.tab3_normal, R.mipmap.tab4_normal};

或者，你可以在oncreate方法里面初始化导航的item

mTabbar.setTitles(R.string.tab1, R.string.tab2, R.string.tab3, R.string.tab4) .setNormalIcons(R.mipmap.tab1_normal, R.mipmap.tab2_normal, R.mipmap.tab3_normal, R.mipmap.tab4_normal) .setSelectedIcons(R.mipmap.tab1_selected, R.mipmap.tab2_selected, R.mipmap.tab3_selected, R.mipmap.tab4_selected) .generate();

4.经过上面,TabBar的布局基本上已经搭建好了。如果要实现Wechat那种渐变还有自动让ViewPager改变页面的功能的话,只需要在Activity oncreate方法里面,添加一行代码:(当然如果你不使用ViewPager的话，不调用这个方法)

//传入一定要集成继承ViewPager mTabbar.setContainer(mPager);

方法和节点说明:

JPTabBar主要方法:

/** * 设置自定义Tab切换动画 */ public void setCustomAnimate(Animatable customAnimate); /** * 显示BadgeView ,传入字符串 * 当然还有一个重载方法,第二个参数为int,设置消息数量 * 传入""字符串显示圆点 * 默认为false,不可拖动 */ public void showBadge(int position,String text); /** * 与上面方法是一样的,唯一不同就是,传入true的时候,这个徽章可以拖动 */ public void showBadge(int position,String text,boolean draggable); /** * 设置图标和标题的滑动渐变以及点击渐变是否使用 * 默认为false */ public JPTabBar setUseFilter(boolean filter); /** * 设置是否需要页面滚动动画 * 默认为false */ public JPTabBar setUseScrollAnimate(boolean scrollAnimate); /** *显示圆点徽章 */ public void showCircleBadge(int pos); /** * 设置徽章消息数量限制数 * 如果你使用这个方法 ShowBadge(int position,int count) * 如果第二个参数 > limit , Badge将会显示 "limit+" * 可以看下参考图 */ public void setCountLimit(int limit); /** * 隐藏BadgeView */ public void hideBadge(int position); /** * 切换Tab页面 */ public void setSelectTab(int index); /** * 设置点击TabBar事件的观察者 */ public void setTabListener(OnTabSelectListener listener); /** * 设置badgeView消失的回调事件 */ public void setDismissListener(BadgeDismissListener listener); /** * 这个方法用来获得中间TabItem的View对象(即你在XML设置的"TabMiddleView") */ public View getMiddleView();

结点说明:

结点名字结点说明参数类型默认值TabNormalColor字体和图标的未选中颜色color0xffAEAEAE(灰色)TabSelectColor字体和图标的选中的颜色color0xff59D9B9(青色)TabTextSizeTab底部文件大小dimension14spTabIconSizeTab图标的大小dimension24dpTabIconFilter设置图标是否随着字体颜色而改变booleantrueTabMargin设置图标距离上面和文字距离下面的距离dimension8dpTabSelectBg设置TabBarItem选中的背景颜色color透明TabAnimateTab切换的动画类型(None,Scale,Jump....)enumScaleTabMiddleViewTab中间自定义Viewlayout无TabMiddleBottomDis中间图标底部距离dimension20dpTabMiddleHMargin中间图标的左右间距dimension24dpBadgeColor徽章的背景颜色color#f00(红色)BadgePadding徽章的背景扩展距离dimension4dpBadgeTextSize徽章显示的字体大小dimension11dpBadgeVerticalMargin徽章垂直间距dimension3dpBadgeHorticalMargin徽章水平间距dimension20dp

注意事项

1.假如你已经给TabBar setContainer,不要setOnPageChangeListener给ViewPager

/** *如果你前面已经给TabBar设置了容器,然后调用这个方法的话,类似WeChat那种拖动渐变效果以及自动切换页面将会失效 *假如你要监听页面改变事件,可以使用TabListener */ mPager.setOnPageChangeListener(this);

2.如果你要使用中间凸出按钮,一定要使用RelativeLayout或者FrameLayout作为根结点,因为凸出按钮是依靠父layout添加进去的。

<?xml version="1.0" encoding="utf-8"?> <!--Use RelativeLayout or FrameLayout --!> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:jp="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" > <!--TabBar --!> </RelativeLayout>

3.如果你想让ViewPager禁止滑动,你可以使用我demo中的NoScrollViewPager