AnimatedPathView實現自定義圖片標簽

老早用過小紅書app，對於他們客戶端筆記這塊的設計非常喜歡，恰好去年在小紅書的競爭對手公司，公司基於產品的考慮和產品的發展，也需要將app社交化，於是在社區分享這塊多多少少參照了小紅書的設計，這裡面就有一個比較有意思的貼紙，標簽等設計，這裡用到了GpuImage的庫，這個demo我也將代碼開源了，有需要的去fork我的github的代碼，今天要說的是詳情頁面的AnimatedPathView實現可以動起來的標簽。（之前我們項目中由於時間問題，將這種效果用h5實現了，不過現在回React Native之後，發現實現起來更簡單了），今天要說的是用android實現這種效果。

且看個效果圖：

要實現我們這樣的效果，首先分析下，線條的繪制和中間圓圈的實現，以及文字的繪制。

對於線條的繪制我們不多說，直接canvas.DrawLine，不過這種線條是死的，不能實現運動的效果，還好Java為我們提供了另一個方法，我們可以用Path去實現，之前做騰訊手寫板的時候也是這麼做的(可以點擊鏈接查看效果，不過代碼沒辦法公開)，點擊打開鏈接，通過上面說的，我們改變PathEffect的偏移量就可以改變path顯示的長度，從而實現動畫的效果。而PathEffect有很多子類，從而滿足不同的效果，這裡不再說明。

float percentage = 0.0f;
PathEffect effect = new DashPathEffect(new float[]{pathLength, pathLength}, pathLength - pathLength*percentage);

這裡貼出AnimatedPathView的完整代碼：

public class AnimatedPathView extends View {

    private Paint mPaint;
    private Path mPath;
    private int mStrokeColor = Color.parseColor("#ff6c6c");
    private int mStrokeWidth = 8;

    private float mProgress = 0f;
    private float mPathLength = 0f;

    private float circleX = 0f;
    private float circleY = 0f;
    private int radius = 0;
    private String pathText="化妝包...";
    private int textX,textY;

    public AnimatedPathView(Context context) {
        this(context, null);
        init();
    }

    public AnimatedPathView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        init();
    }

    public AnimatedPathView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.AnimatedPathView);
        mStrokeColor = a.getColor(R.styleable.AnimatedPathView_pathColor, Color.parseColor("#ff6c6c"));
        mStrokeWidth = a.getInteger(R.styleable.AnimatedPathView_pathWidth, 8);
        a.recycle();

        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setColor(mStrokeColor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mStrokeWidth);
        mPaint.setAntiAlias(true);

        setPath(new Path());
    }

    public void setPath(Path p) {
        mPath = p;
        PathMeasure measure = new PathMeasure(mPath, false);
        mPathLength = measure.getLength();
    }


    public void setPathText(String pathText,int textX,int textY ) {
        this.pathText=pathText;
        this.textX=textX;
        this.textY=textY;
    }

    public void setPath(float[]... points) {
        if (points.length == 0)
            throw new IllegalArgumentException("Cannot have zero points in the line");

        Path p = new Path();
        p.moveTo(points[0][0], points[0][1]);

        for (int i = 1; i < points.length; i++) {
            p.lineTo(points[i][0], points[i][1]);
        }
        //將第一個xy坐標點作為繪制的原點
        circleX = points[0][0] - radius / 2;
        circleY = points[0][1] - radius / 2;

        setPath(p);
    }

    public void setPercentage(float percentage) {
        if (percentage < 0.0f || percentage > 1.0f)
            throw new IllegalArgumentException("setPercentage not between 0.0f and 1.0f");

        mProgress = percentage;
        invalidate();
    }

    public void scalePathBy(float x, float y) {
        Matrix m = new Matrix();
        m.postScale(x, y);
        mPath.transform(m);
        PathMeasure measure = new PathMeasure(mPath, false);
        mPathLength = measure.getLength();
    }

    public void scaleCircleRadius(int radius) {
        this.radius = radius;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //繪制圓形
//        drawCircle(canvas);
        //繪線條
        drawPathEffect(canvas);
        //繪制文字
        drawText(canvas);
        canvas.restore();
    }

    private void drawText(Canvas canvas) {
        mPaint.setTextSize(28);
        mPaint.setColor(Color.parseColor("#ffffff"));
        if (canvas!=null&& !TextUtils.isEmpty(pathText)){
            canvas.drawText(pathText,textX,textY,mPaint);
        }
        invalidate();
    }

    private void drawPathEffect(Canvas canvas) {
        PathEffect pathEffect = new DashPathEffect(new float[]{mPathLength, mPathLength}, (mPathLength - mPathLength * mProgress));
        mPaint.setPathEffect(pathEffect);
        mPaint.setStrokeWidth(4);
        mPaint.setColor(Color.parseColor("#ffffff"));
        canvas.save();
        canvas.translate(getPaddingLeft(), getPaddingTop());
        canvas.drawPath(mPath, mPaint);
    }

    private void drawCircle(Canvas canvas) {
        int strokenWidth = 25;

        mPaint.setStrokeWidth(strokenWidth);
        mPaint.setColor(Color.parseColor("#ffffff"));
        canvas.drawCircle(circleX, circleY, radius , mPaint);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(widthMeasureSpec);

        int measuredWidth, measuredHeight;

        if (widthMode == MeasureSpec.AT_MOST)
            throw new IllegalStateException("AnimatedPathView cannot have a WRAP_CONTENT property");
        else
            measuredWidth = widthSize;

        if (heightMode == MeasureSpec.AT_MOST)
            throw new IllegalStateException("AnimatedPathView cannot have a WRAP_CONTENT property");
        else
            measuredHeight = heightSize;

        setMeasuredDimension(measuredWidth, measuredHeight);
    }
}

