不要将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);
        }

    }
}

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