LikeButton

介绍:

又一个twitter like动画的按钮控件。

运行效果:

使用说明:

Gradle依赖

Repository

把下面的代码添加到根build.gradle 文件 (不是你的module build.gradle 文件):

allprojects {
    repositories {        ...
        maven { url "https://jitpack.io" }
    }
}

把下面的添加到module的build.gradle 文件:

dependencies {    ...
    compile 'com.github.jd-alexander:LikeButton:0.1.3'
    }
}

Like Button XML

拷贝下面的xml,它将提供一个默认的心形按钮。

<com.like.LikeButton
            app:icon_type="heart"
            app:icon_size="25dp"
            android:id="@+id/star_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

属性

还有其它一些配置按钮行为和外观的属性,如下(下面将分小节讲解并配上相关的java代码):

<com.like.LikeButton
app:icon_type="star"
app:circle_start_color="@color/colorPrimary"
app:like_drawable="@drawable/thumb_on"
app:unlike_drawable="@drawable/thumb_off"
app:dots_primary_color="@color/colorAccent"
app:dots_secondary_color="@color/colorPrimary"
app:circle_end_color="@color/colorAccent"
app:icon_size="25dp"
app:liked="true"
/>

Button State

设置按钮的状态用setLiked函数,或者通过xml。比如下面的代码就是设置状态为liked。

XML

app:liked="true"

Java

likeButton.setLiked(true);

Like Event Listener

要监听按钮的事件,实现按钮点击之后触发的listener:

likeButton.setOnLikeListener(new OnLikeListener() {
            @Override
            public void liked() {
            }
            @Override
            public void unLiked() {
            }
        });

Icon 类型

该库邦定了3个可用的图标。心形,拇指以及星星。

XML

app:icon_type="heart"

Java

likeButton.setIcon(IconType.Star);

Icon Size

XML

app:icon_size="20dp"

Java

likeButton.setIconSizePx(40);
likeButton.setIconSizeDp(20);

注意:设置按钮的大小非常重要,因为要用它来决定按钮点击之后效果的宽和高。


Custom Icons

XML

要设置自定义的图标而不是自带的,你只需设置代表liked和unliked状态下的drawable就可以了。

app:like_drawable="@drawable/thumb_on"
app:unlike_drawable="@drawable/thumb_off"

Java

likeButton.setLikeDrawable(heart_on);
likeButton.setUnlikeDrawable(heart_off);
likeButton.setUnlikeDrawableRes(R.drawable.heart_off);
likeButton.setLikeDrawableRes(R.drawable.heart_on);

Circle Color Config

如果你仔细观察了动画效果,你会注意到一个从图标中心开始的圆,然后在圆点爆炸动画开始之前冲中间消失。其颜色可以改变,以适应图标的主题颜色。

XML

app:circle_start_color="@color/colorPrimary"
app:circle_end_color="@color/colorAccent"

Java

likeButton.setCircleEndColorRes(R.color.colorAccent);
likeButton.setCircleEndColorRes(R.color.colorPrimary);

Dots Color Config

XML

app:dots_primary_color="@color/colorAccent"
app:dots_secondary_color="@color/colorPrimary"

Java

likeButton.setExplodingDotColorsRes(R.color.colorPrimary,R.color.colorAccent);

灵感

这个库是基于以下资料的启发:

https://github.com/frogermcs/LikeAnimation

https://github.com/lightsmeki/android_twitter_heart_animation_button

https://dribbble.com/shots/2416983-Twitter-Heart-Animation

已下载
0