简单实用的Android UI微博动态点赞效果

　　说起空间动态、微博的点赞效果，网上也是很泛滥，各种实现与效果一大堆。而详细实现的部分，讲述的也是参差不齐，另一方面估计也有很多大侠也不屑一顾，觉得完全没必要单独开篇来写和讲解吧。毕竟，也就是两个view和一些简单的动画效果罢了。
　　单若是只讲这些，我自然也是不愿花这番功夫的。虽然自己很菜，可也不甘于太菜。所以偶尔看到些好东西，可以延伸学写下，我还是很情愿拿出来用用，顺带秀一秀逼格什么的。
　　不扯太多，先说说今天实现点赞效果用到的自以为不错的两个点：

checkable 用来扩展view实现选中状态切换
androidviewanimations 基于nineoldandroids封装的android动画简易类库。究竟有多简单呢，就像这样

animhelper.with(new pulseanimator()).duration(1000).playon(imageview);
作用： 在imageview上使用pulseanimator这个动画效果，播放一秒。

当然是从实现角度来看这个库啦，如果仅仅是使用，google/百度一大堆啦。 　　

结合前两篇富，加上我们的点赞view 做出的demo整合效果图：

1.从实现看门道

　　其实从效果看无非就是点击切换图片，并添加一些简单动画效果而已，确实没什么难度。这里是因为引入了两个不错的新内容，使用下，权当新手尝鲜。

1.1 checkable接口实现checkedimageview

　　系统本身提供了android.widget.checkable这样一个接口，方便我们继承实现view的选中和取消的状态。看下这个类：

public interface checkable {

 /**
 * 设置view的选中状态
 */
 void setchecked(boolean checked);

 /**
 * 当前view是否被选中
 */
 boolean ischecked();

 /**
 *改变view的选中状态到相反的状态
 */
 void toggle();
}

　　通常这个接口用来帮助我们快速实现view的可选效果，增加了选中和取消两种状态和切换方法。另外为了方便view在状态改变时候快速地变看到效果（更背景或图片)，我们可以直接通过selector控制图片，而其本身并不会自动改变drawable状态，因此这里还有必要重写drawablestatechanged
方法。我们先以定义一个通用的checkedimageview为例：

public class checkedimageview extends imageview implements checkable{
 protected boolean ischecked;//选中状态
 protected oncheckedchangelistener oncheckedchangelistener;//状态改变事件监听

 public static final int[] checked_state_set = { android.r.attr.state_checked };

 public checkedimageview(context context) {
 super(context);
 initialize();
 }

 public checkedimageview(context context, attributeset attrs) {
 super(context, attrs);
 initialize();
 }

 private void initialize() {
 ischecked = false;
 }

 @override
 public boolean ischecked() {
 return ischecked;
 }

 @override
 public void setchecked(boolean ischecked) {
 if (this.ischecked != ischecked) {
  this.ischecked = ischecked;
  refreshdrawablestate();

  if (oncheckedchangelistener != null) {
  oncheckedchangelistener.oncheckedchanged(this, ischecked);
  }
 }
 }

 @override
 public void toggle() {//改变状态
 setchecked(!ischecked);
 }

 //初始drawablestate时候为它添加一个checked_state，imageview本身是没有这个状态的
 @override
 public int[] oncreatedrawablestate(int extraspace) {
 int[] states = super.oncreatedrawablestate(extraspace + 1);
 if (ischecked()) {
  mergedrawablestates(states, checked_state_set);
 }
 return states;
 }

 //当view的选中状态被改变的时候通知imageview改变背景或内容，这个view会自动在drawable状态集中选择与当前状态匹配的图片
 @override
 protected void drawablestatechanged() {
 super.drawablestatechanged();
 drawable drawable = getdrawable();
 if (drawable != null) {
  int[] mydrawablestate = getdrawablestate();
  drawable.setstate(mydrawablestate);
  invalidate();
 }
 }

