不要将Android 自定义 View 想复杂

Android自定义View是在开发中经常会用到的，当我们遇到一些原声控件无法达到的效果，我们就会自定义一个View，网上有太多太多关于自定义View的文章，我本来是不准备写的，但是之前遇到了一件事，发现有些人把自定义View想复杂了。

在新的版本开发中，产品提出了个需求，将APP中的消息提示分了几个等级：一般、紧急、非常紧急 三种，并且在提醒用户消息等级的图标铃铛也分了三种：一般等级铃铛是绿色，无动效；紧急等级铃铛为红色，无动效；非常紧急等级铃铛是红色且会有左右摇动的效果。效果大致如下，颜色需要做些更改。

了解需求后那就开始开发，由于我还有其他一部分任务，于是我就把这个任务分给了新进来的一个同事。因为这个消息提示等级的效果在APP多个模块中都有用到，所以我特意提示那个小伙子写个自定义控件，封装好设置等级，改变颜色，图标等方法，让我们在其他地方可以方便的调用。

任务发给他后我就在忙我的任务，可是到了第二天他找我来了，扭捏的说，他不会写。我纳闷了，不是很难啊，于是我就问他：

“你哪一部分不会，遇到问题了？”
“铃铛那个图我不会画。”
“画铃铛？”
“对啊，这个铃铛他复杂了，我不会画它的边距及它的图像········”
我愣了：“你要用画笔画这个铃铛？”
“对啊，我昨天专门看了很多自定义View的文章，上面说用 画布和画笔来绘制图像，但是这个铃铛的形状我不会画，我不会算······”

我听了他的解释后我就明白了，他想的太复杂了，毕竟写那些自定义View的文章的都是大神，他们文章中也都是说明实现复杂特效的步骤，所以误导了他，弄得他认为自定义View就是单纯用代码，用画笔来 draw 图像，硬生生把一个简单的问题复杂化了。

然后我就和他说，不用你画，你去问美工要铃铛切图，add 到你自己的自定义View中，不用你画。和他说了后，
他愣了：“那这个能算是自定义VIew么？”
“怎么不算”
“可是这样的话没有用到所谓的 画布，画笔啊”
“谁告诉你自定义VIew就是要用画布画笔的”

我的这位同事陷入了个误区，他看了很多自定义View的文章（都是哪些大神写的牛逼特效的文章），误认为自定义VIew就是需要 用画笔 一笔一笔draw的，真是········唉······

下面我就来说下我的思路：我们需要这样的而一个控件，首先最基本的我们在这个控件中要有个象征着新消息的铃铛，铃铛的图我们直接向美工要切图，那就是我们在这个View中 new 一个 ImageView ，将铃铛图设置成它的 imageResource ，add到我们的View中，那我们就实现了第一步，有铃铛图了。

       ImageView imageView = new ImageView(getContext());        imageView.setImageResource(R.drawable.lingdang);        ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(width/2,height);        imageView.setLayoutParams(layoutParams);        addView(imageView);

第二步，我们需要按照不同的等级来让它改变图片或者左右摇摆，那我们就曝露一个set等级的方法（等级分为123）：

public void setLevel(int level){    this.level=level;    show();}

根据等级来进行第二步的操作，更改图片那很容易，换imageResource就可以了：

switch (level){    case 0:        imageView.setImageResource(R.drawable.lingdang0);        break;    case 1:        imageView.setImageResource(R.drawable.lingdang1);        break;    case 2:        imageView.setImageResource(R.drawable.lingdang2);        break;}

等级为2的话那就设置左右摇摆的动画：

if(level==2){    imageView.startAnimation(holder2LeftAnimation);}

完整代码如下（写的很粗糙，只是提供了下基本思路）：

package com.example.jin.swiplistview.view;import android.annotation.TargetApi;import android.content.Context;import android.os.Build;import android.util.AttributeSet;import android.util.Log;import android.view.ViewGroup;import android.view.ViewTreeObserver;import android.view.animation.Animation;import android.view.animation.RotateAnimation;import android.widget.ImageView;import android.widget.RelativeLayout;import com.example.jin.swiplistview.R;/** *  铃铛左右摇晃View * Created by Jin on 2016/4/1. */public class LingDangAnimationView extends RelativeLayout implements ViewTreeObserver.OnGlobalLayoutListener{    /**     *  中间到左边动画     */    private RotateAnimation holder2LeftAnimation;    /**     *  左边到右边动画     */    private RotateAnimation left2RightAnimation;    /**     *  右边到左边动画     */    private RotateAnimation right2LeftAnimation;    private ImageView imageView;    private int width,height;    private int level;    public LingDangAnimationView(Context context) {        super(context);        init();    }    public LingDangAnimationView(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    private void init() {        holder2LeftAnimation = new RotateAnimation(0f, 45f, Animation.RELATIVE_TO_SELF,                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);        holder2LeftAnimation.setDuration(500);        left2RightAnimation = new RotateAnimation(45f, -45f, Animation.RELATIVE_TO_SELF,                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);        left2RightAnimation.setDuration(1000);        right2LeftAnimation = new RotateAnimation(-45f, 45f, Animation.RELATIVE_TO_SELF,                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);        right2LeftAnimation.setDuration(1000);        getViewTreeObserver().addOnGlobalLayoutListener(this);        holder2LeftAnimation.setAnimationListener(new Animation.AnimationListener() {            @Override            public void onAnimationStart(Animation animation) {            }            @Override            public void onAnimationEnd(Animation animation) {                imageView.startAnimation(left2RightAnimation);            }            @Override            public void onAnimationRepeat(Animation animation) {            }        });        left2RightAnimation.setAnimationListener(new Animation.AnimationListener() {            @Override            public void onAnimationStart(Animation animation) {            }            @Override            public void onAnimationEnd(Animation animation) {                imageView.startAnimation(right2LeftAnimation);            }            @Override            public void onAnimationRepeat(Animation animation) {            }        });        right2LeftAnimation.setAnimationListener(new Animation.AnimationListener() {            @Override            public void onAnimationStart(Animation animation) {            }            @Override            public void onAnimationEnd(Animation animation) {                imageView.startAnimation(left2RightAnimation);            }            @Override            public void onAnimationRepeat(Animation animation) {            }        });    }    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)    public void onGlobalLayout() {        int tmpW = getWidth();        int tmpH = getHeight();        if (width != tmpW || height != tmpH) {            getViewTreeObserver().removeOnGlobalLayoutListener(this);            width = tmpW;            height = tmpH;        }    }    public void setLevel(int level){        this.level=level;        show();    }    private void show() {        imageView = new ImageView(getContext());        switch (level){            case 0:                imageView.setImageResource(R.drawable.lingdang0);                break;            case 1:                imageView.setImageResource(R.drawable.lingdang1);                break;            case 2:                imageView.setImageResource(R.drawable.lingdang2);                break;        }        imageView.setImageResource(R.drawable.lingdang);        ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(width/2,height);        imageView.setLayoutParams(layoutParams);        addView(imageView);        if(level==2){            imageView.startAnimation(holder2LeftAnimation);        }    }}

希望这篇文章对你有所帮助。