這段代碼借鑒了點擊打開鏈接的部分代碼，並在此基礎上做了更多的判斷和改變，以滿足本文開頭說說的那種需要，上面的代碼只是實現了畫線條的效果，那麼如何實現中間圓圈的閃爍呢，其實也很簡單，我們可以用動畫來實現（View動畫），這裡我們大可以自己自定義一個View實現，而這個View包含了圓圈閃爍和畫線，按照上面的邏輯我們寫一個自定義的View，代碼如下：

 

 

public class PointView extends FrameLayout {

    private Context mContext;
    private List points;
    private FrameLayout layouPoints;
    private AnimatedPathView animatedPath;
    private int radius=10;
    private String text="圖文標簽 $99.00";

    public PointView(Context context) {
        this(context, null);
    }

    public PointView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PointView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }


    private void initView(Context context, AttributeSet attrs) {
        this.mContext = context;
        View imgPointLayout = inflate(context, R.layout.layout_point, this);
        layouPoints = (FrameLayout) imgPointLayout.findViewById(R.id.layouPoints);
        animatedPath=(AnimatedPathView) imgPointLayout.findViewById(R.id.animated_path);
    }


    public void addPoints(int width, int height) {
        addPoint(width, height);
    }

    public void setPoints(List points) {
        this.points = points;
    }

    private void addPoint(int width, int height) {
        layouPoints.removeAllViews();
        for (int i = 0; i < points.size(); i++) {
            double width_scale = points.get(i).widthScale;
            double height_scale = points.get(i).heightScale;
            LinearLayout view = (LinearLayout) LayoutInflater.from(mContext).inflate(R.layout.layout_img_point, this, false);
            ImageView imageView = (ImageView) view.findViewById(R.id.imgPoint);
            imageView.setTag(i);

            AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
            animationDrawable.start();

            LayoutParams layoutParams = (LayoutParams) view.getLayoutParams();

            layoutParams.leftMargin = (int) (width * width_scale);
            layoutParams.topMargin = (int) (height * height_scale);

//            imageView.setOnClickListener(this);

            layouPoints.addView(view, layoutParams);
        }
        initView();
        initPathAnimated();
    }

    private void initPathAnimated() {
        ViewTreeObserver observer = animatedPath.getViewTreeObserver();
        if(observer != null){
            observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    animatedPath.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                    animatedPath.scaleCircleRadius(radius);
                    animatedPath.scalePathBy(animatedPath.getWidth()/2,animatedPath.getHeight()/2);
                    float[][] points = new float[][]{
                            {animatedPath.getWidth()/2-radius/2,animatedPath.getHeight()/2-radius/2},
                            {animatedPath.getWidth()/2- UIUtils.dp2px(mContext,30), animatedPath.getHeight()/2- UIUtils.dp2px(mContext,40)},
                            {animatedPath.getWidth()/2-UIUtils.dp2px(mContext,150), animatedPath.getHeight()/2- UIUtils.dp2px(mContext,40)},
                    };
                    animatedPath.setPath(points);
//                    animatedPath.setPathText(text,animatedPath.getWidth()/2-UIUtils.dp2px(mContext,150), animatedPath.getHeight()/2- UIUtils.dp2px(mContext,50));
                }
            });
        }
    }

    private void initView() {
        animatedPath.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ObjectAnimator anim = ObjectAnimator.ofFloat(view, "percentage", 0.0f, 1.0f);
                anim.setDuration(2000);
                anim.setInterpolator(new LinearInterpolator());
                anim.start();
            }
        });
    }

}

上面對應的布局和資源文件：

 

layou_point.xml

 

<framelayout android:layout_height="wrap_content" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android">

    

    <framelayout android:id="@+id/layouPoints" android:layout_gravity="center" android:layout_height="wrap_content" android:layout_width="match_parent">

</framelayout></framelayout>

layout_img_point.xml

 

 

文中用到的Anim就是幀動畫了，

 

 

    
    ....省略n多圖片資源
    

而最後我們只需要在我們自己的MainActivity中添加簡單的代碼既可實現上面的效果：

 

 

private void initPointView() {
        List list=new ArrayList<>();
        PointScaleBean point=new PointScaleBean();
        point.widthScale = 0.36f;
        point.heightScale = 0.75f;
        list.add(point);
        pointView.setPoints(list);
        pointView.addPoints(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);
    }

對於布局我是這麼做的，將View的父布局的背景加一個圖片，實際的開發中大家可以寫一個相對的布局，這個就能實現實時的效果了，好了就寫到這裡，有疑問請留言或者加群。