修改自astuetz/PagerSlidingTabStrip的tablayout – JPagerSlidingTabStrip

  • JPagerSlidingTabStrip: 增强版的 PagerSlidingTabStrip . 使用方式和PagerSlidingTabStrip一样简单,但功能和样式更丰富
  • 内置3中tab风格 还可以 继承子自JTabStyle 实现自己的风格和动画 (JTabStyle)
  • 增加 右上角的提示信息 (仿微信)

使用方法

1,引入依赖

compile 'com.yun.ospl:jtabstrip:1.4.1'

2,布局

<android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:context=".MainActivity"/>

<april.yun.JPagerSlidingTabStrip
    	android:id="@+id/tab_buttom"
    	android:layout_width="match_parent"
    	android:layout_height="wrap_content"
    	android:padding="5dp"/>

2,属性设置(当然也可以在布局里面设置相关属性)

1, 找控件
	ISlidingTabStrip buttomTabStrip = (ISlidingTabStrip) findViewById(R.id.tab_buttom);
2,拿TabStyleDelegate
	tabStyleDelegate = buttomTabStrip.getTabStyleDelegate();
3, 用TabStyleDelegate设置属性
	tabStyleDelegate.setJTabStyle(type)//类型有提供3种,还可以自己实现想要的效果,待会儿详细介绍
                    .setShouldExpand(true)//用过的都知道干啥用的
                    .setFrameColor(Color.parseColor("#45C01A"))//边框颜色 设置为透明则不画边框
                    .setTabTextSize(getDimen(R.dimen.tabstrip_textsize))//tab栏的字体大小
					//也可以直接传字符串的颜色,第一个颜色表示checked状态的颜色第二个表示normal状态
                    .setTextColor(Color.parseColor("#45C01A"),Color.GRAY)
                    .setDividerColor(Color.parseColor("#45C01A"))//tab之间的分割线 设置透明不画
                    .setDividerPadding(0)//tab之间分割线 的上下pading
                    .setUnderlineColor(Color.parseColor("#3045C01A"))//底部横线 透明不画
                    .setUnderlineHeight(0)//底部横线的高度 
					.setCornerRadio(0)//设置滚动指示器和边框的圆角半径
                    .setIndicatorColor(Color.parseColor("#7045C01A"))//滚动的指示栏的颜色 透明不画
		//滚动的指示栏的高度 :高度如果大于0小于tab高的一半则指示栏在底部 小于0则在tab栏的顶部 高度如果大于tab栏高度的一般那么包裹文字
                    .setIndicatorHeight(-8);

3, 给ViewPager写个Adapter

public class MyPagerAdapter extends FragmentPagerAdapter implements ISlidingTabStrip.IconTabProvider {

    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }


    @Override public CharSequence getPageTitle(int position) {
        return mTitles[position];//标题
    }

	//返回的是一个数组 第一个normal状态的icon 第二个checked状态下的
    @Override public int[] getPageIconResIds(int position) {
        //return new int[]{mNormal[position],mChecked[position]};
        return null;
    }


    @Override public int getPageIconResId(int position) {
        //		return mPressed[position];
        return mSelectors[position];
    }
    @Override public int getCount() {
        return mTitles.length;
    }


    @Override public Fragment getItem(int position) {
        return DemoCardFragment.newInstance(position);
    }
}

如果要实现微信的底部导航栏的效果那么 adapter需要实现IconTabProvider接口

  • 重点3个方法getPageTitle(提供标题文字内容),getPageIconResIds(提供标题的icon图标),getPageIconResId(提供标题的icon图标),

  • 后面两个方法的区别是:getPageIconResIds只需要两个数组,getPageIconResId需要一个数组+多个selector文件

    mTitles = getResources().getStringArray(R.array.tabs); //for getPageIconResIds mNormal = new int[] { R.drawable.ic_tab_msg, R.drawable.ic_tab_contact, R.drawable.ic_tab_moments, R.drawable.ic_tab_profile }; mChecked = new int[] { R.drawable.ic_tab_msg_h, R.drawable.ic_tab_contact_h, R.drawable.ic_tab_moments_h, R.drawable.ic_tab_profile_h }; //for getPageIconResId (需要selector) mSelectors = new int[] { R.drawable.tab_msg, R.drawable.tab_contact, R.drawable.tab_moment, R.drawable.tab_profile }; R.drawable.tab_msg 如下:

4,绑定ViewPager

(JPagerSlidingTabStrip) buttomTabStrip.bindViewPager(viewpager);

效果图:

=============================================

tabStyleDelegate.setJTabStyle 方法详细介绍

setJTabStyle有两个重载方法setJTabStyle(int tabStyle)和setJTabStyle(JTabStyle tabStyle)

  • setJTabStyle(int tabStyle)提供三种Style,分别是STYLE_DEFAULT,STYLE_ROUND,STYLE_DOTS

  • STYLE_DEFAULT效果

  • STYLE_ROUND效果

  • STYLE_DOTS效果

  • setJTabStyle(JTabStyle tabStyle)自己实现tab栏的效果绘制

    • 比如这个效果

      示例代码: public class CustomTabStyle extends JTabStyle { private Path mTrianglePath = new Path(); private int mTrigangleHeight = 10;

      public CustomTabStyle(ISlidingTabStrip slidingTabStrip) {
            super(slidingTabStrip);
        }
      
        @Override
        public void onDraw(Canvas canvas, ViewGroup tabsContainer, float currentPositionOffset, int lastCheckedPosition) {
        	//计算指示栏滚动时左右两边的位置 具体实现方式在父类
            calcuteIndicatorLinePosition(tabsContainer, currentPositionOffset, lastCheckedPosition);
            if (mTabStyleDelegate.getIndicatorColor() != Color.TRANSPARENT) {
                // draw indicator line
                calcuteIndicatorLinePosition(tabsContainer, currentPositionOffset, lastCheckedPosition);
                //draw indicator
                calcuteTrianglePath();
                canvas.drawPath(mTrianglePath,mIndicatorPaint);
            }
        }
        //计算三角形的path
        private void calcuteTrianglePath() {
            float tabWidth = mLinePosition.y - mLinePosition.x;
            float vertex = mH-mTrigangleHeight;
            float tr_left = mLinePosition.x+tabWidth/2-mTrigangleHeight;
            float tr_right = mLinePosition.x+tabWidth/2+mTrigangleHeight;
            mTrianglePath.reset();
            mTrianglePath.moveTo(tr_left, mH);
            mTrianglePath.lineTo(mLinePosition.x + tabWidth / 2, vertex);
            mTrianglePath.lineTo(tr_right, mH);
            mTrianglePath.close();
        }

      }

setIndicatorHeight(int)和setCornerRadio()

.setTextColor()设置tab栏文字颜色

######两个重载方法setTextColor(@Size(value = 2)@ColorInt int… colors)和setTextColor(@Size(value = 2) String… colorStrs)

setTabIconGravity(int tabIconGravity)

设置icon显示的位置,默认Gravity.TOP(微信导航栏效果)也可以设置下左右和Gravity.NO_GRAVITY(就是background了)

一行代码完成微信的消息提示

//index:导航栏种第几个tab ,msgNum:(0~99 显示数字,0 移除消,>99 显示~)
(JPagerSlidingTabStrip) buttomTabStrip..setPromptNum(index, msgNum);

为提示信息增加的属性

  • mPromptBgColor提示信息胶囊背景颜色
  • mPromptNumColor提示信息文字颜色

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:修改自astuetz/PagerSlidingTabStrip的tablayout – JPagerSlidingTabStrip