自定义控件ToggleButton滑动开关

---恢复内容开始---

滑动开关--------
自定义控件步骤：
测量：onMeasure 设置自己显示在屏幕上的宽高
布局：onLayout 设置自己显示在屏幕上的位置(只有在自定义ViewGroup中才用到)
绘制：onDraw 控制显示在屏幕上的样子(自定义viewgroup时不需要这个)

View和ViewGroup的区别
1.他们都需要进行测量操作
2.ViewGroup主要是控制子view如何摆放，所以必须实现onLayout
View没有子view，所以不需要onLayout方法，但是必须实现onDraw

 

 

然后要想你设计这个控件能够有哪些功能？

1.设置滑动开关的背景图片，

2.设置滑动开关的滑块图片，

3.设置滑动开关的状态，

然后有了这些功能需求就可以进行代码的编写，

这次我们要自定义一个view，所以要继承view，实现它的构造方法，然后要实现设置图片的两个方法，和设置开关状态的方法，这里开关状态用了枚举类型。

因为绘制的时候只能绘制bitmap类型，所以要进行转化

    /**
     * 选择框的背景
     * 
     * @param icLauncher
     */
    public void setSwitchBackgroundResource(int icLauncher) {
        switchBg = BitmapFactory.decodeResource(getResources(), icLauncher);

    }

    /**
     * 滑动按钮背景
     * 
     * @param icLauncher
     */
    public void setSlideBackgroundResouce(int icLauncher) {
        slideBg = BitmapFactory.decodeResource(getResources(), icLauncher);
    }

    /**
     * 设置开关的初始状态
     * 
     * @param state
     */
    public void setSlideStare(ToggleState state) {
        togglestate = state;
    }

然后要重写测量方法，就是背景图片的宽高

/**
     * 设置当前控件显示在屏幕上的宽高
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(switchBg.getWidth(), switchBg.getHeight());
    }

测量之后要进行绘制

首先绘制分为两种，

一种是滑动中绘制，

还有一种是不滑动根据设置的状态进行绘制

滑动中绘制：这个主要就是通过Touch事件来改变滑块距离左侧的值来进行绘制

@Override
    public boolean onTouchEvent(MotionEvent event) {
        //改变的值
　　　　　currentX = (int) event.getX();
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            break;
        // 松开的时候看当前X的值在哪里
        case MotionEvent.ACTION_UP:
          break;
        case MotionEvent.ACTION_MOVE:

            break;
        }
        // 由它来调用ondraw方法
        invalidate();
        return true;
    }

绘制方法

    /*
             * 设置在正中间
             */
            int left = currentX - slideBg.getWidth() / 2;
            if (left < 0) {
                left = 0;
            } else if (left >= (switchBg.getWidth() - slideBg.getWidth())) {
                left = switchBg.getWidth() - slideBg.getWidth();
            }

另外一种就是不滑动根据状态绘制。首先要规定出状态，状态布尔值默认是false，然后当down变成true，当up时候重新变成false

// 绘制滑块
            // 判断滑块的状态
            // 打开
            if (togglestate == ToggleState.Open) {
                canvas.drawBitmap(slideBg,
                        switchBg.getWidth() - slideBg.getWidth(), 0, null);
                // 关闭
            } else {
                canvas.drawBitmap(slideBg, 0, 0, null);
            }

完整代码

