老早用过小红书app，对于他们客户端笔记这块的设计非常喜欢，恰好去年在小红书的竞争对手公司，公司基于产品的考虑和产品的发展，也需要将app社交化，于是在社区分享这块多多少少参照了小红书的设计，这里面就有一个比较有意思的贴纸，标签等设计，这里用到了GpuImage的库，这个demo我也将代码开源了，有需要的去fork我的github的代码，今天要说的是详情页面的AnimatedPathView实现可以动起来的标签。（之前我们项目中由于时间问题，将这种效果用h5实现了，不过现在回React Native之后，发现实现起来更简单了），今天要说的是用Android实现这种效果。

且看个效果图：

要实现我们这样的效果，首先分析下，线条的绘制和中间圆圈的实现，以及文字的绘制。

对于线条的绘制我们不多说，直接canvas.DrawLine，不过这种线条是死的，不能实现运动的效果，还好Java为我们提供了另一个方法，我们可以用Path去实现，之前做腾讯手写板的时候也是这么做的(可以点击链接查看效果，不过代码没办法公开)，点击打开链接，通过上面说的，我们改变PathEffect的偏移量就可以改变path显示的长度，从而实现动画的效果。而PathEffect有很多子类，从而满足不同的效果，这里不再说明。

[html]  view plain  copy

 print ?

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

[html]  view plain  copy

 print ?

1. public class AnimatedPathView extends View {  
2.   
3.     private Paint mPaint;  
4.     private Path mPath;  
5.     private int mStrokeColor = Color.parseColor("#ff6c6c");  
6.     private int mStrokeWidth = 8;  
7.   
8.     private float mProgress = 0f;  
9.     private float mPathLength = 0f;  
10.   
11.     private float circleX = 0f;  
12.     private float circleY = 0f;  
13.     private int radius = 0;  
14.     private String pathText="化妆包...";  
15.     private int textX,textY;  
16.   
17.     public AnimatedPathView(Context context) {  
18.         this(context, null);  
19.         init();  
20.     }  
21.   
22.     public AnimatedPathView(Context context, AttributeSet attrs) {  
23.         this(context, attrs, 0);  
24.         init();  
25.     }  
26.   
27.     public AnimatedPathView(Context context, AttributeSet attrs, int defStyle) {  
28.         super(context, attrs, defStyle);  
29.   
30.         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.AnimatedPathView);  
31.         mStrokeColor = a.getColor(R.styleable.AnimatedPathView_pathColor, Color.parseColor("#ff6c6c"));  
32.         mStrokeWidth = a.getInteger(R.styleable.AnimatedPathView_pathWidth, 8);  
33.         a.recycle();  
34.   
35.         init();  
36.     }  
37.   
38.     private void init() {  
39.         mPaint = new Paint();  
40.         mPaint.setColor(mStrokeColor);  
41.         mPaint.setStyle(Paint.Style.STROKE);  
42.         mPaint.setStrokeWidth(mStrokeWidth);  
43.         mPaint.setAntiAlias(true);  
44.   
45.         setPath(new Path());  
46.     }  
47.   
48.     public void setPath(Path p) {  
49.         mPath = p;  
50.         PathMeasure measure = new PathMeasure(mPath, false);  
51.         mPathLength = measure.getLength();  
52.     }  
53.   
54.   
55.     public void setPathText(String pathText,int textX,int textY ) {  
56.         this.pathText=pathText;  
57.         this.textX=textX;  
58.         this.textY=textY;  
59.     }  
60.   
61.     public void setPath(float[]... points) {  
62.         if (points.length == 0)  
63.             throw new IllegalArgumentException("Cannot have zero points in the line");  
64.   
65.         Path p = new Path();  
66.         p.moveTo(points[0][0], points[0][1]);  
67.   
68.         for (int i = 1; i < points.length; i++) {  
69.             p.lineTo(points[i][0], points[i][1]);  
70.         }  
71.         //将第一个xy坐标点作为绘制的原点  
72.         circleX = points[0][0] - radius / 2;  
73.         circleY = points[0][1] - radius / 2;  
74.   
75.         setPath(p);  
76.     }  
77.   
78.     public void setPercentage(float percentage) {  
79.         if (percentage < 0.0f || percentage > 1.0f)  
80.             throw new IllegalArgumentException("setPercentage not between 0.0f and 1.0f");  
81.   
82.         mProgress = percentage;  
83.         invalidate();  
84.     }  
85.   
86.     public void scalePathBy(float x, float y) {  
87.         Matrix m = new Matrix();  
88.         m.postScale(x, y);  
89.         mPath.transform(m);  
90.         PathMeasure measure = new PathMeasure(mPath, false);  
91.         mPathLength = measure.getLength();  
92.     }  
93.   
94.     public void scaleCircleRadius(int radius) {  
95.         this.radius = radius;  
96.     }  
97.   
98.     @Override  
99.     protected void onDraw(Canvas canvas) {  
100.         super.onDraw(canvas);  
101.         //绘制圆形  
102. //        drawCircle(canvas);  
103.         //绘线条  
104.         drawPathEffect(canvas);  
105.         //绘制文字  
106.         drawText(canvas);  
107.         canvas.restore();  
108.     }  
109.   
110.     private void drawText(Canvas canvas) {  
111.         mPaint.setTextSize(28);  
112.         mPaint.setColor(Color.parseColor("#ffffff"));  
113.         if (canvas!=null&& !TextUtils.isEmpty(pathText)){  
114.             canvas.drawText(pathText,textX,textY,mPaint);  
115.         }  
116.         invalidate();  
117.     }  
118.   
119.     private void drawPathEffect(Canvas canvas) {  
120.         PathEffect pathEffect = new DashPathEffect(new float[]{mPathLength, mPathLength}, (mPathLength - mPathLength * mProgress));  
121.         mPaint.setPathEffect(pathEffect);  
122.         mPaint.setStrokeWidth(4);  
123.         mPaint.setColor(Color.parseColor("#ffffff"));  
124.         canvas.save();  
125.         canvas.translate(getPaddingLeft(), getPaddingTop());  
126.         canvas.drawPath(mPath, mPaint);  
127.     }  
128.   
129.     private void drawCircle(Canvas canvas) {  
130.         int strokenWidth = 25;  
131.   
132.         mPaint.setStrokeWidth(strokenWidth);  
133.         mPaint.setColor(Color.parseColor("#ffffff"));  
134.         canvas.drawCircle(circleX, circleY, radius , mPaint);  
135.     }  
136.   
137.     @Override  
138.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
139.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
140.         int widthSize = MeasureSpec.getSize(widthMeasureSpec);  
141.         int heightSize = MeasureSpec.getSize(heightMeasureSpec);  
142.         int widthMode = MeasureSpec.getMode(widthMeasureSpec);  
143.         int heightMode = MeasureSpec.getMode(widthMeasureSpec);  
144.   
145.         int measuredWidth, measuredHeight;  
146.   
147.         if (widthMode == MeasureSpec.AT_MOST)  
148.             throw new IllegalStateException("AnimatedPathView cannot have a WRAP_CONTENT property");  
149.         else  
150.             measuredWidth = widthSize;  
151.   
152.         if (heightMode == MeasureSpec.AT_MOST)  
153.             throw new IllegalStateException("AnimatedPathView cannot have a WRAP_CONTENT property");  
154.         else  
155.             measuredHeight = heightSize;  
156.   
157.         setMeasuredDimension(measuredWidth, measuredHeight);  
158.     }  
159. }  

