自定义view-仿网易音乐播放的按键

上图：

上代码：

package com.example.testview;

import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.animation.LinearInterpolator;
import android.widget.LinearLayout;
import android.widget.TextView;

import android.support.v4.view.MotionEventCompat;
import android.support.v4.view.ViewCompat;

@SuppressLint("NewApi")
public class MusicView extends LinearLayout {

    public MusicView(Context context, AttributeSet attrs, int defStyleAttr,
            int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        // TODO Auto-generated constructor stub
    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    public MusicView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
    }

    public MusicView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    public MusicView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    private void initView(Context mContext) {
        this.setClickable(true);
        initLine(mContext);
    }

    int lineNum = 4;
    int lineW = 5;
    TextView[] lines;
    LinearLayout.LayoutParams[] lps;
    int lineBgNomal = 0xFF000000;
    int lineBgClick = 0xFFFFFFFF;

    private void initLine(Context mContext) {
        if (lines == null) {
            lines = new TextView[lineNum];
            lps = new LinearLayout.LayoutParams[lineNum];
            for (int i = 0; i < lines.length; i++) {
                lines[i] = new TextView(mContext);
                lines[i].setBackgroundColor(lineBgNomal);
                lps[i] = new LinearLayout.LayoutParams(lineW,
                        LinearLayout.LayoutParams.MATCH_PARENT);
                lps[i].weight = 1;
            }
        }
    }

    private void setLineBg(int color) {
        if (lines != null)
            for (int i = 0; i < lines.length; i++) {
                lines[i].setBackgroundColor(color);
            }
    }

    int mHeight;
    int mWidth;

    boolean isNeedRelayoutLines = true;

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int height = getMeasuredHeight();
        int width = getMeasuredWidth();
        if (height > 0) {
            mHeight = height;
        }
        if (width > 0) {
            mWidth = width;
        }
        if (isNeedRelayoutLines && mWidth > 0 && isShowToWindow) {

            int lPad = getPaddingLeft();
            int rPad = getPaddingRight();
            float perW = (mWidth - (lPad + rPad)) * 1.0f / lineNum;
            int marginW = (int) ((perW - lineW) / 2);
            for (int i = 0; i < lines.length; i++) {
                lps[i].leftMargin = lps[i].rightMargin = marginW;
                addView(lines[i], lps[i]);
            }
            isNeedRelayoutLines = false;
            invalidate();

            startMoveAnimation();
        }
    }

    boolean isShowToWindow = false;

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        isShowToWindow = true;
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        isShowToWindow = false;
        isNeedRelayoutLines = true;
    }

    boolean isTouched = false;

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        final int action = MotionEventCompat.getActionMasked(event);

        Log.e("mytag", "<<" + action);
        
        switch (action) {
        case MotionEvent.ACTION_DOWN:

            if (!isTouched) {
                isTouched = true;
                setLineBg(lineBgClick);
                invalidate();
            }

            break;

        case MotionEvent.ACTION_CANCEL:
        case MotionEvent.ACTION_UP:
            if (isTouched) {
                isTouched = false;
                setLineBg(lineBgNomal);
                invalidate();
            }
            break;
        }

        return super.onTouchEvent(event);
    }

    // ----------------
    // move
    // ----------------
    private void setLineMovePercent(TextView line, float percent) {
        int topPad = getPaddingTop();
        int bottomPad = getPaddingBottom();
        int LineHeight = mHeight - (topPad + bottomPad);
        int margintop = (int) ((1 - percent) * LineHeight);
        LinearLayout.LayoutParams ll = (LayoutParams) line.getLayoutParams();
        ll.topMargin = margintop;
        line.setLayoutParams(ll);
    }

    class LineMoveAnimationRunable implements Runnable {

        long startTime;
        long curTime;
        long durationTime;
        float startPercent;
        float toPercent;
        TextView line;
        MoveAnimationEndListener mMoveAnimationEndListener;

        public LineMoveAnimationRunable(TextView line, float startPercent,
                float toPercent, long durationTime,
                MoveAnimationEndListener mMoveAnimationEndListener) {
            this.durationTime = durationTime;
            this.startPercent = startPercent;
            this.toPercent = toPercent;
            this.line = line;
            this.mMoveAnimationEndListener = mMoveAnimationEndListener;
        }

        @Override
        public void run() {

            if (startTime == 0) {
                startTime = System.currentTimeMillis();
            }

            curTime = System.currentTimeMillis();

            float percent = (curTime - startTime) * 1.0f / durationTime;

            LinearInterpolator linearInterpolator = new LinearInterpolator();

            float dpercent = linearInterpolator.getInterpolation(percent);

            float mpercent = startPercent;

//            Log.e("mytag", "<<" + dpercent);

            if (startPercent < toPercent) {// 增加

                mpercent = startPercent + dpercent;

                if (mpercent >= toPercent) {
                    mpercent = toPercent;
                }
            } else {

                mpercent = startPercent - dpercent;

                if (mpercent <= toPercent) {
                    mpercent = toPercent;
                }
            }

            if (!isShowToWindow) {
                return;
            }

            setLineMovePercent(line, mpercent);
            invalidate();

            if (mpercent == toPercent) {
                if (mMoveAnimationEndListener != null) {
                    mMoveAnimationEndListener.AnimationEnd(line, startPercent,
                            toPercent, durationTime);
                }
                return;
            } else {
                line.postDelayed(this, 50L);
            }
        }
    }

    interface MoveAnimationEndListener {
        public void AnimationEnd(TextView line, float startPercent,
                float toPercent, long durationTime);
    }

    public void startMoveAnimation() {
        // 0 2 0.5 -1
        // 1 3 1-0.5
        MoveAnimationEndListener listener = new MoveAnimationEndListener() {
            @Override
            public void AnimationEnd(TextView line, float startPercent,
                    float toPercent, long durationTime) {
                LineMoveAnimationRunable moveRunnable = new LineMoveAnimationRunable(
                        line, toPercent, startPercent, durationTime, this);
                line.postDelayed(moveRunnable, 200L);
            }
        };

        for (int i = 0; i < lines.length; i++) {
            if (i % 2 == 0) {
                LineMoveAnimationRunable moveRunnable = new LineMoveAnimationRunable(
                        lines[i], 0.5f, 1.0f, 1000L, listener);
                lines[i].post(moveRunnable);
            } else {
                LineMoveAnimationRunable moveRunnable = new LineMoveAnimationRunable(
                        lines[i], 1f, 0.5f, 1000L, listener);
                lines[i].post(moveRunnable);
            }
        }
    }
}