package com.example.tbtn.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class ToggleButton extends View {
    // 设置的状态
    private ToggleState togglestate = ToggleState.Open;
    // 选择背景
    private Bitmap switchBg;
    // 滑动按钮背景
    private Bitmap slideBg;
    // 点击的X值
    private int currentX = 0;
    // 是否滑动
    private boolean isSliding = false;

    // 枚举类型
    public enum ToggleState {
        Open, Close
    }

    /**
     * 布局文件引用调用
     * 
     * @param context
     * @param attrs
     */
    public ToggleButton(Context context, AttributeSet attrs) {
        super(context, attrs);

    }

    /**
     * 代码使用调用
     * 
     * @param context
     */
    public ToggleButton(Context context) {
        super(context);

    }

    /**
     * 选择框的背景
     * 
     * @param icLauncher
     */
    public void setSwitchBackgroundResource(int icLauncher) {
        switchBg = BitmapFactory.decodeResource(getResources(), icLauncher);

    }

    /**
     * 滑动按钮背景
     * 
     * @param icLauncher
     */
    public void setSlideBackgroundResouce(int icLauncher) {
        slideBg = BitmapFactory.decodeResource(getResources(), icLauncher);
    }

    /**
     * 设置开关的初始状态
     * 
     * @param state
     */
    public void setSlideStare(ToggleState state) {
        togglestate = state;
    }

    /**
     * 设置当前控件显示在屏幕上的宽高
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(switchBg.getWidth(), switchBg.getHeight());
    }

    /**
     * 绘制
     */
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        // left 距图片左侧 top 距图片上部
        canvas.drawBitmap(switchBg, 0, 0, null);

        if (isSliding) {
            /*
             * 设置按在正中间
             */
            int left = currentX - slideBg.getWidth() / 2;
            if (left < 0) {
                left = 0;
            } else if (left >= (switchBg.getWidth() - slideBg.getWidth())) {
                left = switchBg.getWidth() - slideBg.getWidth();
            }
            canvas.drawBitmap(slideBg, left, 0, null);
        } else {
            // 绘制滑块
            // 判断滑块的状态
            // 打开
            if (togglestate == ToggleState.Open) {
                canvas.drawBitmap(slideBg,
                        switchBg.getWidth() - slideBg.getWidth(), 0, null);
                // 关闭
            } else {
                canvas.drawBitmap(slideBg, 0, 0, null);
            }
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        currentX = (int) event.getX();
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            isSliding = true;
            break;
        // 松开的时候看当前X的值在哪里
        case MotionEvent.ACTION_UP:
            isSliding = false;
            // 图片中心点
            int centerX = switchBg.getWidth() / 2;
            // 打开
            if (currentX > centerX) {
                // 判断当前状态是否真的改变（就是滑动一半回去了）
                if (togglestate != ToggleState.Open) {
                    togglestate = ToggleState.Open;
                    // 设置回调借口
                    if (lisern != null) {
                        lisern.onToggleChange(togglestate);
                    }
                }
                // 关闭
            } else {
                if (togglestate != ToggleState.Close) {
                    togglestate = ToggleState.Close;
                    // 设置回调借口
                    if (lisern != null) {
                        lisern.onToggleChange(togglestate);
                    }
                }
            }

            break;
        case MotionEvent.ACTION_MOVE:

            break;
        }
        // 由它来调用ondraw方法
        invalidate();
        return true;
    }

    private OnToggleChangeLisern lisern;

    public void setOnToggleChangeLisern(OnToggleChangeLisern lisern) {
        this.lisern = lisern;
    }

    // 回调接口
    public interface OnToggleChangeLisern {
        void onToggleChange(ToggleState state);
    }

}

 Activity中使用

package com.example.tbtn;

import com.example.tbtn.view.ToggleButton;
import com.example.tbtn.view.ToggleButton.OnToggleChangeLisern;
import com.example.tbtn.view.ToggleButton.ToggleState;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;


public class MainActivity extends Activity {
    private ToggleButton tBtn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tBtn = (ToggleButton) findViewById(R.id.tbtn);
        tBtn.setSwitchBackgroundResource(R.drawable.togglebtn);
        tBtn.setSlideBackgroundResouce(R.drawable.ic_launcher);
        tBtn.setSlideStare(ToggleState.Open);
        tBtn.setOnToggleChangeLisern(new OnToggleChangeLisern() {
            
            @Override
            public void onToggleChange(ToggleState state) {
                if(state==ToggleState.Open){
                    Toast.makeText(MainActivity.this,"打开", 0).show();
                }else{
                    Toast.makeText(MainActivity.this,"关闭", 0).show();
                }
                
            }
        });
    }

}