《代码里的世界》 —UI篇
用文字札记描绘自己 android学习之路
转载请保留出处 by Qiao
【导航】 – 单行文本水平触摸滑动效果 通过EditText实现TextView单行长文本水平滑动效果 – 多行文本折叠展开 自定义布局View实现多行文本折叠和展开
1.概述
说起空间动态、微博的点赞效果，估计很多大侠也不愿单独开篇来写和讲解吧。毕竟也就是两个view和一些简单的动画效果罢了。 单若是只讲这些，我自然也是不愿的。虽然很菜，可也不甘于菜。不过偶尔看到些好东西，我还是很情愿拿出来用用，秀一下逼格的。 扯这么多，先说说今天用到的两个点：
Checkable 用来扩展View实现选中状态切换
AndroidViewAnimations 基于nineoldandroids封装的android动画简易类库。究竟有多简单呢，就像这样
AnimHelper.with(newPulseAnimator()).duration(1000).playOn(imageView); 在imageView使用PulseAnimator这样的动画，持续一秒。
当然是从实现角度来看这个库啦，如果仅仅是使用，google/百度一大堆啦。 结合前两篇的view 整合的效果图：
2.从实现看门道
从效果看无非就是点击切换图片，并添加一些简单效果而已，确实毫无难度。这里引入两个内容，权当新手尝鲜。
2.1 Checkable接口实现CheckedImageView
系统本身提供了android.widget.Checkable这样一个接口，方便我们实现View的选中和取消的状态。
{/*** 设置view的选中状态*/void setChecked(boolean checked);/*** 当前view是否被选中*/boolean isChecked();/***改变view的选中状态到相反的状态*/void toggle();}
通常这个接口用来帮助我们快速实现view的可选效果，为了方便View在状态改变时候快速地变更背景或图片，即直接通过selector控制图片，我们还有必要重写drawableStateChanged 方法。这里我们先以定义一个通用的CheckedImageView为例：
{OnCheckedChangeListener onCheckedChangeListener;[] 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();}() {isChecked = false;}() {return isChecked;}(boolean isChecked) {if (this.isChecked != isChecked) {this.isChecked = isChecked;refreshDrawableState();if (onCheckedChangeListener != null) {onCheckedChangeListener.onCheckedChanged(this, isChecked);}}}() {//改变状态setChecked(!isChecked);}[] onCreateDrawableState(int extraSpace) {int[] states = super.onCreateDrawableState(extraSpace + 1);if (isChecked()) {mergeDrawableStates(states, CHECKED_STATE_SET);}return states;}() {super.drawableStateChanged();Drawable drawable = getDrawable();if (drawable != null) {int[] myDrawableState = getDrawableState();drawable.setState(myDrawableState);invalidate();}}(OnCheckedChangeListener onCheckedChangeListener) {this.onCheckedChangeListener = onCheckedChangeListener;}{(CheckedImageView checkedImgeView, boolean isChecked);}}
这是一个通用的可被选中ImageView,当点击之后被选中，比如这样的效果： 我们本身并没有直接写当点击之后setImage()或者setBackground()而是通过selector配置好，由View本身的DrawableState来绘制和更改。关于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，点赞View**PraiseView**包含了一个CheckedImageView和一个TextView,即点赞后ImageView会放大回缩并弹出一个TextView”+1”的动画效果。
{//同样继承Checkableprotected OnPraisCheckedListener praiseCheckedListener;padding;public PraiseView(Context context) {super(context);initalize();}public PraiseView(Context context, AttributeSet attrs) {super(context, attrs);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);}() {checkChange();return super.performClick();}() {checkChange();}(boolean isCheacked) {imageView.setChecked(isCheacked);}() {//点击切换状态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);}}() {return imageView.isChecked;}(OnPraisCheckedListener praiseCheckedListener) {this.praiseCheckedListener = praiseCheckedListener;}{void onPraisChecked(boolean isChecked);}}2.2 动画库的封装和快速框架孑然一身，隐入苍茫自然，自有一种孤独的意味;旅行，
