android的仿制直播点赞功能特效?

1,931 阅读1分钟

先看效果:

在这里插入图片描述

第一步,导入所需框架:

           implementation 'com.github.kaisengao:KsgLikeView:1.0.1'

第二步,设置界面UI,整体UI比较简单,com.kaisengao.likeview.like.KsgLikeView需要第一步实现之后才能实现:

<?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=".MainActivity">

    <com.kaisengao.likeview.like.KsgLikeView
        android:id="@+id/live_view"
        android:layout_width="120dp"
        android:layout_height="0dp"
        android:layout_marginTop="100dp"
        app:ksg_default_image="@drawable/heart0"
        app:ksg_enter_duration="1500"
        app:ksg_curve_duration="4500"
        app:layout_constraintDimensionRatio="H,1:4"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </com.kaisengao.likeview.like.KsgLikeView>

    <Button
        android:id="@+id/live_view_single"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="发送一条"
        android:textColor="@android:color/black"
        android:textSize="14sp"
        app:layout_constraintLeft_toLeftOf="@id/live_view"
        app:layout_constraintRight_toRightOf="@id/live_view"
        app:layout_constraintTop_toBottomOf="@id/live_view"/>

    <Button
        android:id="@+id/live_view_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="发送一堆"
        android:textColor="@android:color/black"
        android:textSize="14sp"
        app:layout_constraintLeft_toLeftOf="@id/live_view"
        app:layout_constraintRight_toRightOf="@id/live_view"
        app:layout_constraintTop_toBottomOf="@id/live_view_single"/>

</androidx.constraintlayout.widget.ConstraintLayout>

第三步:最主要的java代码,整体代码比较简单,挺容易看懂,不懂的可以问我,代码如下:

import android.os.Handler;
import android.os.Looper;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

import androidx.appcompat.app.AppCompatActivity;

import com.kaisengao.likeview.like.KsgLikeView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {


    private KsgLikeView mLikeView;

    private Button mMore;
    static  int i=0;


    Handler mhandler=new Handler(Looper.getMainLooper());

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {

        mLikeView = findViewById(R.id.live_view);
        findViewById(R.id.live_view_single).setOnClickListener(this);
        mMore=findViewById(R.id.live_view_more);
        mMore .setOnClickListener(this);

        mLikeView.addLikeImage(R.drawable.heart0);
        mLikeView.addLikeImage(R.drawable.heart1);
        mLikeView.addLikeImage(R.drawable.heart2);
        mLikeView.addLikeImage(R.drawable.heart3);
        mLikeView.addLikeImage(R.drawable.heart4);
        mLikeView.addLikeImage(R.drawable.heart5);
        mLikeView.addLikeImage(R.drawable.heart6);
        mLikeView.addLikeImage(R.drawable.heart7);
        mLikeView.addLikeImage(R.drawable.heart8);
    }
    
//选择点赞方式
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.live_view_single:
                mLikeView.addFavor();
                break;
            case R.id.live_view_more:
                i=0;
                boolean selected = mMore.isSelected();
                if (selected){
                    mhandler.removeCallbacks(runnable);
                }else {
                    mhandler.postDelayed(runnable,100);
                }
                mMore.setSelected(!selected);
                break;

            default:
                break;
        }
    }
//通过设置i的数量控制爱心个数,我这里设置的是20个。
    private Runnable runnable=new Runnable() {
        @Override
        public void run() {
            if(i<20) {
                mLikeView.addFavor();
                i++;
            }
            Log.i("MainActivity.class","ieo="+i);
            mhandler.postDelayed(runnable,100);
        }
    };

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mhandler.removeCallbacks(runnable);
    }
}

第四步,导入drawable图片,图片直接到百度网盘下载吧,在里面导入怕会失效: 链接: pan.baidu.com/s/19VA_y_yM… 提取码: sx3j 最后,你也会很简单得到这一个特效,如果还有什么问题,可以去github上面下载 GitHub点击此处