返回

以美观的形式在 Android 中仿制即刻点赞并滚动放大波纹图标

Android

最近在网上冲浪的时候,看到了一个比较有创意的点赞图标。就是类似即刻的点赞,点赞图标会从小变大,并且有一个波纹效果。一开始没发现有什么难点,但是后来仔细观察之后才发现实现起来并不是很简单。我查了一下相关的资料,发现网上已经有一些仿即刻点赞图标的实现方案了,但是这些方案都存在一些问题。有的方案实现的并不完整,有的方案实现的虽然完整,但是代码非常复杂。

于是我决定自己实现一个仿即刻点赞图标。我的实现方案非常简单,只需要一个ImageView和一个ScrollTextView即可。ImageView用于实现点赞图标的放大动画,ScrollTextView用于实现波纹效果。

首先,我们先来看一下ImageView的实现代码。

public class PraiseView extends FrameLayout {

    private ImageView mIvPraise;
    private Animation mAnimation;

    public PraiseView(Context context) {
        super(context);
        init();
    }

    public PraiseView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public PraiseView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mIvPraise = new ImageView(getContext());
        mIvPraise.setImageResource(R.mipmap.ic_praise);
        LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        layoutParams.gravity = Gravity.CENTER;
        addView(mIvPraise, layoutParams);

        mAnimation = AnimationUtils.loadAnimation(getContext(), R.anim.anim_praise);
    }

    public void startPraiseAnimation() {
        mIvPraise.startAnimation(mAnimation);
    }
}

在上面的代码中,我们首先定义了一个ImageView变量mIvPraise。然后在init()方法中,我们实例化了mIvPraise并设置了它的属性。最后,我们在startPraiseAnimation()方法中,启动了mIvPraise的动画。

接下来,我们来看一下ScrollTextView的实现代码。

public class ScrollTextView extends TextView {

    private Animation mAnimation;

    public ScrollTextView(Context context) {
        super(context);
        init();
    }

    public ScrollTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ScrollTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mAnimation = AnimationUtils.loadAnimation(getContext(), R.anim.anim_scroll_text);
    }

    public void startScrollAnimation() {
        startAnimation(mAnimation);
    }
}

在上面的代码中,我们首先定义了一个TextView变量mTvScrollText。然后在init()方法中,我们实例化了mTvScrollText并设置了它的属性。最后,我们在startScrollAnimation()方法中,启动了mTvScrollText的动画。

最后,我们只需要在布局文件中将PraiseView和ScrollTextView组合在一起即可。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.praiseview.PraiseView
        android:id="@+id/pv_praise"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <com.example.praiseview.ScrollTextView
        android:id="@+id/stv_scroll_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点赞数" />

</LinearLayout>

这样,我们就实现了仿即刻点赞图标。