美文网首页高级UI
开源项目: FlycoTabLayout(1)

开源项目: FlycoTabLayout(1)

作者: 树新蜜蜂 | 来源:发表于2019-08-06 23:47 被阅读0次

    Android studio 项目导入依赖compile路径

    dependencies{
        compile 'com.android.support:support-v4:23.1.1'
        compile 'com.flyco.tablayout:FlycoTabLayout_Lib:2.0.2@aar'
    }
    

    FlycoTabLayout是一个Android TabLayout库,目前有3个TabLayout

    新增部分属性
    新增支持多种Indicator显示器
    新增支持未读消息显示
    新增方法setViewPager

     /** 关联ViewPager,用于不想在ViewPager适配器中设置titles数据的情况 */
        public void setViewPager(ViewPager vp, String[] titles)
    
        /** 关联ViewPager,用于连适配器都不想自己实例化的情况 */
        public void setViewPager(ViewPager vp, String[] titles, FragmentActivity fa, ArrayList<Fragment> fragments) 
    
    
    

    CommonTabLayout:不同于SlidingTabLayout对ViewPager依赖,它是一个不依赖ViewPager可以与其他控件自由搭配使用的
    TabLayout.SegmentTabLayout:仿照QQ消息列表头部tab切换的控件

    tl_indicator_color          color       设置显示器颜色
    tl_indicator_height         dimension   设置显示器高度
    tl_indicator_width          dimension   设置显示器固定宽度
    tl_indicator_margin_left    dimension   设置显示器margin,当indicator_width大于0,无效
    tl_indicator_margin_top     dimension   设置显示器margin,当indicator_width大于0,无效
    tl_indicator_margin_right   dimension   设置显示器margin,当indicator_width大于0,无效
    tl_indicator_margin_bottom  dimension   设置显示器margin,当indicator_width大于0,无效
    tl_indicator_corner_radius  dimension   设置显示器圆角弧度
    tl_indicator_gravity        enum        设置显示器上方(TOP)还是下方(BOTTOM),只对常规显示器有用
    tl_indicator_style          enum        设置显示器为常规(NORMAL)或三角形(TRIANGLE)或背景色块(BLOCK)
    tl_underline_color          color       设置下划线颜色
    tl_underline_height         dimension   设置下划线高度
    tl_underline_gravity        enum        设置下划线上方(TOP)还是下方(BOTTOM)
    tl_divider_color            color       设置分割线颜色
    tl_divider_width            dimension   设置分割线宽度
    tl_divider_padding          dimension   设置分割线的paddingTop和paddingBottom
    tl_tab_padding              dimension   设置tab的paddingLeft和paddingRight
    tl_tab_space_equal          boolean     设置tab大小等分
    tl_tab_width                dimension   设置tab固定大小
    tl_textsize                 dimension   设置字体大小
    tl_textSelectColor          color       设置字体选中颜色
    tl_textUnselectColor        color       设置字体未选中颜色
    tl_textBold                 boolean     设置字体加粗
    tl_iconWidth                dimension   设置icon宽度(仅支持CommonTabLayout)
    tl_iconHeight               dimension   设置icon高度(仅支持CommonTabLayout)
    tl_iconVisible              boolean     设置icon是否可见(仅支持CommonTabLayout)
    tl_iconGravity              enum        设置icon显示位置,对应Gravity中常量值,左上右下(仅支持CommonTabLayout)
    tl_iconMargin               dimension   设置icon与文字间距(仅支持CommonTabLayout)
    tl_indicator_anim_enable    boolean     设置显示器支持动画(only for CommonTabLayout)
    tl_indicator_anim_duration  integer     设置显示器动画时间(only for CommonTabLayout)
    tl_indicator_bounce_enable  boolean     设置显示器支持动画回弹效果(only for CommonTabLayout)
    tl_indicator_width_equal_title  boolean 设置显示器与标题一样长(only for SlidingTabLayout)
    
    
    

    SlidingTabLayout自定义属性支持下划线设置,控制下划线显示方向宽高,可以让线宽=文字宽度,也可以固定比例宽度,可以设置未读消息的小红点,也可以设置未读消息数量,当前这一切的前提都是基于ViewPager来实现,都需要绑定ViewPager,通过多种绑定方法

    /**关联ViewPager,Adapter重写了getPageTitle方法*/
     tabLayout.setViewPager(vp);
    
     /**关联ViewPager,用于不想在ViewPager适配器中设置titles数据的情况*/
     tabLayout.setViewPager(vp, mTitles);
    
     /**关联ViewPager,用于连适配器都不想自己实例化的情况,内部帮助实例化了一个InnerPagerAdapter*/
     tabLayout.setViewPager(vp, mTitles, this, mFragments);
    
    

    下面我们来看看tabLayout提供几个对我们比较有用的方法

    /**显示指定位置未读红点*/
    tabLayout.showDot(4);
    /**隐藏指定位置未读红点或消息*/
    tabLayout.hideMsg(5);
    /**showMsg(int position, int num):position位置,num小于等于0显示红点,num大于0显示数字,作用:显示未读消息,如果消息数量>99,显示效果99+*/
    tabLayout.showMsg(3, 5);
    /**  setMsgMargin(int position, float leftPadding, float bottomPadding)设置未读消息偏移,原点为文字的右上角.当控件高度固定,消息提示位置易控制,显示效果佳 */
    tabLayout.setMsgMargin(3, 0, 10);
    
    /**设置未读消息消息的背景*/
     MsgView msgView = tabLayout.getMsgView(3);
     if (msgView != null) {
         msgView.setBackgroundColor(Color.parseColor("#6D8FB0"));
      }
    //...................略...........
    

    自定义的属性那么多,对应的set方法自然也不少,不过对照上面自定义属性xml引用就好,一般情况下哪些方法都用不到了。

    CommonTabLayout调用

    SlidingTabLayout对应的方法在这里都适用不再重复,CommonTabLayout最重要的就是setTabData(ArrayList tabEntitys)方法,使得CommonTabLayout不再依赖于ViewPager完成初始化,实现底部导航或者头部导航效果,让我们告别RadioButton+ViewPager的时代,CustomTabEntity的命名有点问题哈,命名是一个接口非要定义Entity结尾,TabEntity实现该接口,修改构造方法,初始化内部参数,下面是一个配合CommonTabLayout+ViewPager的导航实例

    
            mFragmentList = addFragmentList(R.id.home_frameLayout, fragmentClasses);
    
            for (int i = 0; i < titles.length; i++) {
                mTabEntities.add(new TabEntity(titles[i], checkeds[i], normals[i]));
            }
    
            commonTabLayout.setTabData(mTabEntities);
            commonTabLayout.setOnTabSelectListener(new OnTabSelectListener() {
                @Override
                public void onTabSelect(int position) {
    
                    if (position == 1) {
                        topBarBuilder.configSearchStyle(titles[position], R.drawable.ic_action_search);
                    } else {
                        topBarBuilder.configTitle(titles[position]);
                    }
    
                    showFragment(R.id.home_frameLayout, position, mFragmentList);
                    onLoggerD("initial callback ,show fragment with position " + position + ";FragmentName:" + mFragmentList.get(position).toString());
                }
    
                @Override
                public void onTabReselect(int position) {
                    //TODO 重选
                }
            });
    
    

    SegmentTabLayout调用

    SegmentTabLayout实现效果就像qq消息列表顶部的切换效果,统一支持setTabData(mTitles)不过这里传入标题数组,tabLayout配合ViewPager切换调用tabLayout提供的方法setCurrentTab,SegmentTabLayout提供的 setTabData(String[] titles, FragmentActivity fa, int containerViewId, ArrayList fragments)方法在我们frameLayout+fragment布局切换Fragment比较实用的

    相关文章

      网友评论

        本文标题:开源项目: FlycoTabLayout(1)

        本文链接:https://www.haomeiwen.com/subject/ivagdctx.html