Android实现仿今日头条点赞动画效果实例
作者：笑慢
我想看到今日头条的点赞效果,应该都觉得很绚丽吧,下面这篇文章主要给大家介绍了关于Android实现仿今日头条点赞动画效果的相关资料,文中通过示例代价介绍的非常详细,需要的朋友可以参考下
一、前言
我们在今日头条APP上会看到点赞动画效果，感觉非常不错，正好公司有点赞动画的需求，所以有了接下来的对此功能的实现的探索。
二、需求拆分
仔细观察点赞交互，看出大概以下几个步骤：
1：点赞控件需要自定义，对其触摸事件进行处理。
2：点赞动画的实现。
3：要有一个存放动画的容器。
三、实现方案
1、点赞控件触摸事件处理
点赞控件是区分长按和点击处理的，另外我们发现在手指按下以后包括手指的移动直到手指的抬起都在执行动画。因为点赞的点击区域可能包括点赞次数，所以这里就自定义了点赞控件，并处理onTouchEvent(event: MotionEvent)事件，区分长按和单击是使用了点击到手指抬起的间隔时间区分的，伪代码如下：
override fun onTouchEvent(event: MotionEvent): Boolean {
var onTouch: Boolean
when (event.action) {
MotionEvent.ACTION_DOWN -> {
isRefreshing = false
isDowning = true
//点击
lastDownTime = System.currentTimeMillis()
postDelayed(autoPollTask, CLICK_INTERVAL_TIME)
onTouch = true
}
MotionEvent.ACTION_UP -> {
isDowning = false
//抬起
if (System.currentTimeMillis() - lastDownTime < CLICK_INTERVAL_TIME) {
//小于间隔时间按照单击处理
onFingerDowningListener?.onDown(this)
} else {
//大于等于间隔时间按照长按抬起手指处理
onFingerDowningListener?.onUp()
}
removeCallbacks(autoPollTask)
onTouch = true
}
MotionEvent.ACTION_CANCEL ->{
isDowning = false
removeCallbacks(autoPollTask)
onTouch = false
}
else -> onTouch = false
}
return onTouch
}长按时使用Runnable的postDelayed(Runnable action, long delayMillis)方法来进行不断的执行动画，伪代码：
private inner class AutoPollTask : Runnable {
override fun run() {
onFingerDowningListener?.onLongPress(this@LikeView)
if(!canLongPress){
removeCallbacks(autoPollTask)
}else{
postDelayed(autoPollTask, CLICK_INTERVAL_TIME)
}
}
}2、点赞动画的实现
点赞效果元素分为：点赞表情图标、点赞次数数字以及点赞文案
2.1、点赞效果图片的获取和存储管理
这里参考了SuperLike的做法，对图片进行了缓存处理，代码如下：
object BitmapProviderFactory {
fun getProvider(context: Context): BitmapProvider.Provider {
return BitmapProvider.Builder(context)
.setDrawableArray(
intArrayOf(
R.mipmap.emoji_1, R.mipmap.emoji_2, R.mipmap.emoji_3,
R.mipmap.emoji_4, R.mipmap.emoji_5, R.mipmap.emoji_6,
R.mipmap.emoji_7, R.mipmap.emoji_8, R.mipmap.emoji_9, R.mipmap.emoji_10,
R.mipmap.emoji_11, R.mipmap.emoji_12, R.mipmap.emoji_13,
R.mipmap.emoji_14
)
)
.setNumberDrawableArray(
intArrayOf(
R.mipmap.multi_digg_num_0, R.mipmap.multi_digg_num_1,
R.mipmap.multi_digg_num_2, R.mipmap.multi_digg_num_3,
R.mipmap.multi_digg_num_4, R.mipmap.multi_digg_num_5,
R.mipmap.multi_digg_num_6, R.mipmap.multi_digg_num_7,
R.mipmap.multi_digg_num_8, R.mipmap.multi_digg_num_9
)
)
.setLevelDrawableArray(
intArrayOf(
R.mipmap.multi_digg_word_level_1, R.mipmap.multi_digg_word_level_2,
R.mipmap.multi_digg_word_level_3
)
)
.build()
}
}object BitmapProvider {
class Default(
private val context: Context,
cacheSize: Int,
@DrawableRes private val drawableArray: IntArray,
@DrawableRes private val numberDrawableArray: IntArray?,
@DrawableRes private val levelDrawableArray: IntArray?,
private val levelStringArray: Array<String>?,
private val textSize: Float
) : Provider {
private val bitmapLruCache: LruCache<Int, Bitmap> = LruCache(cacheSize)
private val NUMBER_PREFIX = 0x70000000
private val LEVEL_PREFIX = -0x80000000
/**
* 获取数字图片
* @param number
* @return
*/
override fun getNumberBitmap(number: Int): Bitmap? {
var bitmap: Bitmap?
if (numberDrawableArray != null && numberDrawableArray.isNotEmpty()) {
val index = number % numberDrawableArray.size
bitmap = bitmapLruCache[NUMBER_PREFIX or numberDrawableArray[index]]
if (bitmap == null) {
bitmap =
BitmapFactory.decodeResource(context.resources, numberDrawableArray[index])
bitmapLruCache.put(NUMBER_PREFIX or numberDrawableArray[index], bitmap)
}
} else {
bitmap = bitmapLruCache[NUMBER_PREFIX or number]
if (bitmap == null) {
bitmap = createBitmapByText(textSize, number.toString())
bitmapLruCache.put(NUMBER_PREFIX or number, bitmap)
}
}
return bitmap
}
/**
* 获取等级文案图片
* @param level
* @return
*/
override fun getLevelBitmap(level: Int): Bitmap? {
var bitmap: Bitmap?
if (levelDrawableArray != null && levelDrawableArray.isNotEmpty()) {
val index = level.coerceAtMost(levelDrawableArray.size)
bitmap = bitmapLruCache[LEVEL_PREFIX or levelDrawableArray[index]]
if (bitmap == null) {
bitmap =
BitmapFactory.decodeResource(context.resources, levelDrawableArray[index])
bitmapLruCache.put(LEVEL_PREFIX or levelDrawableArray[index], bitmap)
}
} else {
bitmap = bitmapLruCache[LEVEL_PREFIX or level]
if (bitmap == null && !levelStringArray.isNullOrEmpty()) {
val index = level.coerceAtMost(levelStringArray.size)
bitmap = createBitmapByText(textSize, levelStringArray[index])
bitmapLruCache.put(LEVEL_PREFIX or level, bitmap)
}
}
return bitmap
}
/**
* 获取随机表情图片
* @return
*/
override val randomBitmap: Bitmap
get() {
val index = (Math.random() * drawableArray.size).toInt()
var bitmap = bitmapLruCache[drawableArray[index]]
if (bitmap == null) {
bitmap = BitmapFactory.decodeResource(context.resources, drawableArray[index])
bitmapLruCache.put(drawableArray[index], bitmap)
}
return bitmap
}
private fun createBitmapByText(textSize: Float, text: String): Bitmap {
val textPaint = TextPaint()
textPaint.color = Color.BLACK
textPaint.textSize = textSize
val bitmap = Bitmap.createBitmap(
textPaint.measureText(text).toInt(),
textSize.toInt(), Bitmap.Config.ARGB_4444
)
val canvas = Canvas(bitmap)
canvas.drawColor(Color.TRANSPARENT)
canvas.drawText(text, 0f, textSize, textPaint)
return bitmap
}
}
class Builder(var context: Context) {
private var cacheSize = 0
@DrawableRes
private var drawableArray: IntArray? = null
@DrawableRes
private var numberDrawableArray: IntArray? = null
@DrawableRes
private var levelDrawableArray: IntArray? = null
private var levelStringArray: Array<String>? = null
private var textSize = 0f
fun setCacheSize(cacheSize: Int): Builder {
this.cacheSize = cacheSize
return this
}
/**
* 设置表情图片
* @param drawableArray
* @return
*/
fun setDrawableArray(@DrawableRes drawableArray: IntArray?): Builder {
this.drawableArray = drawableArray
return this
}
/**
* 设置数字图片
* @param numberDrawableArray
* @return
*/
fun setNumberDrawableArray(@DrawableRes numberDrawableArray: IntArray): Builder {
this.numberDrawableArray = numberDrawableArray
return this
}
/**
* 设置等级文案图片
* @param levelDrawableArray
* @return
*/
fun setLevelDrawableArray(@DrawableRes levelDrawableArray: IntArray?): Builder {
this.levelDrawableArray = levelDrawableArray
return this
}
fun setLevelStringArray(levelStringArray: Array<String>?): Builder {
this.levelStringArray = levelStringArray
return this
}
fun setTextSize(textSize: Float): Builder {
this.textSize = textSize
return this
}
fun build(): Provider {
if (cacheSize == 0) {
cacheSize = 32
}
if (drawableArray == null || drawableArray?.isEmpty() == true) {
drawableArray = intArrayOf(R.mipmap.emoji_1)
}
if (levelDrawableArray == null && levelStringArray.isNullOrEmpty()) {
levelStringArray = arrayOf("次赞!", "太棒了!!", "超赞同!!!")
}
return Default(
context, cacheSize, drawableArray!!, numberDrawableArray,
levelDrawableArray, levelStringArray, textSize
)
}
}
interface Provider {
/**
* 获取随机表情图片
*/
val randomBitmap: Bitmap
/**
* 获取数字图片
* [number] 点击次数
*/
fun getNumberBitmap(number: Int): Bitmap?
/**
* 获取等级文案图片
* [level] 等级
*/
fun getLevelBitmap(level: Int): Bitmap?
}
}2.2、点赞表情图标动画实现
这里的实现参考了toutiaothumb，表情图标的动画大致分为：上升动画的同时执行图标大小变化动画和图标透明度变化，在上升动画完成时进行下降动画。代码如下：
class EmojiAnimationView @JvmOverloads constructor(
context: Context,
private val provider: BitmapProvider.Provider?,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
private var mThumbImage: Bitmap? = null
private var mBitmapPaint: Paint? = null
private var mAnimatorListener: AnimatorListener? = null
/**
* 表情图标的宽度
*/
private var emojiWith = 0
/**
* 表情图标的高度
*/
private var emojiHeight = 0
private fun init() {
//初始化图片，取出随机图标
mThumbImage = provider?.randomBitmap
}
init {
//初始化paint
mBitmapPaint = Paint()
mBitmapPaint?.isAntiAlias = true
}
/**
* 设置动画
*/
private fun showAnimation() {
val imageWidth = mThumbImage?.width ?:0
val imageHeight = mThumbImage?.height ?:0
val topX = -1080 + (1400 * Math.random()).toFloat()
val topY = -300 + (-700 * Math.random()).toFloat()
//上升动画
val translateAnimationX = ObjectAnimator.ofFloat(this, "translationX", 0f, topX)
translateAnimationX.duration = DURATION.toLong()
translateAnimationX.interpolator = LinearInterpolator()
val translateAnimationY = ObjectAnimator.ofFloat(this, "translationY", 0f, topY)
translateAnimationY.duration = DURATION.toLong()
translateAnimationY.interpolator = DecelerateInterpolator()
//表情图片的大小变化
val translateAnimationRightLength = ObjectAnimator.ofInt(
this, "emojiWith",
0,imageWidth,imageWidth,imageWidth,imageWidth, imageWidth, imageWidth, imageWidth, imageWidth, imageWidth
)
translateAnimationRightLength.duration = DURATION.toLong()
val translateAnimationBottomLength = ObjectAnimator.ofInt(
this, "emojiHeight",
0,imageHeight,imageHeight,imageHeight,imageHeight,imageHeight, imageHeight, imageHeight, imageHeight, imageHeight
)
translateAnimationBottomLength.duration = DURATION.toLong()
translateAnimationRightLength.addUpdateListener {
invalidate()
}
//透明度变化
val alphaAnimation = ObjectAnimator.ofFloat(
this,
"alpha",
0.8f,
1.0f,
1.0f,
1.0f,
0.9f,
0.8f,
0.8f,
0.7f,
0.6f,
0f
)
alphaAnimation.duration = DURATION.toLong()
//动画集合
val animatorSet = AnimatorSet()
animatorSet.play(translateAnimationX).with(translateAnimationY)
.with(translateAnimationRightLength).with(translateAnimationBottomLength)
.with(alphaAnimation)
//下降动画
val translateAnimationXDown =
ObjectAnimator.ofFloat(this, "translationX", topX, topX * 1.2f)
translateAnimationXDown.duration = (DURATION / 5).toLong()
translateAnimationXDown.interpolator = LinearInterpolator()
val translateAnimationYDown =
ObjectAnimator.ofFloat(this, "translationY", topY, topY * 0.8f)
translateAnimationYDown.duration = (DURATION / 5).toLong()
translateAnimationYDown.interpolator = AccelerateInterpolator()
//设置动画播放顺序
val animatorSetDown = AnimatorSet()
animatorSet.start()
animatorSet.addListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {}
override fun onAnimationEnd(animation: Animator) {
animatorSetDown.play(translateAnimationXDown).with(translateAnimationYDown)
animatorSetDown.start()
}
override fun onAnimationCancel(animation: Animator) {}
override fun onAnimationRepeat(animation: Animator) {}
})
animatorSetDown.addListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {}
override fun onAnimationEnd(animation: Animator) {
//动画完成后通知移除动画view
mAnimatorListener?.onAnimationEmojiEnd()
}
override fun onAnimationCancel(animation: Animator) {}
override fun onAnimationRepeat(animation: Animator) {}
})
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
drawEmojiImage(canvas)
}
/**
* 绘制表情图片
*/
private fun drawEmojiImage(canvas: Canvas) {
mThumbImage?.let{
val dst = Rect()
dst.left = 0
dst.top = 0
dst.right = emojiWith
dst.bottom = emojiHeight
canvas.drawBitmap(it, null, dst, mBitmapPaint)
}
}
/**
* 这些get\set方法用于表情图标的大小动画
* 不能删除
*/
fun getEmojiWith(): Int {
return emojiWith
}
fun setEmojiWith(emojiWith: Int) {
this.emojiWith = emojiWith
}
fun getEmojiHeight(): Int {
return emojiHeight
}
fun setEmojiHeight(emojiHeight: Int) {
this.emojiHeight = emojiHeight
}
fun setEmojiAnimation() {
showAnimation()
}
fun setAnimatorListener(animatorListener: AnimatorListener?) {
mAnimatorListener = animatorListener
}
interface AnimatorListener {
/**
* 动画结束
*/
fun onAnimationEmojiEnd()
}
fun setEmoji() {
init()
}
companion object {
//动画时长
const val DURATION = 500
}
}2.3、点赞次数和点赞文案的绘制
这里的点赞次数处理了从1到999，并在不同的点赞次数区间显示不同的点赞文案。代码如下：
class NumberLevelView @JvmOverloads constructor(
context: Context,
private val provider: BitmapProvider.Provider?,
private val x: Int,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
private var textPaint: Paint = Paint()
/**
* 点击次数
*/
private var mNumber = 0
/**
* 等级文案图片
*/
private var bitmapTalk: Bitmap? = null
/**
* 等级
*/
private var level = 0
/**
* 数字图片宽度
*/
private var numberImageWidth = 0
/**
* 数字图片的总宽度
*/
private var offsetX = 0
/**
* x 初始位置
*/
private var initialValue = 0
/**
* 默认数字和等级文案图片间距
*/
private var spacing = 0
init {
textPaint.isAntiAlias = true
initialValue = x - PublicMethod.dp2px(context, 120f)
numberImageWidth = provider?.getNumberBitmap(1)?.width ?: 0
spacing = PublicMethod.dp2px(context, 10f)
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
val levelBitmap = provider?.getLevelBitmap(level) ?: return
//等级图片的宽度
val levelBitmapWidth = levelBitmap.width
val dst = Rect()
when (mNumber) {
in 0..9 -> {
initialValue = x - levelBitmapWidth
dst.left = initialValue
dst.right = initialValue + levelBitmapWidth
}
in 10..99 -> {
initialValue = x - PublicMethod.dp2px(context, 100f)
dst.left = initialValue + numberImageWidth + spacing
dst.right = initialValue+ numberImageWidth + spacing+ levelBitmapWidth
}
else -> {
initialValue = x - PublicMethod.dp2px(context, 120f)
dst.left = initialValue + 2*numberImageWidth + spacing
dst.right = initialValue+ 2*numberImageWidth + spacing + levelBitmapWidth
}
}
dst.top = 0
dst.bottom = levelBitmap.height
//绘制等级文案图标
canvas.drawBitmap(levelBitmap, null, dst, textPaint)
while (mNumber > 0) {
val number = mNumber % 10
val bitmap = provider.getNumberBitmap(number)?:continue
offsetX += bitmap.width
//这里是数字
val rect = Rect()
rect.top = 0
when {
mNumber/ 10 < 1 -> {
rect.left = initialValue - bitmap.width
rect.right = initialValue
}
mNumber/ 10 in 1..9 -> {
rect.left = initialValue
rect.right = initialValue + bitmap.width
}
else -> {
rect.left = initialValue + bitmap.width
rect.right = initialValue +2* bitmap.width
}
}
rect.bottom = bitmap.height
//绘制数字
canvas.drawBitmap(bitmap, null, rect, textPaint)
mNumber /= 10
}
}
fun setNumber(number: Int) {
this.mNumber = number
if (mNumber >999){
mNumber = 999
}
level = when (mNumber) {
in 1..20 -> {
0
}
in 21..80 -> {
1
}
else -> {
2
}
}
//根据等级取出等级文案图标
bitmapTalk = provider?.getLevelBitmap(level)
invalidate()
}
}3、存放点赞动画的容器
我们需要自定义一个view来存放动画，以及提供开始动画以及回收动画view等工作。代码如下：
class LikeAnimationLayout @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {
private var lastClickTime: Long = 0
private var currentNumber = 1
private var mNumberLevelView: NumberLevelView? = null
/**
* 有无表情动画 暂时无用
*/
private var hasEruptionAnimation = false
/**
* 有无等级文字 暂时无用
*/
private var hasTextAnimation = false
/**
* 是否可以长按，暂时无用 目前用时间来管理
*/
private var canLongPress = false
/**
* 最大和最小角度暂时无用
*/
private var maxAngle = 0
private var minAngle = 0
private var pointX = 0
private var pointY = 0
var provider: BitmapProvider.Provider? = null
get() {
if (field == null) {
field = BitmapProvider.Builder(context)
.build()
}
return field
}
private fun init(context: Context, attrs: AttributeSet?, defStyleAttr: Int) {
val typedArray = context.obtainStyledAttributes(
attrs,
R.styleable.LikeAnimationLayout,
defStyleAttr,
0
)
maxAngle =
typedArray.getInteger(R.styleable.LikeAnimationLayout_max_angle, MAX_ANGLE)
minAngle =
typedArray.getInteger(R.styleable.LikeAnimationLayout_min_angle, MIN_ANGLE)
hasEruptionAnimation = typedArray.getBoolean(
R.styleable.LikeAnimationLayout_show_emoji,
true
)
hasTextAnimation = typedArray.getBoolean(R.styleable.LikeAnimationLayout_show_text, true)
typedArray.recycle()
}
/**
* 点击表情动画view
*/
private fun addEmojiView(
context: Context?,
x: Int,
y: Int
) {
for (i in 0 .. ERUPTION_ELEMENT_AMOUNT) {
val layoutParams = RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
layoutParams.setMargins(x, y, 0, 0)
val articleThumb = context?.let {
EmojiAnimationView(
it, provider
)
}
articleThumb?.let {
it.setEmoji()
this.addView(it, -1, layoutParams)
it.setAnimatorListener(object : EmojiAnimationView.AnimatorListener {
override fun onAnimationEmojiEnd() {
removeView(it)
val handler = Handler()
handler.postDelayed({
if (mNumberLevelView != null && System.currentTimeMillis() - lastClickTime >= SPACING_TIME) {
removeView(mNumberLevelView)
mNumberLevelView = null
}
}, SPACING_TIME)
}
})
it.setEmojiAnimation()
}
}
}
/**
* 开启动画
*/
fun launch(x: Int, y: Int) {
if (System.currentTimeMillis() - lastClickTime >= SPACING_TIME) {
pointX = x
pointY = y
//单次点击
addEmojiView(context, x, y-50)
lastClickTime = System.currentTimeMillis()
currentNumber = 1
if (mNumberLevelView != null) {
removeView(mNumberLevelView)
mNumberLevelView = null
}
} else { //连续点击
if (pointX != x || pointY != y){
return
}
lastClickTime = System.currentTimeMillis()
Log.i(TAG, "当前动画化正在执行")
addEmojiView(context, x, y)
//添加数字连击view
val layoutParams = RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT
)
layoutParams.setMargins(0, y - PublicMethod.dp2px(context, 60f), 0, 0)
if (mNumberLevelView == null) {
mNumberLevelView = NumberLevelView(context,provider,x)
addView(mNumberLevelView, layoutParams)
}
currentNumber++
mNumberLevelView?.setNumber(currentNumber)
}
}
companion object {
private const val TAG = "LikeAnimationLayout"
/**
* 表情动画单次弹出个数，以后如果有不同需求可以改为配置
*/
private const val ERUPTION_ELEMENT_AMOUNT = 8
private const val MAX_ANGLE = 180
private const val MIN_ANGLE = 70
private const val SPACING_TIME = 400L
}
init {
init(context, attrs, defStyleAttr)
}
}注意：动画完成之后一定要清除view。
4、启动动画
点赞控件的手势回调，伪代码如下：
holder.likeView.setOnFingerDowningListener(object : OnFingerDowningListener {
/**
* 长按回调
*/
override fun onLongPress(v: View) {
if (!bean.hasLike) {
//未点赞
if (!fistLongPress) {
//这里同步点赞接口等数据交互
bean.likeNumber++
bean.hasLike = true
setLikeStatus(holder, bean)
}
//显示动画
onLikeAnimationListener?.doLikeAnimation(v)
} else {
if (System.currentTimeMillis() - lastClickTime <= throttleTime && lastClickTime != 0L) {
//处理点击过后为点赞状态的情况
onLikeAnimationListener?.doLikeAnimation(v)
lastClickTime = System.currentTimeMillis()
} else {
//处理长按为点赞状态后的情况
onLikeAnimationListener?.doLikeAnimation(v)
}
}
fistLongPress = true
}
/**
* 长按抬起手指回调处理
*/
override fun onUp() {
fistLongPress = false
}
/**
* 单击事件回调
*/
override fun onDown(v: View) {
if (System.currentTimeMillis() - lastClickTime > throttleTime || lastClickTime == 0L) {
if (!bean.hasLike) {
//未点赞情况下，点赞接口和数据交互处理
bean.hasLike = true
bean.likeNumber++
setLikeStatus(holder, bean)
throttleTime = 1000
onLikeAnimationListener?.doLikeAnimation(v)
} else {
//点赞状态下，取消点赞接口和数据交互处理
bean.hasLike = false
bean.likeNumber--
setLikeStatus(holder, bean)
throttleTime = 30
}
} else if (lastClickTime != 0L && bean.hasLike) {
//在时间范围内，连续点击点赞，显示动画
onLikeAnimationListener?.doLikeAnimation(v)
}
lastClickTime = System.currentTimeMillis()
}
})在显示动画页面初始化工作时初始化动画资源：
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_list)
likeAnimationLayout?.provider = BitmapProviderFactory.getProvider(this)
}在显示动画的回调中启动动画：
override fun doLikeAnimation(v: View) {
val itemPosition = IntArray(2)
val superLikePosition = IntArray(2)
v.getLocationOnScreen(itemPosition)
likeAnimationLayout?.getLocationOnScreen(superLikePosition)
val x = itemPosition[0] + v.width / 2
val y = itemPosition[1] - superLikePosition[1] + v.height / 2
likeAnimationLayout?.launch(x, y)
}四、遇到的问题
因为流列表中使用了SmartRefreshLayout下拉刷新控件，如果在列表前几条内容进行点赞动画当手指移动时触摸事件会被SmartRefreshLayout拦截去执行下拉刷新，那么手指抬起时点赞控件得不到响应会一直进行动画操作，目前想到的解决方案是点赞控件在手指按下时查看父布局有无SmartRefreshLayout，如果有通过反射先禁掉下拉刷新功能，手指抬起或者取消进行重置操作。代码如下：
override fun dispatchTouchEvent(event: MotionEvent?): Boolean {
parent?.requestDisallowInterceptTouchEvent(true)
return super.dispatchTouchEvent(event)
}
override fun onTouchEvent(event: MotionEvent): Boolean {
var onTouch: Boolean
when (event.action) {
MotionEvent.ACTION_DOWN -> {
isRefreshing = false
isDowning = true
//点击
lastDownTime = System.currentTimeMillis()
findSmartRefreshLayout(false)
if (isRefreshing) {
//如果有下拉控件并且正在刷新直接不响应
return false
}
postDelayed(autoPollTask, CLICK_INTERVAL_TIME)
onTouch = true
}
MotionEvent.ACTION_UP -> {
isDowning = false
//抬起
if (System.currentTimeMillis() - lastDownTime < CLICK_INTERVAL_TIME) {
//小于间隔时间按照单击处理
onFingerDowningListener?.onDown(this)
} else {
//大于等于间隔时间按照长按抬起手指处理
onFingerDowningListener?.onUp()
}
findSmartRefreshLayout(true)
removeCallbacks(autoPollTask)
onTouch = true
}
MotionEvent.ACTION_CANCEL ->{
isDowning = false
findSmartRefreshLayout(true)
removeCallbacks(autoPollTask)
onTouch = false
}
else -> onTouch = false
}
return onTouch
}
/**
* 如果父布局有SmartRefreshLayout 控件，设置控件是否可用
*/
private fun findSmartRefreshLayout(enable: Boolean) {
var parent = parent
while (parent != null && parent !is ContentFrameLayout) {
if (parent is SmartRefreshLayout) {
isRefreshing = parent.state == RefreshState.Refreshing
if (isRefreshing){
//如果有下拉控件并且正在刷新直接结束
break
}
if (!enable && firstClick){
try {
firstClick = false
val field: Field = parent.javaClass.getDeclaredField("mEnableRefresh")
field.isAccessible = true
//通过反射获取是否可以先下拉刷新的初始值
enableRefresh = field.getBoolean(parent)
}catch (e: Exception) {
e.printStackTrace()
}
}
if (enableRefresh){
//如果初始值不可以下拉刷新不要设置下拉刷新状态
parent.setEnableRefresh(enable)
}
parent.setEnableLoadMore(enable)
break
} else {
parent = parent.parent
}
}
}五、实现效果
六、完整代码获取
七、参考和感谢
再次感谢
总结
到此这篇关于Android实现仿今日头条点赞动画效果的文章就介绍到这了,更多相关Android今日头条点赞动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！