开源代码

JPTabBar

介绍：

一个能显示消息提示的底部TabBar。

运行效果：

使用说明：

主要功能以及特色:

  •  多种Tab切换的动画效果

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

  •  实现WeChat那种滑动导航的底部渐变效果,随着滑动的距离变化而变化

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

  •  强大的BadgeView功能,智能判断数字隐藏与越界显示,两种显示模式。

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

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

用法:

1.引入Gradle依赖

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

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

    <com.jpeng.jptabbar.JPTabBar
        android:id="@+id/tabbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        jp:TabHeight="56dp"
        jp:BadgeDraggable="true"
        jp:TabAnimate="Jump"
        jp:BadgePadding="4dp"
        jp:BadgeMargin="5dp"
        jp:BadgeTextSize="10dp"
        />

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

    @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 = (JPTabBar) findViewById(tabbar);
        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
    mTabbar.setContainer(mPager);

5.本项目中已经提供了部分动画,如果你要使用自己定义的动画,可以setCustomAnimate,传入内部提供的Animatable接口,参考下面的例子

            mTabbar.setCustomAnimate(new Animatable() {
                /**
                 * 这个方法当你点击Tab切换页面的时候会调用
                 * @param target TabBar里面的IconView
                 * @param Duration 是你自定义的动画时间
                 */
                @Override
                public void playAnimate(View target, int Duration) {
                    ViewHelper.setPivotX(target,target.getLayoutParams().width/2);
                    ViewHelper.setPivotY(target,target.getLayoutParams().height/2);
                    AnimatorSet set = new AnimatorSet();
                    set.playTogether(
                            ObjectAnimator.ofFloat(target,"scaleX",0.2f,1f).setDuration(Duration),
                            ObjectAnimator.ofFloat(target,"scaleY",0.2f,1f).setDuration(Duration),
                            ObjectAnimator.ofFloat(target,"alpha",0.3f,1f).setDuration(Duration)
                    );
                    set.start();
                }
                /**
                 * 这个方法的解析
                 * 当你切换用手势滑动ViewPager,这个方法就会回调
                 * 这个方法生效的条件是下面要return true
                 * @param target 同上
                 * @param offset 这个参数代表偏差,范围 0-1
                 */
                @Override
                public void onPageAnimate(View target, float offset) {
                    ViewHelper.setScaleX(target,1+offset*0.2f);
                    ViewHelper.setScaleY(target,1+offset*0.2f);
                }
                /**
                 * 代表是否需要滑动中,调用Icon动画
                 * @return
                 */
                @Override
                public boolean isNeedPageAnimate() {
                    return true;
                }
            });

方法和节点说明:

JPTabBar主要方法:

    /**
     * 设置自定义Tab切换动画
     */
    public void setCustomAnimate(Animatable customAnimate);
     /**
     * 显示BadgeView ,传入字符串
     * 当然还有一个重载方法,第二个参数为int,设置消息数量
     * 传入""字符串显示圆点
     */
    public void ShowBadge(int position,String text);
    /**
     * 隐藏BadgeView
     */
    public void HideBadge(int position);
    /**
     * 切换Tab页面,是否带动画
     */
    public void setSelectTab(int index, boolean animated);
    /**
     * 设置点击TabBar事件的观察者
     */
    public void setTabListener(OnTabSelectListener listener);
    /**
     * 设置badgeView消失的回调事件
     */
    public void setDismissListener(BadgeDismissListener listener);

结点说明:

结点名字结点说明参数类型默认值
TabHeightTabBar的高度,将会覆盖layout_height的设置dimension56dp
TabNormalColor字体和图标的未选中颜色color0xffAEAEAE(灰色)
TabSelectColor字体和图标的选中的颜色color0xff59D9B9(青色)
TabTextSizeTab底部文件大小dimension14sp
TabIconSizeTab图标的大小dimension24dp
TabIconFilter设置图标是否随着字体颜色而改变booleantrue
TabMargin设置图标距离上面和文字距离下面的距离dimension8dp
TabSelectBg设置TabBarItem选中的背景颜色color透明
TabAnimateTab切换的动画类型enumScale
TabMiddleIconTab中间的图标drawable无
BadgeColor徽章的背景颜色color#f00(红色)
BadgeDraggable徽章是否可以拖动booleanfalse
BadgePadding徽章的背景扩展距离dimension4dp
BadgeTextSize徽章显示的字体大小dimension11dp
BadgeMargin徽章距离右边边缘的间隔dimension9dp

|

注意事项

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

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

2.假如你要实现中间凸出的按钮,必须要在主界面最外围的父结点设置 android:clipChildren="false",否则会遮盖

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout
    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"
    android:clipChildren="false"
    android:gravity="bottom"
    android:orientation="vertical"
    >

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

已下载
0