我们的态度是:每天进步一点点,理想终会被实现。
前言
周一又到了,是不是感觉一个周末还没过咋个都没了呢?既来之则安之,我们还是来学习点有用的,由于之前无意间看到了一个点赞的效果,感觉多么高大上的,所以想着自己也来实现一下。因此有了此文,如果文中有错还望各位小伙伴指出出来,自定义View的大佬可以跳过了,(^__^) 嘻嘻……
我们还是先看看实现效果:
接下来我们看看实现方法。
点赞效果实现
1.分析怎么实现
分析:
我们可以将这个点赞效果可以分为两个部分:
- 点击部分
我们可以通过attrs自定义的属性,拿到图片的Drawable,通过调用drawable.draw(canvas)方法直接画出来。
- 上方显示的动画部分
第二部分最开始我想到的是直接在上方画一个TextView,然后设置属性动画
达到我们的效果,后来思考这种效果最好不增加自身控件的大小,假如在上方直接添加TextView那么必然怎么整个控件的高度,很多这种点赞的效果是放在列表中,高度有限。所以我最后想的是使用PopupWindow来实现,然后设置属性动画。
自定义View部分
我们需要定义的属性有:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="AgreeView">
<!--动画移动最终距离-->
<attr name="distance" format="integer"/>
<!--动画起始位置-->
<attr name="from_y" format="integer"/>
<!--动画开始透明度-->
<attr name="from_alpha" format="float"/>
<!--动画结束透明度-->
<attr name="to_alpha" format="float"/>
<!--持续时间-->
<attr name="duration" format="integer"/>
<!--动画显示的文字-->
<attr name="text" format="string"/>
<!--动画文字大小-->
<attr name="text_size" format="integer"/>
<!--动画颜色-->
<attr name="text_color" format="color"/>
<!--点赞图片-->
<attr name="img" format="reference"/>
<!--动画图片-->
<attr name="animation_img" format="reference"/>
<!--动画选择是图片还是文字-->
<attr name="animation" format="enum">
<enum name="text" value="0"/>
<enum name="img" value="1"/>
</attr>
</declare-styleable>
</resources>
2.我们在构造方法中获取对应属性,然后初始化PopupWidow:
/**
* 初始化popupWindow
*/
private void initPopupWindow() {
mPopupWindow = new PopupWindow();
//PopupWindow创建相对布局
RelativeLayout layout = new RelativeLayout(mContext);
//布局参数
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
layoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
tvAnimation = new AppCompatTextView(mContext);
tvAnimation.setIncludeFontPadding(false);
tvAnimation.setTextSize(TypedValue.COMPLEX_UNIT_DIP, text_size);
tvAnimation.setTextColor(text_color);
if (animationMode == ANIMATION_MODE_TEXT) {
tvAnimation.setText(text);
} else {
tvAnimation.setText("");
tvAnimation.setBackgroundDrawable(animalDrawable);
}
tvAnimation.setLayoutParams(layoutParams);
layout.addView(tvAnimation);
mPopupWindow.setContentView(layout);
//量测我们的动画的宽高
int w = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
int h = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
tvAnimation.measure(w, h);
mPopupWindow.setWidth(tvAnimation.getMeasuredWidth());
Log.e(TAG, "distance==== " + distance);
mPopupWindow.setHeight(distance + tvAnimation.getMeasuredHeight());
mPopupWindow.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
mPopupWindow.setFocusable(false);
mPopupWindow.setTouchable(false);
mPopupWindow.setOutsideTouchable(false);
}
这里面要注意的是我们要计算PopupWidow的高度和宽度,我们将 RelativeLayout 作为ViewGroup,用 AppCompatTextView作为动画控件,如果是图片则直接设置背景图片。
3.设置我们点赞View上方的动画:
/**
* 动画组合
*/
private void setPopAnimation() {
mAnimationSet = new AnimationSet(true);
TranslateAnimation translateAnim = new TranslateAnimation(0, 0, from_y, -to_y);
AlphaAnimation alphaAnim = new AlphaAnimation(from_alpha, to_alpha);
mAnimationSet.addAnimation(translateAnim);
mAnimationSet.addAnimation(alphaAnim);
mAnimationSet.setDuration(duration);
mAnimationSet.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
if (mPopupWindow != null && mPopupWindow.isShowing()) {
new Handler().post(new Runnable() {
@Override
public void run() {
mPopupWindow.dismiss();
}
});
}
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
}
4.设置我们点赞图片的动画效果:
/**
* 缩放动画
*/
private void setScaleAnimation() {
ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", 1f, 0.8f, 1.2f, 1f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", 1f, 0.8f, 1.2f, 1f);
scaleX.setDuration(duration);
scaleY.setDuration(duration);
scaleX.setInterpolator(new AccelerateDecelerateInterpolator());
scaleY.setInterpolator(new AccelerateDecelerateInterpolator());
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(scaleX).with(scaleY);
animatorSet.start();
}
5.我们onDraw()方法之前我们还需要量测一下我们控件的大小,假如我们不量测宽高,我们在XML中引用我们的控件我们自己设定一个宽高,比实际的图片的宽高要大,最终显示的图片还是原图片大小,不会按照XML中设定的值放大或者缩小。
/**
* 量测点击控件的大小
*
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width;
int height;
int w_mode = MeasureSpec.getMode(widthMeasureSpec);
int w_size = MeasureSpec.getSize(widthMeasureSpec);
int h_mode = MeasureSpec.getMode(heightMeasureSpec);
int h_size = MeasureSpec.getSize(heightMeasureSpec);
if (w_mode == MeasureSpec.AT_MOST || w_mode == MeasureSpec.UNSPECIFIED) {
width = agreeDrawable.getIntrinsicWidth();
} else {
width = w_size;
}
if (h_mode == MeasureSpec.AT_MOST || h_mode == MeasureSpec.UNSPECIFIED) {
height = agreeDrawable.getIntrinsicHeight();
} else {
height = h_size;
}
setMeasuredDimension(width, height);
//根据量测的宽高,设置我们画的Drawable的大小
@SuppressLint("DrawAllocation")
Rect rect = new Rect(0, 0, width, height);
agreeDrawable.setBounds(rect);
}
6.画我们的图片:
@Override
protected void onDraw(Canvas canvas) {
//将我们的Drawable画到画布
agreeDrawable.draw(canvas);
}
7.当我们点击图片的时候触发动画:
@Override
public void onClick(View v) {
if (mPopupWindow != null && !mPopupWindow.isShowing()) {
int offsetY = -getHeight() - mPopupWindow.getHeight();
mPopupWindow.showAsDropDown(this, getWidth() / 2 - mPopupWindow.getWidth() / 2, offsetY);
mPopupWindow.update();
if (mAnimationSet == null) {
setPopAnimation();
}
tvAnimation.startAnimation(mAnimationSet);
setScaleAnimation();
//外部点击事件
if (clickListener != null) {
clickListener.onAgreeClick(v);
}
}
}
这里自定义了一个View的点击事件方法,供外部调用。
MainActivity中添加自定义控件和属性
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:agreeview="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="com.lt.agreeview.MainActivity">
<com.lt.agreeview.AgreeView
android:id="@+id/agreeView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
agreeview:animation="text"
agreeview:animation_img="@drawable/ic_favorite_black_24dp"
agreeview:distance="100"
agreeview:from_y="60"
agreeview:layout_constraintBottom_toBottomOf="parent"
agreeview:layout_constraintEnd_toStartOf="@+id/agreeView3"
agreeview:layout_constraintHorizontal_bias="0.5"
agreeview:layout_constraintStart_toStartOf="parent"
agreeview:layout_constraintTop_toTopOf="parent"
agreeview:text="我喜欢你+1"
agreeview:text_color="@color/text_color">
</com.lt.agreeview.AgreeView>
<com.lt.agreeview.AgreeView
android:id="@+id/agreeView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
agreeview:animation="img"
agreeview:animation_img="@drawable/ic_grade_black_24dp"
agreeview:distance="100"
agreeview:from_y="60"
agreeview:layout_constraintBottom_toBottomOf="@+id/agreeView4"
agreeview:layout_constraintEnd_toEndOf="parent"
agreeview:layout_constraintHorizontal_bias="0.5"
agreeview:img="@drawable/ic_grade_black_24dp"
agreeview:layout_constraintStart_toEndOf="@+id/agreeView4"
agreeview:layout_constraintTop_toTopOf="@+id/agreeView4"
agreeview:text_color="@color/text_color">
</com.lt.agreeview.AgreeView>
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
最终我们的实现效果如下:
至此我们的自定义点赞效果就完成了,源码我已经上传到Github上面,如果有需要的可以自行下载Github(https://github.com/scorpioLt/AgreeView)
总结
其实自定义View并没有想得那么复杂,只要想通了原理,过程一步一步的写,像这个点赞效果主要就分为:点赞图片的缩放、向上移动的属性动画;上方的动画用PopupWindow实现,下方直接获取Drawable画到Canvas即可。
温馨提示:
我创建了一个技术交流群,群里有各个行业的大佬都有,大家可以在群里畅聊技术方面内容,以及文章推荐;如果有想加入的伙伴加我微信号【luotaosc】备注一下“加群” 另外关注公众号,还有一些个人收藏的视频: 回复“Android” ,获取Android视频链接。 回复“Java” ,获取Java视频链接。 回复“C++” ,获取C++视频链接。 回复“C” ,获取C视频链接。 回复“Python” ,获取Python视频链接等等。
原创不易,如果觉得写得好,扫码关注一下点个赞,是我最大的动力。
关注我,一定会有意想不到的东西等你: 每天专注分享Android、JAVA干货
备注:程序圈LT