今天看了一个学习视频，自定义控件之开关，觉得自己在自定义控件这里很菜，于是呢就写一些笔记来记录一下，以后忘记了也可以来看看，不至于丢失，如果你也有需要的话也可以参考一下，大佬可以自动绕道。哈哈哈哈。。。。
看图，嘿嘿。。。
slide_button.png
switch_background.png
一、首先先写一个类继承View，并重写带有两个参数的构造函数
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
二、接下来就是初始化的工作，画笔，我们要绘制的图片等
private void initView() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
//背景图，开与关
mBitmapBg = BitmapFactory.decodeResource(getResources(),R.drawable.switch_background);
//滑动的开关 这两张图等下都会贴出，这样子大家理解的就会比较深刻
mBitmapSwitch = BitmapFactory.decodeResource(getResources(),R.drawable.slide_button);
slideLeftMax = mBitmapBg.getWidth() - mBitmapSwitch.getWidth();
setOnClickListener(this);
}
三、初始化完成之后就是进行测量工作
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(mBitmapBg.getWidth(),mBitmapBg.getHeight());
}
四、测量完成就是进行我们的最后一步工作了，就是在画布上进行绘制，绘制工作只要重写onDraw(Canvas canvas)方法就可以了
@Override
protected void onDraw(Canvas canvas) {
// super.onDraw(canvas);
canvas.drawBitmap(mBitmapBg,0,0,mPaint);
canvas.drawBitmap(mBitmapSwitch,slideLeft,0,mPaint);
}
ok,经过以上四个步骤就可以实现静态的界面，如图
Screenshot_1496575744.png
接下来就是要实现点击事件和触摸事件，首先先写触摸事件，只要重写onTouchEvent(MotionEvent event)方法就ok了，
@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//1、记下按下的X坐标
lastX = startX = event.getX();
isEnableClick= true;
break;
case MotionEvent.ACTION_MOVE:
//2 记下结束的X坐标
float endX = event.getX();
//3 计算偏移距离
float distance = endX - startX;
slideLeft+=distance;
// 4 屏蔽非法值
if(slideLeft<0){
slideLeft = 0;
}else if(slideLeft>slideLeftMax){
slideLeft = slideLeftMax;
}
//5 重绘
invalidate();
//6 数据还原
startX = event.getX();
if(Math.abs(endX - lastX) > 5){
//滑动
isEnableClick = false;
}
break;
case MotionEvent.ACTION_UP:
//当滑动距离大于5dp时候，就认为滑动了，然后屏蔽点击事件，设置为不可点击。
if(!isEnableClick){
if(slideLeft>slideLeftMax/2){
isOpen = true;
}else{
isOpen =false;
}
drawView();
}
break;
}
return true;
}
private void drawView() {
if(isOpen){
slideLeft = slideLeftMax;
}else{
slideLeft = 0;
}
invalidate();
}
触摸事件完成之后就来实现点击事件，只要继承View.OnClickListener这个接口就可以了,
@Override
public void onClick(View v) {
if(isEnableClick){
isOpen = !isOpen;
drawView();
}
}
完成以上功能之后就可以进行随意的点击和移动，哈哈哈
Screenshot_1496575748.png
说到这里这个功能就实现了，是不是很简单，当然对于我这个小白来讲还是要细细体会的。哈哈哈，接下来我给出完整的代码
/**
* author WuGuofei on 2017/6/4.
*/
public class CustomView extends View implements View.OnClickListener {
private Bitmap mBitmapBg;//背景图
private Bitmap mBitmapSwitch;//开关图
private Paint mPaint;
private int slideLeftMax;//距离左边的最大的距离
private boolean isOpen =false;//关的
private int slideLeft;//距离左边的距离
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
private void initView() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mBitmapBg = BitmapFactory.decodeResource(getResources(),R.drawable.switch_background);
mBitmapSwitch = BitmapFactory.decodeResource(getResources(),R.drawable.slide_button);
slideLeftMax = mBitmapBg.getWidth() - mBitmapSwitch.getWidth();
setOnClickListener(this);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(mBitmapBg.getWidth(),mBitmapBg.getHeight());
}
@Override
protected void onDraw(Canvas canvas) {
// super.onDraw(canvas);
canvas.drawBitmap(mBitmapBg,0,0,mPaint);
canvas.drawBitmap(mBitmapSwitch,slideLeft,0,mPaint);
}
@Override
public void onClick(View v) {
if(isEnableClick){
isOpen = !isOpen;
drawView();
}
}
private void drawView() {
if(isOpen){
slideLeft = slideLeftMax;
}else{
slideLeft = 0;
}
invalidate();
}
/**
* true:点击事件生效，滑动事件不生效
* false:点击事件不生效，滑动事件生效
*/
private boolean isEnableClick =true;
private float startX;
private float lastX;
@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//1、记下按下的X坐标
lastX = startX = event.getX();
isEnableClick= true;
break;
case MotionEvent.ACTION_MOVE:
//2 记下结束的X坐标
float endX = event.getX();
//3 计算偏移距离
float distance = endX - startX;
slideLeft+=distance;
// 4 屏蔽非法值
if(slideLeft<0){
slideLeft = 0;
}else if(slideLeft>slideLeftMax){
slideLeft = slideLeftMax;
}
//5 重绘
invalidate();
//6 数据还原
startX = event.getX();
//当滑动距离大于5dp时候，就认为滑动了，然后屏蔽点击事件，设置为不可点击。
if(Math.abs(endX - lastX) > 5){
//滑动
isEnableClick = false;
}
break;
case MotionEvent.ACTION_UP:
if(!isEnableClick){
if(slideLeft>slideLeftMax/2){
isOpen = true;
}else{
isOpen =false;
}
drawView();
}
break;
}
return true;
}
}
布局代码很简单，就是一个CustomView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.wgf.customswitch.MainActivity">
<com.wgf.customswitch.CustomView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
</RelativeLayout>
网友评论