 //设置状态改变监听事件
 public void setoncheckedchangelistener(oncheckedchangelistener oncheckedchangelistener) {
 this.oncheckedchangelistener = oncheckedchangelistener;
 }

 //当选中状态改变时监听接口触发该事件
 public static interface oncheckedchangelistener {
 public void oncheckedchanged(checkedimageview checkedimgeview, boolean ischecked);
 }
}

这是一个通用的可被选中imageview,当点击之后被选中，再次点击则取消。而其背景/内容也会随之改变。比如下图所示效果：

　　

　　从代码上看，我们本身并没有直接定义当view点击之后,调用setimage()或者setbackground()来改变内容，而是通过使用view本身的drawablestate来绘制和更改，查找与它对应匹配的图片，而这些状态所对应的图片，都预先在selector中配置好。关于selector这里不做介绍，自行查阅学习。 　　

　　既然提到selector,顺带提下之前遇到的坑，关于他的匹配原则。比如下边这样一个selector：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_pressed="true" android:drawable="@drawable/icon_pressed"></item>
 <item android:state_checked="true" android:drawable="@drawable/icon_checked"></item>
 <item android:drawable="@drawable/icon_normal"></item>
</selector>

　　当view同时有上边两个状态(如state_pressed和state_checked)的时候，view优先显示第一个状态时候的图片（icon_pressed）。这是因为它是由上到下有序查找的，当找到第一个状态与他定义的所相符所在行时，就优先显示这行的图片。所以当我们将最后一行

< item android:drawable=”@drawable/icon_normal”>< /item>

放在第一行时，无论是否选中状态或按下状态，都显示的是icon_normal。初学者一定要注意，我当初就因为这个原因耗费了很多时间查找缘由。

　　回到我们的点赞实现。这里实现的点赞view praiseview 包含了一个 checkedimageview 和一个 textview ,点赞之后，imageview会放大回缩并弹出一个textview”+1”的动画效果。

public class praiseview extends framelayout implements checkable{//同样继承checkable
 protected onpraischeckedlistener praisecheckedlistener;
 protected checkedimageview imageview; //点赞图片
 protected textview textview; //+1
 protected int padding;

 public praiseview(context context) {
 super(context);
 initalize();
 }

 public praiseview(context context, attributeset attrs) {
 super(context, attrs);
 initalize();
 }

 protected void initalize() {
 setclickable(true);
 imageview = new checkedimageview(getcontext());
 imageview.setimageresource(r.drawable.blog_praise_selector);
 framelayout.layoutparams flp = new layoutparams(framelayout.layoutparams.wrap_content, framelayout.layoutparams.wrap_content,gravity.center);
 addview(imageview, flp);

 textview = new textview(getcontext());
 textview.settextsize(10);
 textview.settext("+1");
 textview.settextcolor(color.parsecolor("#a24040"));
 textview.setgravity(gravity.center);
 addview(textview, flp);
 textview.setvisibility(view.gone);
 }

 @override
 public boolean performclick() {
 checkchange();
 return super.performclick();
 }

 @override
 public void toggle() {
 checkchange();
 }

 public void setchecked(boolean ischeacked) {
 imageview.setchecked(ischeacked);
 }

 public void checkchange() {//点击切换状态
 if (imageview.ischecked) {
  imageview.setchecked(false);
 } else {
  imageview.setchecked(true);
  textview.setvisibility(view.visible);
  //放大动画
  animhelper.with(new pulseanimator()).duration(1000).playon(imageview);
  //飘 “+1”动画
  animhelper.with(new slideoutupanimator()).duration(1000).playon(textview);
 }
 //调用点赞事件
 if (praisecheckedlistener != null) {
  praisecheckedlistener.onpraischecked(imageview.ischecked);
 }
 }

 public boolean ischecked() {
 return imageview.ischecked;
 }

 public void setonpraischeckedlistener(onpraischeckedlistener praisecheckedlistener) {
 this.praisecheckedlistener = praisecheckedlistener;
 }

