Android view之点赞容易,取消不易

可以去dribbble上看看原生效果。
代码下载
好的app在功能完善的基础上,从细节上吸引用户。虽然点赞这个功能点已经很普遍了,但是千篇一律的生硬效果让这么神圣的操作显得很黯淡(扯淡了,不就是赞赞赞么...),当然也有非常炫酷的,忍不住多点几次赞的效果。比如twitter的点赞。就不码字扯淡了,上图上源码

like.png

shot.gif

使用Path画爱心

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

取消时候爱心出现裂痕然后分成两半分别向左右倾斜,使用** canvas**
rotate来旋转达到倾斜效果

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

        Path path = new Path();
        path.moveTo((float) (0.5 * realWidth) + rectFlove.left, (float) (0.17 * realHeight) + rectFlove.top);
        path.cubicTo((float) (0.15 * realWidth) + rectFlove.left, (float) (-0.35 * realHeight + rectFlove.top),
                (float) (-0.4 * realWidth) + rectFlove.left, (float) (0.45 * realHeight) + rectFlove.top,
                (float) (0.5 * realWidth) + rectFlove.left, (float) (realHeight * 0.8 + rectFlove.top));
        path.lineTo(thirdX, thirdY);
        path.lineTo(secondX, secondY);
        path.close();
        canvas.drawPath(path, mPaintLike);

Gradle

compile 'com.ldoublem.thumbUplib:ThumbUplib:0.2'

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(22, 33, 44));
        mThumbUpView.setFillColor(Color.rgb(11, 200, 77));
        mThumbUpView.setEdgeColor(Color.rgb(33, 3, 219));
        mThumbUpView.setOnThumbUp(new ThumbUpView.OnThumbUp() {
            @Override
            public void like(boolean like) {
            }
        });
        mThumbUpView.Like();
        mThumbUpView.UnLike();

如果觉得还可以,给颗小星星^^
代码下载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,627评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,222评论 4 61
  • 百度地图SDK的继承步骤. ====== 教程视频二次笔记 1绑定安全码,和应用名称 项目名字 Bundle di...
    阴中阳阅读 4,790评论 0 1
  • 题目内容:写一个将华氏温度转换成摄氏温度的程序,转换的公式是:°F = (9/5)*°C + 32其中C表示摄氏温...
    Ming_0612阅读 2,463评论 0 0
  • 敬畏之心、从小事做起、做最好的自己 【原文】 子曰:“学而时习之,不亦说乎?有朋自远方来,不亦乐乎?人不知而不愠,...
    Sunny爽阅读 4,542评论 0 49