Android ArcHeaderView和ArcHeaderD

前言

  阅读完Android大神依然范特稀西的文章Android 弧形ViewPager和弧形HeaderView（升级版）之后，感觉不错。弧形HeaderView很漂亮，于是乎想自己亲手写一个易于理解和使用的弧形HeaderView。我扩展了向上弧形的效果，分享给童鞋们。另外我还写了一个弧形ArcHeaderDrawable，传入一个Bitmap就可以构建出漂亮的弧形Drawable。

效果图

  看到上面的效果，估计有的童鞋们会嗤之以鼻了：不就是美工动动手指的事情吗？何必这么麻烦？美工作图确实是省时省力，快捷方便，但是扩展性就灰常之差了，这不是我们想要的，那就自定义吧。如何画出以上形状，通用思路有二：

• 思路一：矩形 + 弧形 组合。

• 弧形向下。先画上面矩形部分，再画下面弧形部分。
• 弧形向上。先画整个矩形，在用橡皮檫擦掉弧形区域。

• 思路二：Path路径。

沿着形状边缘画出Path路径（调用二阶贝塞尔曲线生成弧形线）。
这里采用的是思路二。

立即体验

扫描以下二维码下载体验App(从0.2.3版本开始，体验App内嵌版本更新检测功能)：

JSCKit库传送门：https://github.com/JustinRoom/JSCKit

实现

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setShader(shader);
        canvas.drawPath(mPath, mPaint);
    }

有了Shader和Path，我们就可以很轻松的画出来了。
Shader很多：

shader list.png
所以我们可以抽象出来一个获取Shader的方法，如此使用者可以随心所欲创建自己的Shader。
上面的效果图1、2是一个颜色渐变的LinearGradient，效果图3、4是BitmapShader。
Path计算也很简单：起点，连接中间点，连接弧线，再闭环。

private void calPath(){
        int w = getWidth();
        int h = getHeight();
        mPath.reset();
        mPath.moveTo(0, 0);
        switch (direction){
            case DIRECTION_DOWN_OUT_SIDE:
                mPath.lineTo(0, h - mArcHeight);
                mPath.quadTo(w / 2.0f, h + mArcHeight, w, h - mArcHeight);
                mPath.lineTo(w, 0);
                break;
            case DIRECTION_DOWN_IN_SIDE:
                mPath.lineTo(0, h);
                mPath.quadTo(w / 2.0f, h - mArcHeight * 2, w, h);
                mPath.lineTo(w, 0);
                break;
        }
        mPath.close();
    }

DIRECTION_DOWN_OUT_SIDE——弧形向下。
DIRECTION_DOWN_IN_SIDE——弧形向上。

如何使用

这里是使用示例和相关参数说明：
https://github.com/JustinRoom/JSCKit/blob/master/doc/baseComponent/arc_header.md

对外方法：
LGradientArcHeaderView

//设置渐变颜色
public void setColors(@ColorInt int startColor, @ColorInt int endColor)

PictureArcHeaderView

//设置要显示的Drawable资源文件
public void setDrawableResource(@DrawableRes int drawableId)
//设置要显示的Bitmap
public void setBitmap(@NonNull Bitmap bitmap) 

共用方法：

    //设置弧形显示的方向
    public void setDirection(@Direction int direction)

    public static final int DIRECTION_DOWN_OUT_SIDE = 0;//弧形向下
    public static final int DIRECTION_DOWN_IN_SIDE = 1;//弧形向上
    @IntDef({DIRECTION_DOWN_OUT_SIDE, DIRECTION_DOWN_IN_SIDE})
    @Retention(RetentionPolicy.SOURCE)
    public @interface Direction {
    }

详细请参照源码。

结尾

  曲折的人生并不可怕，大多数人正是毫无曲折地一路滑下去的。

如果使用过程中有问题，可以在下面给我留言。谢谢大家的鼎力支持，加个关注、给个赞吧！QQ：1006368252。