前言：
公司产品要实现如下图所示效果
image.png
Tab下边还有一个凸起的小三角，为了省事就用了一个图片显示隐藏实现。
谁知UI说小三角要有滑动效果，我就加了个平移动画。又说不行，要随着ViewPager滑动，所以就写了个自定义三角形指示器。
实现思路：
- 1、首先我是继承LinearLayout实现的，这里面可以写TextView或者一个RecyclerView。
我写的这个只是适用我的项目的所有属性都是固定死的，Tab只能是三个。
2、监听ViewPager的滑动事件也就是onPageScrolled()方法。
3、绘制小三角形并让它随ViewPager滑动
详细说下三角形的绘制及滑动
3.1绘制：
- 绘制三角形我们需要 ：三角形底宽、三角形绘制起始位置、三角形高度
三角形底宽：每个Tab的六分之一(屏幕宽度/Tab数/6)在这里Tab数为3
三角形绘制起始位置：第一个Tab的中点减去底宽的一半（屏幕宽度/可见Tab数量/2-底宽/2）
三角形高度：取底宽的一半（屏幕宽度/Tab数/6/2）也就是（底宽/2） 如果三角形的高度过高请自行调整
3.1滑动：
- 滑动距离：就是每个Tab的宽度。想让三角形跟着ViewPager滑动的话，需要用到onPageScrolled()的positionOffset参数代表滑动的偏移值，区间在[0,1)也就是说当前的滑动距离为Tab的宽度*偏移值(positionOffset),这样三角形就会在X轴上舒服的滑动了。
代码实现
public class ViewPagerTriangleIndicatorView extends LinearLayout {
/**
* 三角形底边宽
*/
private int mTriangleWidth;
/**
* 三角形高度
*/
private int mTriangleHeigh;
/**
* 三角形起始点
*/
private int mTriangleInitPos;
/**
* 三角形移动偏移
*/
private int mTriangleMoveWidth;
private Paint mPaint;
private Path mPath;
public ViewPagerTriangleIndicatorView(Context context) {
super(context, null);
}
public ViewPagerTriangleIndicatorView(Context context, AttributeSet attrs) {
super(context, attrs);
initPaint();
}
/**
* 初始化画笔
*/
private void initPaint() {
mPaint = new Paint();
mPaint.setColor(Color.parseColor("#FFFFFF"));
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
}
/**
* 初始化三角形
*/
private void initTriangle() {
mPath = new Path();
mPath.moveTo(0, 0);
mPath.lineTo(mTriangleWidth, 0);
mPath.lineTo(mTriangleWidth / 2, -mTriangleHeigh);
mPath.close();
}
/**
* 当布局大小发生变化时回调
*
* @param w
* @param h
* @param oldw
* @param oldh
*/
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mTriangleWidth = w / 3 / 6;
mTriangleHeigh = mTriangleWidth / 2 - 12;
mTriangleInitPos = getScreenWidth() / 3 / 2 - mTriangleWidth / 2;
initTriangle();
}
/**
* 绘制子View
*
* @param canvas
*/
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
canvas.translate(mTriangleInitPos + mTriangleMoveWidth, getHeight());
canvas.drawPath(mPath, mPaint);
}
/**
* 监听ViewPager滑动,联动Indicator
*
* @param position
* @param positionOffset
*/
public void scroll(int position, float positionOffset) {
int tabWidth = getScreenWidth() / 3;
mTriangleMoveWidth = (int) (tabWidth * position + tabWidth * positionOffset);
invalidate();
}
/**
* 获取屏幕宽度
*
* @return
*/
private int getScreenWidth() {
WindowManager windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics displayMetrics = new DisplayMetrics();
windowManager.getDefaultDisplay().getMetrics(displayMetrics);
return displayMetrics.widthPixels;
}
}
XML RecyclerView Item必须是平均分的
<cn....ViewPagerTriangleIndicatorView
android:id="@+id/mViewPagerTriangleIndicatorView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background"
android:visibility="visible" />
</cn......ViewPagerTriangleIndicatorView>
XML 加入3个Tab(TextView) 必须要加权重哦
<cn....ViewPagerTriangleIndicatorView
android:id="@+id/mViewPagerTriangleIndicatorView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="财经"
/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="娱乐"
/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="军事"
/>
</cn......ViewPagerTriangleIndicatorView>
调用三角形指示器：
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
mViewPagerTriangleIndicatorView.scroll(position, positionOffset)
}