[html]  view plain  copy

 print ?

1. public class PointView extends FrameLayout {  
2.   
3.     private Context mContext;  
4.     private List<PointScaleBean> points;  
5.     private FrameLayout layouPoints;  
6.     private AnimatedPathView animatedPath;  
7.     private int radius=10;  
8.     private String text="图文标签 $99.00";  
9.   
10.     public PointView(Context context) {  
11.         this(context, null);  
12.     }  
13.   
14.     public PointView(Context context, AttributeSet attrs) {  
15.         this(context, attrs, 0);  
16.     }  
17.   
18.     public PointView(Context context, AttributeSet attrs, int defStyleAttr) {  
19.         super(context, attrs, defStyleAttr);  
20.         initView(context, attrs);  
21.     }  
22.   
23.   
24.     private void initView(Context context, AttributeSet attrs) {  
25.         this.mContext = context;  
26.         View imgPointLayout = inflate(context, R.layout.layout_point, this);  
27.         layouPoints = (FrameLayout) imgPointLayout.findViewById(R.id.layouPoints);  
28.         animatedPath=(AnimatedPathView) imgPointLayout.findViewById(R.id.animated_path);  
29.     }  
30.   
31.   
32.     public void addPoints(int width, int height) {  
33.         addPoint(width, height);  
34.     }  
35.   
36.     public void setPoints(List<PointScaleBean> points) {  
37.         this.points = points;  
38.     }  
39.   
40.     private void addPoint(int width, int height) {  
41.         layouPoints.removeAllViews();  
42.         for (int i = 0; i < points.size(); i++) {  
43.             double width_scale = points.get(i).widthScale;  
44.             double height_scale = points.get(i).heightScale;  
45.             LinearLayout view = (LinearLayout) LayoutInflater.from(mContext).inflate(R.layout.layout_img_point, this, false);  
46.             ImageView imageView = (ImageView) view.findViewById(R.id.imgPoint);  
47.             imageView.setTag(i);  
48.   
49.             AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();  
50.             animationDrawable.start();  
51.   
52.             LayoutParams layoutParams = (LayoutParams) view.getLayoutParams();  
53.   
54.             layoutParams.leftMargin = (int) (width * width_scale);  
55.             layoutParams.topMargin = (int) (height * height_scale);  
56.   
57. //            imageView.setOnClickListener(this);  
58.   
59.             layouPoints.addView(view, layoutParams);  
60.         }  
61.         initView();  
62.         initPathAnimated();  
63.     }  
64.   
65.     private void initPathAnimated() {  
66.         ViewTreeObserver observer = animatedPath.getViewTreeObserver();  
67.         if(observer != null){  
68.             observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {  
69.                 @Override  
70.                 public void onGlobalLayout() {  
71.                     animatedPath.getViewTreeObserver().removeGlobalOnLayoutListener(this);  
72.                     animatedPath.scaleCircleRadius(radius);  
73.                     animatedPath.scalePathBy(animatedPath.getWidth()/2,animatedPath.getHeight()/2);  
74.                     float[][] points = new float[][]{  
75.                             {animatedPath.getWidth()/2-radius/2,animatedPath.getHeight()/2-radius/2},  
76.                             {animatedPath.getWidth()/2- UIUtils.dp2px(mContext,30), animatedPath.getHeight()/2- UIUtils.dp2px(mContext,40)},  
77.                             {animatedPath.getWidth()/2-UIUtils.dp2px(mContext,150), animatedPath.getHeight()/2- UIUtils.dp2px(mContext,40)},  
78.                     };  
79.                     animatedPath.setPath(points);  
80. //                    animatedPath.setPathText(text,animatedPath.getWidth()/2-UIUtils.dp2px(mContext,150), animatedPath.getHeight()/2- UIUtils.dp2px(mContext,50));  
81.                 }  
82.             });  
83.         }  
84.     }  
85.   
86.     private void initView() {  
87.         animatedPath.setOnClickListener(new View.OnClickListener() {  
88.             @Override  
89.             public void onClick(View view) {  
90.                 ObjectAnimator anim = ObjectAnimator.ofFloat(view, "percentage", 0.0f, 1.0f);  
91.                 anim.setDuration(2000);  
92.                 anim.setInterpolator(new LinearInterpolator());  
93.                 anim.start();  
94.             }  
95.         });  
96.     }  
97.   
98. }  

