android:滑動掛斷自定義View的簡單實現

要點：

隨著手指的滑動更新位置

drawText的時候，如何計算開始的位置,使str居中

1.CallSliderEndView.java

package net.mobctrl.callendview;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * @date 2015年2月2日 下午11:02:00
 * @author Zheng Haibo
 * @Description: 滑動掛斷的自定義控件
 * @Web http://www.mobctrl.net
 */
@SuppressLint({ DrawAllocation, ClickableViewAccessibility })
public class CallSliderEndView extends View {

    public interface SliderEndListener {
        public void onSliderEnd();
    }

    private SliderEndListener sliderEndListener;

    public void setSliderEndListener(SliderEndListener sliderEndListener) {
        this.sliderEndListener = sliderEndListener;
    }

    private int height;
    private int width;
    private int circleOffset = 0;
    private int prevX = 0;
    private int maxOffset;
    private String sliderText;
    private float textSize;
    private int progressBackgroundColor;
    private int backgroundColor;
    private int redReginWidth;

    public CallSliderEndView(Context context) {
        super(context);
        init(context, null);
    }

    public CallSliderEndView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public CallSliderEndView(Context context, AttributeSet attrs,
            int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        if (null == attrs) {
            return;
        }
        TypedArray typedArray = context.obtainStyledAttributes(attrs,
                R.styleable.CallSliderEndView);
        textSize = typedArray.getDimensionPixelSize(
                R.styleable.CallSliderEndView_textSize, 40);
        sliderText = typedArray.getString(R.styleable.CallSliderEndView_text);
        progressBackgroundColor = typedArray.getColor(
                R.styleable.CallSliderEndView_progressBackgroundColor,
                Color.GREEN);
        backgroundColor = typedArray.getColor(
                R.styleable.CallSliderEndView_backgroundColor, 0x0fffffff);
        typedArray.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // TODO
        height = getHeight();
        width = getWidth();
        // 繪制背景
        Paint paint = new Paint();
        paint.setStyle(Style.FILL);
        paint.setAntiAlias(true);
        paint.setColor(backgroundColor);
        drawBackground(canvas, paint);
        // drawCircleButton(canvas, paint);
        drawRoundButton(canvas, paint);
    }

    // 繪制背景
    private void drawBackground(Canvas canvas, Paint paint) {
        canvas.drawRoundRect(new RectF(0, 0, width, height), height / 2,
                height / 2, paint);
    }

    // 繪制掛斷按鈕的View
    @Deprecated
    private void drawCircleButton(Canvas canvas, Paint paint) {
        int circleMargin = height / 10;
        paint.setColor(Color.RED);
        canvas.drawCircle(height / 2 + circleOffset, height / 2, height / 2
                - circleMargin, paint);
    }

    // 繪制掛斷按鈕的View
    private void drawRoundButton(Canvas canvas, Paint paint) {
        redReginWidth = width / 2;

        // 繪制進度背景
        paint.setColor(progressBackgroundColor);
        canvas.drawRoundRect(new RectF(circleOffset, 0, circleOffset
                + redReginWidth, height), height / 2, height / 2, paint);

        // 將文本sliderText顯示在中間
        paint.setTextSize(textSize);
        paint.setColor(Color.WHITE);
        int yCenterPos = (int) ((canvas.getHeight() / 2) - ((paint.descent() + paint
                .ascent()) / 2));// 計算在Y
        int startX = circleOffset
                + (redReginWidth - (int) paint.measureText(sliderText, 0,
                        sliderText.length())) / 2;
        canvas.drawText(sliderText, startX, yCenterPos, paint);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            actionDown(event);
            break;
        case MotionEvent.ACTION_MOVE:
            actionMove(event);
            break;
        case MotionEvent.ACTION_UP:
            actionUp(event);
            break;
        }
        return true;
    }

    private void actionUp(MotionEvent event) {
        if (this.circleOffset != maxOffset) {
            this.circleOffset = 0;
        }
        postInvalidate();
    }

    private void actionMove(MotionEvent event) {
        int tempOffset = (int) (event.getX() - this.prevX);
        this.maxOffset = width - redReginWidth;
        if (tempOffset >= maxOffset && this.circleOffset == maxOffset) {
            return;
        }
        this.circleOffset = tempOffset;
        if (this.circleOffset > maxOffset) {// 是否已經滑動到邊緣
            this.circleOffset = maxOffset;
            if (sliderEndListener != null) {
                sliderEndListener.onSliderEnd();
            }
        }
        if (this.circleOffset <= 0) {
            this.circleOffset = 0;
        }
        postInvalidate();
    }

    private void actionDown(MotionEvent e) {
        this.prevX = (int) e.getX();
    }
}

2.使用
布局main.xml

MainActivity.java

package net.mobctrl.callendview;

import net.mobctrl.callendview.CallSliderEndView.SliderEndListener;
import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;

/**
 * 
 * @author Zheng Haibo
 * @web http://www.mobctrl.net
 *
 */
public class MainActivity extends Activity {

    private CallSliderEndView callSliderEndView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        callSliderEndView = (CallSliderEndView) findViewById(R.id.csev_slider_view);
        callSliderEndView.setSliderEndListener(new SliderEndListener() {

            @Override
            public void onSliderEnd() {
                System.out.println(debug:onSliderEnd...);
                Toast.makeText(getApplicationContext(), Slider To End,
                        Toast.LENGTH_SHORT).show();
            }
        });
    }

}

3.屬性attr的配置(/res/value/attr.xml)

4.效果

用戶可以使用手指滑動

項目github地址：GitHub