点赞动画按钮控件：LikeButton & ShineButto

引言

  很多时候我们都会遇到点赞按钮，像抖音、推特上，都有很酷炫的点赞“小红心”动画效果，今天就来使用这两个第三方库：LikeButton、ShineButton来实现一下类似的点赞效果。
  Tips：温馨提示：像这种小巧的控件，建议大家就不要手把手硬撸自定义控件了，因为意义不大，现成的控件会使用就可以了，加以改造就是我们项目中吸睛级别的存在，耗费精力不大，效果却很好！

---

效果预览

---

用法

第一步：添加依赖

//推特-点赞
implementation 'com.github.jd-alexander:LikeButton:0.2.3'
//Shine点赞
implementation 'com.sackcentury:shinebutton:1.0.0'

第二步：布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".blog2.Case62"
    tools:ignore="MissingConstraints">

    <TextView
        android:id="@+id/likeBtnTitle"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/blue"
        android:gravity="center"
        android:text="LikeButton使用"
        android:textColor="@color/white"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent" />

    <com.like.LikeButton
        android:id="@+id/likeBtnBase"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:icon_size="15dp"
        app:icon_type="heart"
        app:layout_constraintBottom_toTopOf="@id/shineBtn"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/likeBtnBase"
        app:layout_constraintTop_toBottomOf="@id/likeBtnTitle" />

    <com.like.LikeButton
        android:id="@+id/likeBtnType1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:icon_size="15dp"
        app:icon_type="star"
        app:layout_constraintBottom_toTopOf="@id/shineBtn"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toRightOf="@+id/likeBtnBase"
        app:layout_constraintRight_toLeftOf="@id/likeBtnType2"
        app:layout_constraintTop_toBottomOf="@id/likeBtnTitle" />

    <com.like.LikeButton
        android:id="@+id/likeBtnType2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:anim_scale_factor="2"
        app:circle_end_color="@color/colorAccent"
        app:circle_start_color="@color/colorPrimary"
        app:dots_primary_color="@color/colorAccent"
        app:dots_secondary_color="@color/colorPrimary"
        app:icon_size="15dp"
        app:icon_type="Star"
        app:layout_constraintBottom_toTopOf="@id/shineBtn"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toRightOf="@+id/likeBtnType1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/likeBtnTitle"
        app:like_drawable="@drawable/thumb_on"
        app:unlike_drawable="@drawable/thumb_off" />

    <TextView
        android:id="@+id/shineBtn"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/blue"
        android:gravity="center"
        android:text="ShineButton使用"
        android:textColor="@color/white"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.sackcentury.shinebuttonlib.ShineButton
        android:id="@+id/po_image1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:src="@android:color/darker_gray"
        app:allow_random_color="false"
        app:big_shine_color="#FF6666"
        app:btn_color="@android:color/darker_gray"
        app:btn_fill_color="#FF6666"
        app:click_animation_duration="200"
        app:enable_flashing="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/shineBtn"
        app:shine_animation_duration="1500"
        app:shine_count="8"
        app:shine_turn_angle="10"
        app:siShape="@raw/like"
        app:small_shine_color="#CC9999"
        app:small_shine_offset_angle="20" />

</androidx.constraintlayout.widget.ConstraintLayout>

---

其他：API介绍

ShineButton：github传送门——>>ShineButton开源控件

LikeButton：github传送门——>>LikeButton开源控件

大功告成！

Tips：希望伴随着自己的成长，以后在gitPack官网中也能发布自己的依赖库啊。加油！