仿即刻APP点赞桃心的效果
2016-12-5更新
- 修改测量逻辑
- 添加了对齐方式
- 添加了一个评论图形的GraphAdapter
- 修改了已知BUG
先看效果图
likeview.gif
使用方法
布局配置
<cn.izouxiang.likeview.LikeView
android:id="@+id/lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:number="99"
/>注意,一般不需要直接指定宽高,内部会根据字体大小自动测量
代码配置
//点赞view的设置
holder.like.setActivated(entity.isLike);
holder.like.setNumber(entity.likeNum);
holder.like.setCallback(new LikeView.SimpleCallback() {
@Override
public void activate(LikeView view) {
Snackbar.make(view, "你觉得" + entity.name + "很赞!", Snackbar.LENGTH_SHORT).show();
}
@Override
public void deactivate(LikeView view) {
Snackbar.make(view, "你取消了对" + entity.name + "的赞!", Snackbar.LENGTH_SHORT).show();
}
});
//评论view的设置
holder.comment.setNumber(entity.commentNum);
//设置图形适配器
holder.comment.setGraphAdapter(CommentPathAdapter.getInstance());
holder.comment.setCallback(new LikeView.SimpleCallback(){
@Override
public boolean onClick(LikeView view) {
Snackbar.make(view, "你点击" + entity.name + "的评论按钮", Snackbar.LENGTH_SHORT).show();
//返回true代表拦截此次点击,不使用默认的点击事件
return true;
}
});自定义图形适配器
public class CommentPathAdapter implements LikeView.GraphAdapter {
private static CommentPathAdapter instance;
private static final float xOffsetScale = 0.06f;
private static final float yOffsetScale = 0.2f;
//可用单例模式
public static CommentPathAdapter getInstance() {
synchronized (CommentPathAdapter.class) {
if (null == instance) {
instance = new CommentPathAdapter();
}
}
return instance;
}
//这里绘制你想要的图形
@Override
public Path getGraphPath(LikeView view, int length) {
Path path = new Path();
int dx = (int) (length * xOffsetScale);
int dy = (int) (length * yOffsetScale);
int w = (int) (length * (1 - xOffsetScale * 2));
int h = (int) (length * (1 - yOffsetScale * 2));
path.moveTo(dx, dy);
path.lineTo(dx + w, dy);
path.lineTo(dx + w, dy + h);
path.lineTo(dx + (w * 0.35f), dy + h);
path.lineTo(dx + (w * 0.1f), dy + (h * 1.4f));
path.lineTo(dx + (w * 0.1f), dy + h);
path.lineTo(dx, dy + h);
path.lineTo(dx, dy);
return path;
}
}自定义配置
<resources>
<declare-styleable name="LikeView">
<!--当前数值,默认0-->
<attr name="number" format="integer"/>
<!--数字颜色,默认#888888-->
<attr name="textColor" format="color"/>
<!--图形外边颜色,默认#888888-->
<attr name="graphColor" format="color"/>
<!--当前激活时图形颜色,默认#ca5f5f-->
<attr name="animateColor" format="color"/>
<!--字体大小,决定控件高度以及图形大小,默认14sp-->
<attr name="textSize" format="dimension"/>
<!--动画时间,默认300-->
<attr name="animateDuration" format="integer"/>
<!--图形与数字间的距离,默认3dp-->
<attr name="distance" format="dimension"/>
<!--图形与数字高度的比例,默认1.3-->
<attr name="graphTextHeightRatio" format="float"/>
<!--图形外边绘制宽度,默认3dp-->
<attr name="graphStrokeWidth" format="dimension"/>
<!--数字绘制宽度,默认2dp-->
<attr name="textStrokeWidth" format="dimension"/>
<!--是否激活,默认false-->
<attr name="isActivated" format="boolean"/>
<!--是否自动测量数字修改后的宽度改变,防止更改状态时控件宽度改变,默认开启-->
<attr name="autoMeasureMaxWidth" format="boolean"/>
<!--是否不允许取消点赞,默认false-->
<attr name="notAllowedCancel" format="boolean"/>
<!--对齐方式,前三种默认垂直居中-->
<attr name="gravity" format="enum">
<!--居中-->
<enum name="center" value="1"/>
<!--左对齐-->
<enum name="left" value="2"/>
<!--右对齐-->
<enum name="right" value="3"/>
<!--开始点-->
<enum name="start" value="4"/>
</attr>
</declare-styleable>
</resources>接口
/**
* 事件监听接口
*/
public interface Callback {
/**
* 点击事件监听
*
* @param view 当前View
* @return 返回true则代表不使用默认的点击事件
*/
boolean onClick(LikeView view);
/**
* 变为激活状态
*
* @param view 当前View
*/
void activate(LikeView view);
/**
* 变为不激活状态
*
* @param view 当前View
*/
void deactivate(LikeView view);
}
/**
* 获取图形Path接口
*/
public interface GraphAdapter {
/**
* 获取图形的Path
*
* @param view 当前View
* @param length 可绘制图形区域正方形的边长
* @return 带有图形的Path
*/
Path getGraphPath(LikeView view, int length);
}声明
此项目为练手项目,当中可能存在BUG,发现BUG请指出,谢谢
github地址 欢迎Star
文／Fxiang_（简书作者）
原文链接：http://www.jianshu.com/p/79264882e934
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
原文链接：http://www.jianshu.com/p/79264882e934
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。