ViewPagerIndicator.java
public class ViewPagerIndicator extends LinearLayout {
private Paint mPaint;
private Path mPath;
private int mTriangleWidth;
private int mTriangleHeight;
private static final float RADIO_TRIANGLE_WIDTH = 1/6F;
//三角形的底边最大宽度
private final float DIMENTION_TRIANGLE_WIDTH_MAX = getScreenWidth() / 3 * RADIO_TRIANGLE_WIDTH;
private int mInitTranslationX;
private int mTranslationX;
private int mVisibleTabCount;
private static final int COUNT_DEFAULT_TAB = 4;
private static final int COLOR_TEXT_NORMAL = 0x77FFFFFF;
private static final int COLOR_TEXT_HIGHLIGHT = 0xFFFFFFFF;
private ViewPager mViewPager;
private HorizontalScrollView mScrollView;
private boolean isClicked = false; //判断是否是由点击产生的滑动
private int scrollLocation; //Tab滚动的位置
public ViewPagerIndicator(Context context) {
this(context, null);
}
public ViewPagerIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
//获取可见的tab数量
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerIndicator);
mVisibleTabCount = a.getInt(R.styleable.ViewPagerIndicator_visible_table_count, COUNT_DEFAULT_TAB);
if (mVisibleTabCount < 0) {
mVisibleTabCount = COUNT_DEFAULT_TAB;
}
a.recycle();
int w = getScreenWidth(); //屏幕宽度
Log.i("屏幕宽度", w+"");
mTriangleWidth = (int) (w / mVisibleTabCount * RADIO_TRIANGLE_WIDTH);
mTriangleWidth = (int) Math.min(mTriangleWidth, DIMENTION_TRIANGLE_WIDTH_MAX);
mInitTranslationX = w / mVisibleTabCount / 2 - mTriangleWidth / 2;
Log.i("InitTranslationX", ""+mInitTranslationX);
Log.i("mTrianglewidth", mTriangleWidth+"");
Log.i("TabWidth", ""+(int)(w/mVisibleTabCount));
initTriangle();
//初始化画笔
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.parseColor("#ffffff"));
mPaint.setStyle(Paint.Style.FILL);
mPaint.setPathEffect(new CornerPathEffect(3));
}
public interface OnPageChangeListener {
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
public void onPageSelected(int position);
public void onPageScrollStateChanged(int state);
}
public OnPageChangeListener mListener;
public void setOnPageChangedListener(OnPageChangeListener listener) {
this.mListener = listener;
}
@Override
protected void dispatchDraw(Canvas canvas) {
canvas.save();
canvas.translate(mInitTranslationX + mTranslationX, getHeight()+2);
canvas.drawPath(mPath, mPaint);
canvas.restore();
super.dispatchDraw(canvas);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
}
/**
* 通过布局添加Tab
*/
@Override
protected void onFinishInflate() {
super.onFinishInflate();
int cCount = getChildCount();
if (cCount == 0) {
return;
}
for (int i = 0; i < cCount; i++) {
View view = getChildAt(i);
LayoutParams lp = (LayoutParams) view.getLayoutParams();
lp.weight = 0;
lp.width = getScreenWidth() / mVisibleTabCount;
}
setItemClickEvent();
}
/**
* 获得屏幕的宽度
* @return
*/
private int getScreenWidth() {
WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
return outMetrics.widthPixels;
}
/**
* 初始化三角形
*/
private void initTriangle() {
mTriangleHeight = mTriangleWidth / 2;
mPath = new Path();
mPath.moveTo(0,0);
mPath.lineTo(mTriangleWidth, 0);
mPath.lineTo(mTriangleWidth/2, -mTriangleHeight);
mPath.close();
}
/**
* 指示器跟随手指进行滚动
* @param position
* @param offset
*/
public void scroll(int position, float offset) {
int tabWidth = getScreenWidth() / mVisibleTabCount;
mTranslationX = (int) (tabWidth * (position + offset));
invalidate();
//三角形的位置
int triangleLocation = mTranslationX + mInitTranslationX;
int screenWidth = getScreenWidth();
//当三角形处于滑动至屏幕外时移动外层ScrollView
if ((triangleLocation - scrollLocation) > (screenWidth - mInitTranslationX)
&& offset > 0.5 && !isClicked) {
if (mVisibleTabCount == 1) {
mScrollView.scrollTo(mTranslationX, 0);
scrollLocation = mTranslationX;
} else {
mScrollView.scrollTo((position - 2) * tabWidth, 0);
scrollLocation = (position - 2) * tabWidth;
}
} else if((triangleLocation - scrollLocation) < mInitTranslationX && offset > 0
&& offset < 0.5 && !isClicked) {
if (mVisibleTabCount == 1) {
mScrollView.scrollTo(mTranslationX, 0);
scrollLocation = mTranslationX;
} else {
mScrollView.scrollTo(position * tabWidth, 0);
scrollLocation = position * tabWidth;
}
}
//滑动完成时,将标记位恢复
if (offset == 0) {
isClicked = false;
}
}
public void setTabItemTitles(List<String> titles) {
if(titles != null && titles.size() > 0) {
this.removeAllViews();
for (String title : titles) {
addView(generateTextView(title));
}
}
setItemClickEvent();
}
/**
* 根据title创建tab
* @param title
* @return
*/
private View generateTextView(String title) {
TextView tv = new TextView(getContext());
LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
lp.width = getScreenWidth() / mVisibleTabCount;
tv.setText(title);
tv.setGravity(Gravity.CENTER);
tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
tv.setTextColor(COLOR_TEXT_NORMAL);
tv.setLayoutParams(lp);
return tv;
}
/**
* 设置可见Tab数量
* @param count
*/
public void setVisibleTabCount(int count) {
mVisibleTabCount = count;
}
/**
* 设置关联的ViewPager
* @param viewPager
* @param position
*/
public void setViewPager(ViewPager viewPager, int position) {
mViewPager = viewPager;
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
scroll(position, positionOffset);
if(mListener != null) {
mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
}
}
@Override
public void onPageSelected(int position) {
if(mListener != null) {
mListener.onPageSelected(position);
}
highLightTextView(position);
}
@Override
public void onPageScrollStateChanged(int state) {
if(mListener != null) {
mListener.onPageScrollStateChanged(state);
}
}
});
viewPager.setCurrentItem(position);
highLightTextView(position);
}
/**
* 设置外层HorizontalScrollView
* @param scrollView
*/
@RequiresApi(api = Build.VERSION_CODES.M)
public void setScrollView(HorizontalScrollView scrollView) {
mScrollView = scrollView;
mScrollView.setOnScrollChangeListener(new OnScrollChangeListener() {
@Override
public void onScrollChange(View view, int i, int i1, int i2, int i3) {
scrollLocation = i2;
}
});
}
/**
* 高亮显示选中tab文本
* @param position
*/
public void highLightTextView(int position) {
View view;
for (int i = 0; i < getChildCount(); i++) {
view = getChildAt(i);
if(view instanceof TextView) {
((TextView) view).setTextColor(COLOR_TEXT_NORMAL);
}
}
view = getChildAt(position);
if(view instanceof TextView) {
((TextView) view).setTextColor(COLOR_TEXT_HIGHLIGHT);
}
}
/**
* 设置Tab的点击事件
*/
public void setItemClickEvent() {
int cCount = getChildCount();
for (int i = 0; i < cCount; i++) {
final int j = i;
View view = getChildAt(i);
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
isClicked = true;
mViewPager.setCurrentItem(j);
}
});
}
}
}