Git Product home page Git Product logo

jptabbar's Introduction

😊JPTabBar😊

Download

阅读英文文档 请点击这里

效果图






主要功能以及特色:

  • 多种Tab切换的动画效果

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

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

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

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

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

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

用法:

1.引入Gradle依赖

    repositories {
        jcenter()
    }

    dependencies{
        compile 'com.jpeng:JPTabBar:1.1.0'
    }

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};

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);

结点说明:

结点名字 结点说明 参数类型 默认值
TabHeight TabBar的高度,将会覆盖layout_height的设置 dimension 56dp
TabNormalColor 字体和图标的未选中颜色 color 0xffAEAEAE(灰色)
TabSelectColor 字体和图标的选中的颜色 color 0xff59D9B9(青色)
TabTextSize Tab底部文件大小 dimension 14sp
TabIconSize Tab图标的大小 dimension 24dp
TabIconFilter 设置图标是否随着字体颜色而改变 boolean true
TabMargin 设置图标距离上面和文字距离下面的距离 dimension 8dp
TabSelectBg 设置TabBarItem选中的背景颜色 color 透明
TabDuration Tab切换的动画时间 Integer 500
TabAnimate Tab切换的动画类型 enum Scale
TabMiddleIcon Tab中间的图标 drawable
BadgeColor 徽章的背景颜色 color #f00(红色)
BadgeDraggable 徽章是否可以拖动 boolean false
BadgePadding 徽章的背景扩展距离 dimension 4dp
BadgeTextSize 徽章显示的字体大小 dimension 11dp
BadgeMargin 徽章距离右边边缘的间隔 dimension 9dp

注意事项

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"
    >

更新日志

V1.0.0

  • 发布,添加README,上传GIF截图

V1.0.3

  • 添加额外一些方法
  • 修正代码风格

V1.0.4

  • 修复BadgeView显示位置随着字体位置偏差问题
  • 修复背景被TabItem背景覆盖问题
  • 修改高度默认56dp,徽章Margin为9dp

V1.0.5

  • 解决徽章BadgeMargin不能往左上角移动
  • Titles注解可支持int[]数组
  • 干掉徽章BadgeModes注解,提高徽章使用的灵活性,修改了TabBar调用徽章的方法
  • 添加TabSelectBg结点,用来设置选中的背景

V1.1.0

  • 解决XML布局中渲染报错问题
  • 修复点击Tab回调两次的BUG
  • 新增切换对动画的回调接口方法,提高TabBar动画灵活性

希望

如果你觉得这个项目快速和有用,有帮助,别忘记点一下右上角的星星,因为我要在下下年挑战BAT校招。

世界上再强的程序员写代码过程中难免会出现BUG,如果使用者发现BUG,可联系我或者直接issue,谢谢!

关于我

一名在校大学生,目前还在专研学习各种技术中...
QQ:83508440
邮箱:[email protected]

License

Copyright 2016 [JPeng]

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

jptabbar's People

Contributors

peng8350 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.