先看一下念书APP效果

先看一下念书APP效果：

弹出窗口滑下来动时，上方的标示条也会随之往下弯折变为箭头符号样子。

剖析

废话不多说，先给标示条做一个X光查验看一下：

1. 未滚动时标示条便是一个普通的圆角
2. 滚动的时候是一个箭头，箭头符号的两边是两个圆

标示条从点S滚动到点T环节中，圆L和圆K的断线交叉产生箭头符号。箭头符号根据Path把圆心点L、点T、圆心点K相互连接，转角处还要解决为圆弧，可以用Paint的setStrokeJoin()方式，此方法设定直线相接处的样式，选值有三个：

Paint.Join.MITER //钝角  
Paint.Join.Round //弧形  
Paint.Join.BEVEL //平行线

这儿取Round，该值的处理方式要以点T为圆心点、标示条相对高度的一半为直径画弧形，联接转角，如下图：

到此，标示条总体相对高度就确认了，便是QH长度，即ST 标示条相对高度。

完成

最先给标示条特定一个最高可弯折高度值bendingHeight，现阶段弯折比例为bendingRatio。

• onMeasure()精确测量宽高比：

1. 当弯折占比相当于0时，测高度便是标示条相对高度
2. 当弯折占比超过0时，测高度便是标示条相对高度 弯折相对高度

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int hMode = MeasureSpec.getMode(heightMeasureSpec);
    int hSize = MeasureSpec.getSize(heightMeasureSpec);
    int height;
    if (hMode == MeasureSpec.EXACTLY) {
        height = hSize;
    } else {
        if (bendingRatio <= 0) {
            height = barHeight   getPaddingTop()   getPaddingBottom();
        } else {
            int h = (int) (barHeight   bendingHeight * bendingRatio);
            height = Math.min(h   getPaddingTop()   getPaddingBottom(), hSize);
        }
    }
    setMeasuredDimension(width, height);
}

• onDraw()制作，

1. 当弯折占比相当于0时，制作圆角就可以
2. 当弯折占比超过0时，先用Path制作箭头符号，再制作两边的圆

@Override
protected void onDraw(Canvas canvas) {
    float radius = barHeight / 2f;
    if (bendingRatio <= 0) {
        rectF.set(getPaddingLeft(), getPaddingTop(),
                getWidth() - getPaddingRight(), getPaddingTop()   barHeight);
        barPaint.setStyle(Paint.Style.FILL);
        canvas.drawRoundRect(rectF, radius, radius, barPaint);
    } else {
        path.reset();
        path.moveTo(getPaddingLeft()   radius, getPaddingTop()   radius);
        float x = getPaddingLeft()   (getWidth() - getPaddingLeft() - getPaddingRight()) / 2f;
        float y = getPaddingTop()   barHeight / 2f   bendingHeight * bendingRatio;
        path.lineTo(x, y);
        path.lineTo(getWidth() - getPaddingRight() - radius, getPaddingTop()   radius);
        barPaint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(path, barPaint);
        canvas.drawCircle(getPaddingLeft()   radius, getPaddingTop()   radius,
                radius, circlePaint);
        canvas.drawCircle(getWidth() - getPaddingRight() - radius, getPaddingTop()   radius,
                radius, circlePaint);
    }
}

最后就必须启用setBendingRatio()方式即时变更弯折占比就可以。

实际效果

到这儿文章内容就水完后，有写的不好的区域还望强调。 参照联接：SlidingIndicatorBar-项目地址