Android自定义控件之旅（一）滑动开关

Android自定义控件之旅（一）滑动开关

我们的开关可以单击，可以滑动,效果如下图

我们写自定义控件时，一般分为下面几步：

1、自定义View属性。

2、在布局文件中指定自定义属性的取值，并在View的构造方法中获取自定义属性的取值。

3、重写onMeasure()方法。有时也可以不用重写。

4、重写onDraw()方法。

一、自定义View属性

1、在values下创建attrs.xml资源文件

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    <attr name="btnBackground" format="reference" />
    <attr name="btnSwitch" format="reference" />
    <attr name="switchState" format="boolean" />
    <declare-styleable name="CustomSwitchButton">
        <attr name="btnBackground" />
        <attr name="btnSwitch" />
        <attr name="switchState" />
    </declare-styleable>
    </resources>

format指定了该属性的取值类型，有string,color,demension,integer,enum,reference,float,boolean,fraction,flag;
declare-styleable 就是我们要自定义控件的属性,name取值必须是自定义控件的类名

二、在布局文件中指定自定义属性的取值，并在View的构造方法中获取自定义属性的取值

1、在布局文件中指定自定义属性的取值

在layout下创建main_activity.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:switchBtn="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.zhy.customswitchbutton.CustomSwitchButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        switchBtn:btnBackground="@mipmap/switch_background"
        switchBtn:btnSwitch="@mipmap/switch_button"
        switchBtn:switchState="true" />
</RelativeLayout>

其中xmlns:switchBtn=”http://schemas.android.com/apk/res-auto”指定命名空间
命名空间的格式为
Android Stutio中 xmlns:前缀=”http://schemas.android.com/apk/res/res-auto”
eclipse中 xmlns:前缀=”http://schemas.android.com/apk/res/app包名”
为自定义属性赋值

 switchBtn:btnBackground="@mipmap/switch_background"
 switchBtn:btnSwitch="@mipmap/switch_button"
 switchBtn:switchState="true" />

2、在View的构造方法中获取自定义属性的取值

public class CustomSwitchButton extends View {
    private Bitmap btnBackground;
    private Bitmap btnSwitch;
    private boolean switchState;

    /**
     * 画笔对象
     */
    private Paint paint;

    /**
     * 滑动的距离
     */
    private float offset;
    /**
     * 是否发生拖动
     */
    private boolean isDrag = false;


    /**
     * 代码中new出来的，执行此构造方法
     * @param context
     */
    public CustomSwitchButton(Context context) {
        this(context, null);
    }
    /**
     * xml中使用时，系统会调用此构造方法
     * @param context
     * @param attrs
     */
    public CustomSwitchButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

     /**
     * xml中使用时，系统会调用此构造方法
     * @param context
     * @param attrs
     */
    public CustomSwitchButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {

        paint = new Paint();
        paint.setAntiAlias(true);//设置坑锯齿

         /**
         * 获取各个属性的值 
         */
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CustomSwitchButton);
        btnBackground = BitmapFactory.decodeResource(getResources(),
                ta.getResourceId(R.styleable.CustomSwitchButton_btnBackground, 0));
        btnSwitch = BitmapFactory.decodeResource(getResources(),
                ta.getResourceId(R.styleable.CustomSwitchButton_btnSwitch, 0));
        switchState = ta.getBoolean(R.styleable.CustomSwitchButton_switchState, false);
    }
    }

三、重写onMeasure()方法,有时也可以不用重写

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(btnBackground.getWidth(), btnBackground.getHeight());
    }

我们的开关很简单，宽高值就是背景图片的大小

四、重写onDraw()方法

    @Override
    protected void onDraw(Canvas canvas) {
        /**
         * 绘制背景
         *Bitmap bitmap 要绘制的图像
         *float left 左边距
         *float top  上边距
         *Paint paint 画笔对象
         */
        canvas.drawBitmap(btnBackground, 0, 0, paint);
        /**
         * 绘制开关
         */
        canvas.drawBitmap(btnSwitch, offset, 0, paint);
    }

其中 offset 指的是距离左边的偏移距离，是动态变化的

单击事件，

    @Override
    public void onClick(View v) {
        //拖动时，防止和onTouch冲突
        if (!isDrag) {
            switchState = !switchState;
            changeState();
        }

    }

    private void changeState() {
        offset = switchState ? btnBackground.getWidth() - btnSwitch.getWidth() : 0;
        //重绘制界面
        invalidate();
    }

拖动事件

/**
     * down 事件时的X坐标
     */
    private float firstX;
    /**
     * up 事件时上次的X坐标
     */
    private float lastX;

    /**
     * 重写onTouchEvent实现滑动效果
     *
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        float curX = event.getX();
        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:
                isDrag = false;
                firstX = lastX = curX;
                break;
            case MotionEvent.ACTION_MOVE:
                //判定是否进行了滑动
                if (Math.abs(lastX - firstX) > 5) {
                    isDrag = true;
                }
                float dis = curX - lastX;
                offset += dis;
                lastX = curX;
                break;
            case MotionEvent.ACTION_UP:
                //未滑完时，判定最终的开关状态
                if (isDrag) {
                    //能滑动的最大距离
                    float maxDis = btnBackground.getWidth() - btnSwitch.getWidth();
                    switchState = offset > maxDis / 2 ? true : false;
                    changeState();
                }
                break;
        }

        refreshView();
        return true;
    }

    /**
     * 刷新界面
     */
    private void refreshView() {
        //判断是否已经超出边界
        float maxDis = btnBackground.getWidth() - btnSwitch.getWidth();
        offset = offset < 0 ? 0 : offset;
        offset = offset > maxDis ? maxDis : offset;
        invalidate();
    }

下载源码