layou_point.xml

[html]  view plain  copy

 print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="wrap_content"  
5.     >  
6.   
7.     <com.yju.app.widght.path.AnimatedPathView  
8.         android:id="@+id/animated_path"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content"  
11.         />  
12.   
13.     <FrameLayout  
14.         android:id="@+id/layouPoints"  
15.         android:layout_width="match_parent"  
16.         android:layout_height="wrap_content"  
17.         android:layout_gravity="center" />  
18.   
19. </FrameLayout>  

[html]  view plain  copy

 print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:gravity="center"  
6.     android:orientation="vertical">  
7.   
8.     <ImageView  
9.         android:id="@+id/imgPoint"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:src="@drawable/point_img" />  
13.   
14. </LinearLayout>  

[html]  view plain  copy

 print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:oneshot="false">  
4.     <item  
5.         android:drawable="@drawable/point_img1"  
6.         android:duration="100" />  
7.     ....省略n多图片资源  
8.     <item  
9.         android:drawable="@drawable/point_img13"  
10.         android:duration="100" />  
11. </animation-list>  

[html]  view plain  copy

 print ?

1. private void initPointView() {  
2.         List<PointScaleBean> list=new ArrayList<>();  
3.         PointScaleBean point=new PointScaleBean();  
4.         point.widthScale = 0.36f;  
5.         point.heightScale = 0.75f;  
6.         list.add(point);  
7.         pointView.setPoints(list);  
8.         pointView.addPoints(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);  
9.     }