 public interface onpraischeckedlistener{
 void onpraischecked(boolean ischecked);
 }
}

　　过于自定的view大概就这么多了，checkable这个小巧方便的类，不知道你会用了没。至于上边用到的两个动画效果集：

animhelper.with(new pulseanimator()).duration(1000).playon(imageview);
animhelper.with(new slideoutupanimator()).duration(1000).playon(textview);
感觉封装的挺简洁实用，所以很有必要学习分析一下。

1.2 动画库的封装和快速框架

　　提到动画，android本身自带的动画类animation已经做到支持3.0及以上了，虽然也做了很好的封装，但是做起复杂动画来还是不够像上边那样简洁。在关于动画兼容方面，github上的大牛jake wharton又做了一套动画开源库nineoldandroids，效果很好而且支持3.0级以前的版本，确实很值得称赞。而在此基础上，有很多高手又做了二次封装，实现了复杂动画，同时保证方便简洁，而且通用性和扩展性更高。我们这里的动画使用的就是这样一个简单的封装。
　　比如，要在xxview上时用xxanimator这样的动画，持续duration秒。就这么一行代码：

animhelper.with(new slideoutupanimator()).duration(1000).playon(textview);
　　来看一下基于nineoldandroids的viewanimations具体实现。

1). 首先定义一个基本动画效果类baseviewanimator

　　这个baseviewanimator动画类使用一个动画集合animatorset，包装成单个动画类似的用法，并定义了一个abstract方法prepare()：

 public abstract class baseviewanimator {

 public static final long duration = 1000;

 private animatorset manimatorset;
 private long mduration = duration;

 {
 manimatorset = new animatorset();
 }


 protected abstract void prepare(view target);

 public baseviewanimator settarget(view target) {
 reset(target);
 prepare(target);
 return this;
 }

 public void animate() {
 start();
 }

 /**
 * reset the view to default status
 *
 * @param target
 */
 public void reset(view target) {
 viewhelper.setalpha(target, 1);
 viewhelper.setscalex(target, 1);
 viewhelper.setscaley(target, 1);
 viewhelper.settranslationx(target, 0);
 viewhelper.settranslationy(target, 0);
 viewhelper.setrotation(target, 0);
 viewhelper.setrotationy(target, 0);
 viewhelper.setrotationx(target, 0);
 viewhelper.setpivotx(target, target.getmeasuredwidth() / 2.0f);
 viewhelper.setpivoty(target, target.getmeasuredheight() / 2.0f);
 }

 /**
 * start to animate
 */
 public void start() {
 manimatorset.setduration(mduration);
 manimatorset.start();
 }

 public baseviewanimator setduration(long duration) {
 mduration = duration;
 return this;
 }

 public baseviewanimator setstartdelay(long delay) {
 getanimatoragent().setstartdelay(delay);
 return this;
 }

 public long getstartdelay() {
 return manimatorset.getstartdelay();
 }

 public baseviewanimator addanimatorlistener(animatorlistener l) {
 manimatorset.addlistener(l);
 return this;
 }

 public void cancel(){
 manimatorset.cancel();
 }

 public boolean isrunning(){
 return manimatorset.isrunning();
 }

 public boolean isstarted(){
 return manimatorset.isstarted();
 }

 public void removeanimatorlistener(animatorlistener l) {
 manimatorset.removelistener(l);
 }

 public void removealllistener() {
 manimatorset.removealllisteners();
 }

 public baseviewanimator setinterpolator(interpolator interpolator) {
 manimatorset.setinterpolator(interpolator);
 return this;
 }

 public long getduration() {
 return mduration;
 }

 public animatorset getanimatoragent() {
 return manimatorset;
 }

}

　　复杂动画效果基类baseviewanimator使用一个animatorset集合来添加各种动画 ,并绑定到目标targetview ,使用 prepare(view target) 的abstract方法供其子类实现具体的动画效果。 　　

2). 其次基于这个类实现我们的各种动画效果xxanimator

