快捷導(dǎo)航

簡單實(shí)用的Android UI微博動態(tài)點(diǎn)贊效果

更新時(shí)間：2016年10月24日 14:09:55 作者：Qiaoidea

這篇文章主要為大家詳細(xì)介紹了簡單實(shí)用的Android UI微博動態(tài)點(diǎn)贊效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

說起空間動態(tài)、微博的點(diǎn)贊效果，網(wǎng)上也是很泛濫，各種實(shí)現(xiàn)與效果一大堆。而詳細(xì)實(shí)現(xiàn)的部分，講述的也是參差不齊，另一方面估計(jì)也有很多大俠也不屑一顧，覺得完全沒必要單獨(dú)開篇來寫和講解吧。畢竟，也就是兩個(gè)view和一些簡單的動畫效果罷了。

單若是只講這些，我自然也是不愿花這番功夫的。雖然自己很菜，可也不甘于太菜。所以偶爾看到些好東西，可以延伸學(xué)寫下，我還是很情愿拿出來用用，順帶秀一秀逼格什么的。

不扯太多，先說說今天實(shí)現(xiàn)點(diǎn)贊效果用到的自以為不錯(cuò)的兩個(gè)點(diǎn)：

Checkable 用來擴(kuò)展View實(shí)現(xiàn)選中狀態(tài)切換

AndroidViewAnimations 基于nineoldandroids封裝的android動畫簡易類庫。究竟有多簡單呢，就像這樣

AnimHelper.with(new PulseAnimator()).duration(1000).playOn(imageView);

作用：在imageView上使用PulseAnimator這個(gè)動畫效果，播放一秒。

當(dāng)然是從實(shí)現(xiàn)角度來看這個(gè)庫啦，如果僅僅是使用，google/百度一大堆啦。

結(jié)合前兩篇富文本折疊展開，加上我們的點(diǎn)贊view 做出的demo整合效果圖：

1.從實(shí)現(xiàn)看門道

其實(shí)從效果看無非就是點(diǎn)擊切換圖片，并添加一些簡單動畫效果而已，確實(shí)沒什么難度。這里是因?yàn)橐肓藘蓚€(gè)不錯(cuò)的新內(nèi)容，使用下，權(quán)當(dāng)新手嘗鮮。

1.1 Checkable接口實(shí)現(xiàn)CheckedImageView

系統(tǒng)本身提供了android.widget.Checkable這樣一個(gè)接口，方便我們繼承實(shí)現(xiàn)View的選中和取消的狀態(tài)?？聪逻@個(gè)類：

public interface Checkable {

 /**
 * 設(shè)置view的選中狀態(tài)
 */
 void setChecked(boolean checked);

 /**
 * 當(dāng)前view是否被選中
 */
 boolean isChecked();

 /**
 *改變view的選中狀態(tài)到相反的狀態(tài)
 */
 void toggle();
}

通常這個(gè)接口用來幫助我們快速實(shí)現(xiàn)view的可選效果，增加了選中和取消兩種狀態(tài)和切換方法。另外為了方便View在狀態(tài)改變時(shí)候快速地變看到效果（更背景或圖片)，我們可以直接通過selector控制圖片，而其本身并不會自動改變drawable狀態(tài)，因此這里還有必要重寫drawableStateChanged方法。我們先以定義一個(gè)通用的CheckedImageView為例：

public class CheckedImageView extends ImageView implements Checkable{
 protected boolean isChecked;//選中狀態(tài)
 protected OnCheckedChangeListener onCheckedChangeListener;//狀態(tài)改變事件監(jiān)聽

 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() {//改變狀態(tài)
 setChecked(!isChecked);
 }

 //初始DrawableState時(shí)候?yàn)樗砑右粋€(gè)CHECKED_STATE，ImageView本身是沒有這個(gè)狀態(tài)的
 @Override
 public int[] onCreateDrawableState(int extraSpace) {
 int[] states = super.onCreateDrawableState(extraSpace + 1);
 if (isChecked()) {
 mergeDrawableStates(states, CHECKED_STATE_SET);
 }
 return states;
 }

 //當(dāng)view的選中狀態(tài)被改變的時(shí)候通知ImageView改變背景或內(nèi)容，這個(gè)view會自動在drawable狀態(tài)集中選擇與當(dāng)前狀態(tài)匹配的圖片
 @Override
 protected void drawableStateChanged() {
 super.drawableStateChanged();
 Drawable drawable = getDrawable();
 if (drawable != null) {
 int[] myDrawableState = getDrawableState();
 drawable.setState(myDrawableState);
 invalidate();
 }
 }

 //設(shè)置狀態(tài)改變監(jiān)聽事件
 public void setOnCheckedChangeListener(OnCheckedChangeListener onCheckedChangeListener) {
 this.onCheckedChangeListener = onCheckedChangeListener;
 }

 //當(dāng)選中狀態(tài)改變時(shí)監(jiān)聽接口觸發(fā)該事件
 public static interface OnCheckedChangeListener {
 public void onCheckedChanged(CheckedImageView checkedImgeView, boolean isChecked);
 }
}

這是一個(gè)通用的可被選中ImageView,當(dāng)點(diǎn)擊之后被選中，再次點(diǎn)擊則取消。而其背景/內(nèi)容也會隨之改變。比如下圖所示效果：

從代碼上看，我們本身并沒有直接定義當(dāng)view點(diǎn)擊之后,調(diào)用setImage()或者setBackground()來改變內(nèi)容，而是通過使用View本身的DrawableState來繪制和更改，查找與它對應(yīng)匹配的圖片，而這些狀態(tài)所對應(yīng)的圖片，都預(yù)先在selector中配置好。關(guān)于selector這里不做介紹，自行查閱學(xué)習(xí)。　　

