舵式导航JPTabBar

最新推荐文章于 2024-09-03 07:16:05 发布

原创最新推荐文章于 2024-09-03 07:16:05 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

android 专栏收录该内容

146 篇文章

订阅专栏

效果图

主要功能以及特色:

多种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	字体和图标的未选中颜色	color	0xffAEAEAE(灰色)
TabSelectColor	字体和图标的选中的颜色	color	0xff59D9B9(青色)
TabTextSize	Tab底部文件大小	dimension	14sp
TabIconSize	Tab图标的大小	dimension	24dp
TabIconFilter	设置图标是否随着字体颜色而改变	boolean	true
TabMargin	设置图标距离上面和文字距离下面的距离	dimension	8dp
TabSelectBg	设置TabBarItem选中的背景颜色	color	透明
TabAnimate	Tab切换的动画类型(None,Scale,Jump....)	enum	Scale
TabMiddleView	Tab中间自定义View	layout	无
TabMiddleBottomDis	中间图标底部距离	dimension	20dp
TabMiddleHMargin	中间图标的左右间距	dimension	24dp
BadgeColor	徽章的背景颜色	color	#f00(红色)
BadgePadding	徽章的背景扩展距离	dimension	4dp
BadgeTextSize	徽章显示的字体大小	dimension	11dp
BadgeVerticalMargin	徽章垂直间距	dimension	3dp
BadgeHorticalMargin	徽章水平间距	dimension	20dp

注意事项

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>