遗留问题：如上 每个line是单独的线程  可优化为四个line setMargin之后统一invalidate 

自定义控件总结 

几个相关函数：

1.构造函数：   初始化view ，获取自定义属性

TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RefreshView);
        final int type = a.getInteger(R.styleable.RefreshView_type, STYLE_SUN);

2.onMeasure函数 中获取measure后的宽高

int height = getMeasuredHeight();
int width = getMeasuredWidth();

调用子view的 measure函数，

MeasureSpec.EXACTLY 父类指定大小 
AT_MOST             子类尽可能大
UNSPECIFIED         未指定大小

widthMeasureSpec = MeasureSpec.makeMeasureSpec(getMeasuredWidth() - getPaddingRight() - getPaddingLeft(), MeasureSpec.EXACTLY);
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(getMeasuredHeight() - getPaddingTop() - getPaddingBottom(), MeasureSpec.EXACTLY);
        mTarget.measure(widthMeasureSpec, heightMeasureSpec);
        mRefreshView.measure(widthMeasureSpec, heightMeasureSpec);

3.onLayout函数布局 调用 子view的layout 函数布局

 protected void onLayout(boolean changed, int l, int t, int r, int b) {
　　　　　　... ...
        int height = getMeasuredHeight();
        int width = getMeasuredWidth();
        int left = getLeft();
        int top = getTop();
        int right = getRight();
        int bottom = getBottom();

        int lpad = getPaddingLeft();
        int rpad = getPaddingRight();
        int tpad = getPaddingTop();
        int bpad = getPaddingBottom();

        mTarget.layout(left + lpad, top + tpad+ mCurrentOffsetTop, right-rpad, bottom-bpad + mCurrentOffsetTop);
        mRefreshView.layout(left, top, left + width - right, top + height - bottom);
    }

4.onInterceptTouchEvent 拦截touch事件  主要做状态的改变检测  

　onTouchEvent 主要touch逻辑操作 计算滑动距离等 改变子类view 需调用 this.validate or  this. postvalidate

　　改变自身需要父类控件重新布局需要调用 requireLayout

5.动画相关 如 拖拽完成后的动画复位 Animation类 或者 Runnable类

     mAnimateToStartPosition.reset();
        mAnimateToStartPosition.setDuration(animationDuration);
        mAnimateToStartPosition.setInterpolator(mDecelerateInterpolator);
        mAnimateToStartPosition.setAnimationListener(mToStartListener);
        mRefreshView.clearAnimation();
        mRefreshView.startAnimation(mAnimateToStartPosition);

　　

private final Animation mAnimateToStartPosition = new Animation() {
        @Override
        public void applyTransformation(float interpolatedTime, Transformation t) {
            moveToStart(interpolatedTime);
        }
    };

　　interpolateTime 时间所对应的差值点