　当我们要实现具体的动画效果时，可以直接继承这个类并实现prepaer方法。比如这里定义的上划消失slideoutupanimator 和放大回缩动画pulseanimator

/**
*上划消失（飘+1）
*/
public class slideoutupanimator extends baseviewanimator {
 @override
 public void prepare(view target) {
 viewgroup parent = (viewgroup)target.getparent();
 getanimatoragent().playtogether(
  objectanimator.offloat(target, "alpha", 1, 0),
  objectanimator.offloat(target,"translationy",0,-parent.getheight()/2)
 );
 }
}

/**
*放大效果
*/
public class pulseanimator extends baseviewanimator {
 @override
 public void prepare(view target) {
 getanimatoragent().playtogether(
  objectanimator.offloat(target, "scaley", 1, 1.2f, 1),
  objectanimator.offloat(target, "scalex", 1, 1.2f, 1)
 );
 }
}

　上边两种动画效果就是对baseviewanimator的两种实现，动画本身使用的库是nineoldandroids。

3). 最后封装一个动画管理工具类animhelper供外部使用

　首先定义了一个静态类，使用helper来实例化这个静态类，并设置各个参数选项。

 public class animhelper {
 private static final long duration = baseviewanimator.duration;
 private static final long no_delay = 0;

 /**
 *实例化得到animationcomposer的唯一接口
 */
 public static animationcomposer with(baseviewanimator animator) {
 return new animationcomposer(animator);
 }

 /**
 *定义与动画效果相关联的各种参数，
 *使用这种方法可以保证对象的构建和他的表示相互隔离开来
 */
 public static final class animationcomposer {

 private list<animator.animatorlistener> callbacks = new arraylist<animator.animatorlistener>();

 private baseviewanimator animator;
 private long duration = duration;
 private long delay = no_delay;
 private interpolator interpolator;
 private view target;

 private animationcomposer(baseviewanimator animator) {
  this.animator = animator;
 }

 public animationcomposer duration(long duration) {
  this.duration = duration;
  return this;
 }

 public animationcomposer delay(long delay) {
  this.delay = delay;
  return this;
 }

 public animationcomposer interpolate(interpolator interpolator) {
  this.interpolator = interpolator;
  return this;
 }


 public animationcomposer withlistener(animator.animatorlistener listener) {
  callbacks.add(listener);
  return this;
 }

 public animmanager playon(view target) {
  this.target = target;
  return new animmanager(play(), this.target);
 }

 private baseviewanimator play() {
  animator.settarget(target);
  animator.setduration(duration)
   .setinterpolator(interpolator)
   .setstartdelay(delay);

  if (callbacks.size() > 0) {
  for (animator.animatorlistener callback : callbacks) {
   animator.addanimatorlistener(callback);
  }
  }

  animator.animate();
  return animator;
 }
 }

 /**
 *动画管理类
 */
 public static final class animmanager{

 private baseviewanimator animator;
 private view target;

 private animmanager(baseviewanimator animator, view target){
  this.target = target;
  this.animator = animator;
 }

 public boolean isstarted(){
  return animator.isstarted();
 }

 public boolean isrunning(){
  return animator.isrunning();
 }

 public void stop(boolean reset){
  animator.cancel();

  if(reset)
  animator.reset(target);
 }
 }

}

　这段代码使用了类似dialog的builder模式，感兴趣的可以搜一下 java设计模式-builder.晚点会另开一篇讲解。
（注： 复杂动画这一部分的内容这里只是拿出来展示和使用，包装和实现是由代码家大大原创，有想了解更多动画及效果的请点其名字链接）

　运行一下，就可以看到前面所演示的效果了。点击第一下，，伴随着图标变大一下并飘出“+1”的效果，图片切换到选中状态；再点则恢复未选中，而且不会触发动画。 　

　至此，点赞这块内容和关注点也说完了，希望各位能有点儿收获，另外便于自己也能加深理解。
　最后，附上示例源码地址：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。