Android view之點贊容易，取消不易

點選打開連結

可以去dribbble上看看原生效果。

代碼下載下傳

好的app在功能完善的基礎上，從細節上吸引使用者。雖然點贊這個功能點已經很普遍了，但是千篇一律的生硬效果讓這麼神聖的操作顯得很黯淡(扯淡了，不就是贊贊贊麼...)，當然也有非常炫酷的，忍不住多點幾次贊的效果。比如twitter的點贊。就不碼字扯淡了，上圖上源碼

like.png

shot.gif

使用Path畫愛心

Path path = new Path();
        path.moveTo((float) ( * realWidth) + rectFlove.left, (float) ( * realHeight) + rectFlove.top);
        path.cubicTo((float) ( * realWidth) + rectFlove.left, (float) ( * realHeight + rectFlove.top),
                (float) ( * realWidth) + rectFlove.left, (float) ( * realHeight) + rectFlove.top,
                (float) ( * realWidth) + rectFlove.left, (float) (realHeight *  + rectFlove.top));
//        path.moveTo( (float) (0.5 * realWidth) + rectFlove.left, (float) (realHeight * 0.8 + rectFlove.top));
        path.cubicTo((float) (realWidth +  * realWidth) + rectFlove.left, (float) ( * realHeight) + rectFlove.top,
                (float) (realWidth -  * realWidth) + rectFlove.left, (float) ( * realHeight) + rectFlove.top,
                (float) ( * realWidth) + rectFlove.left, (float) ( * realHeight) + rectFlove.top);
        path.close();
           

取消時候愛心出現裂痕然後分成兩半分别向左右傾斜,使用 canvas

rotate來旋轉達到傾斜效果

mBitmapBrokenLeftLove = Bitmap.createBitmap(getMeasuredWidth(), (int) lastY, Bitmap.Config.ARGB_8888);
        canvas = new Canvas(mBitmapBrokenLeftLove);
        canvas.rotate(*mBrokenAngle * mAnimatedBrokenValue, lastX, lastY);

        Path path = new Path();
        path.moveTo((float) ( * realWidth) + rectFlove.left, (float) ( * realHeight) + rectFlove.top);
        path.cubicTo((float) ( * realWidth) + rectFlove.left, (float) ( * realHeight + rectFlove.top),
                (float) ( * realWidth) + rectFlove.left, (float) ( * realHeight) + rectFlove.top,
                (float) ( * realWidth) + rectFlove.left, (float) (realHeight *  + rectFlove.top));
        path.lineTo(thirdX, thirdY);
        path.lineTo(secondX, secondY);
        path.close();
        canvas.drawPath(path, mPaintLike);
           

Gradle

Usage xml

<com.ldoublem.thumbUplib.ThumbUpView
            android:id="@+id/tpv"
            android:layout_width="50dp"
            android:layout_height="50dp"
            app:cracksColor="#33475f"
            app:edgeColor="#9d55b8"
            app:fillColor="#ea8010"
            app:unlikeType="1"
            />
           

mThumbUpView.setCracksColor(Color.rgb(, , ));
        mThumbUpView.setFillColor(Color.rgb(, , ));
        mThumbUpView.setEdgeColor(Color.rgb(, , ));
        mThumbUpView.setOnThumbUp(new ThumbUpView.OnThumbUp() {
            @Override
            public void like(boolean like) {
            }
        });
        mThumbUpView.Like();
        mThumbUpView.UnLike();
           

如果覺得還可以，給顆小星星^^

代碼下載下傳