舵式导航JPTabBar

来源：互联网发布：摄影器材入门知乎编辑：程序博客网时间：2024/04/29 02:00

效果图

主要功能以及特色:

多种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

0 0