既然提到selector,順帶提下之前遇到的坑，關(guān)于他的匹配原則。比如下邊這樣一個(gè)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>

當(dāng)view同時(shí)有上邊兩個(gè)狀態(tài)(如state_pressed和state_checked)的時(shí)候，view優(yōu)先顯示第一個(gè)狀態(tài)時(shí)候的圖片（icon_pressed）。這是因?yàn)樗怯缮系较掠行虿檎业?，?dāng)找到第一個(gè)狀態(tài)與他定義的所相符所在行時(shí)，就優(yōu)先顯示這行的圖片。所以當(dāng)我們將最后一行

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

放在第一行時(shí)，無論是否選中狀態(tài)或按下狀態(tài)，都顯示的是icon_normal。初學(xué)者一定要注意，我當(dāng)初就因?yàn)檫@個(gè)原因耗費(fèi)了很多時(shí)間查找緣由。

回到我們的點(diǎn)贊實(shí)現(xiàn)。這里實(shí)現(xiàn)的點(diǎn)贊View PraiseView 包含了一個(gè) CheckedImageView 和一個(gè) TextView ,點(diǎn)贊之后，ImageView會放大回縮并彈出一個(gè)TextView”+1”的動畫效果。

public class PraiseView extends FrameLayout implements Checkable{//同樣繼承Checkable
 protected OnPraisCheckedListener praiseCheckedListener;
 protected CheckedImageView imageView; //點(diǎn)贊圖片
 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() {//點(diǎn)擊切換狀態(tài)
 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);
 }
 //調(diào)用點(diǎn)贊事件
 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這個(gè)小巧方便的類，不知道你會用了沒。至于上邊用到的兩個(gè)動畫效果集：

AnimHelper.with(new PulseAnimator()).duration(1000).playOn(imageView);
AnimHelper.with(new SlideOutUpAnimator()).duration(1000).playOn(textView);

感覺封裝的挺簡潔實(shí)用，所以很有必要學(xué)習(xí)分析一下。

1.2 動畫庫的封裝和快速框架

提到動畫，Android本身自帶的動畫類Animation已經(jīng)做到支持3.0及以上了，雖然也做了很好的封裝，但是做起復(fù)雜動畫來還是不夠像上邊那樣簡潔。在關(guān)于動畫兼容方面，github上的大牛Jake Wharton又做了一套動畫開源庫NineOldAndroids，效果很好而且支持3.0級以前的版本，確實(shí)很值得稱贊。而在此基礎(chǔ)上，有很多高手又做了二次封裝，實(shí)現(xiàn)了復(fù)雜動畫，同時(shí)保證方便簡潔，而且通用性和擴(kuò)展性更高。我們這里的動畫使用的就是這樣一個(gè)簡單的封裝。

比如，要在XXView上時(shí)用XXAnimator這樣的動畫，持續(xù)Duration秒。就這么一行代碼：

AnimHelper.with(new SlideOutUpAnimator()).duration(1000).playOn(textView);

來看一下基于NineOldAndroids的ViewAnimations具體實(shí)現(xiàn)。

1). 首先定義一個(gè)基本動畫效果類BaseViewAnimator

這個(gè)BaseViewAnimator動畫類使用一個(gè)動畫集合AnimatorSet，包裝成單個(gè)動畫類似的用法，并定義了一個(gè)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;
 }

}

復(fù)雜動畫效果基類BaseViewAnimator使用一個(gè)AnimatorSet集合來添加各種動畫 ,并綁定到目標(biāo)targetView ,使用 prepare(View target) 的abstract方法供其子類實(shí)現(xiàn)具體的動畫效果。　　

2). 其次基于這個(gè)類實(shí)現(xiàn)我們的各種動畫效果XXAnimator

當(dāng)我們要實(shí)現(xiàn)具體的動畫效果時(shí)，可以直接繼承這個(gè)類并實(shí)現(xiàn)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的兩種實(shí)現(xiàn)，動畫本身使用的庫是NineOldAndroids。

3). 最后封裝一個(gè)動畫管理工具類AnimHelper供外部使用

首先定義了一個(gè)靜態(tài)類，使用helper來實(shí)例化這個(gè)靜態(tài)類，并設(shè)置各個(gè)參數(shù)選項(xiàng)。

 public class AnimHelper {
 private static final long DURATION = BaseViewAnimator.DURATION;
 private static final long NO_DELAY = 0;

 /**
 *實(shí)例化得到AnimationComposer的唯一接口
 */
 public static AnimationComposer with(BaseViewAnimator animator) {
 return new AnimationComposer(animator);
 }

 /**
 *定義與動畫效果相關(guān)聯(lián)的各種參數(shù)，
 *使用這種方法可以保證對象的構(gòu)建和他的表示相互隔離開來
 */
 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設(shè)計(jì)模式-Builder.晚點(diǎn)會另開一篇講解。

（注：復(fù)雜動畫這一部分的內(nèi)容這里只是拿出來展示和使用，包裝和實(shí)現(xiàn)是由代碼家大大原創(chuàng)，有想了解更多動畫及效果的請點(diǎn)其名字鏈接）

運(yùn)行一下，就可以看到前面所演示的效果了。點(diǎn)擊第一下，伴隨著圖標(biāo)變大一下并飄出“+1”的效果，圖片切換到選中狀態(tài)；再點(diǎn)則恢復(fù)未選中，而且不會觸發(fā)動畫。

至此，點(diǎn)贊這塊內(nèi)容和關(guān)注點(diǎn)也說完了，希望各位能有點(diǎn)兒收獲，另外便于自己也能加深理解。

最后，附上示例源碼地址：Android UI微博動態(tài)點(diǎn)贊

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: