使用自定义View做一个小开关

最新推荐文章于 2019-05-19 22:24:00 发布

bai1002

最新推荐文章于 2019-05-19 22:24:00 发布

阅读量382

点赞数 2

本文链接：https://blog.youkuaiyun.com/bai981002/article/details/78677496

版权

本文介绍如何在Android中自定义一个开关控件，包括创建自定义视图类、处理触摸事件、绘制背景及滑块等步骤，并展示了完整的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android自身带的控件不能满足需求, 需要根据自己的需求定义控件.

先自定义一个Kai类

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by BAIPEI on 2017/11/29.
 */

public class Kai extends View {
    private Bitmap mSwitchBackgroundBitmap;
    private Paint mPaint;
    private Bitmap mSlideSourceBitmap;
    private boolean mToogleState;
    private float mCurrentX;
    private boolean isTouchMove;
    private OnStateChangeListener mStateChangeListener;

    public Kai(Context context) {
        super(context);

    }


    public Kai(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        setSwitchBackground(0);
    }

    public Kai(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //创建一个画笔
        mPaint = new Paint();
    }
    /**
     * 添加背景
     *
     * @param switchBackground
     */
    public void setSwitchBackground(int switchBackground) {
        //把文件变为Bitmap
        mSwitchBackgroundBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.a1);
        mSlideSourceBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.a2);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //测量的方法
        setMeasuredDimension(mSwitchBackgroundBitmap.getWidth(), mSwitchBackgroundBitmap.getHeight());
    }
//super.onDraw(canvas);
    @Override
    protected void onDraw(Canvas canvas) {
        //绘制的方法
        canvas.drawBitmap(mSwitchBackgroundBitmap, 0, 0, mPaint);


        //判断是否是手指在滑动
        if (isTouchMove) {
            float newLeft = mCurrentX - mSlideSourceBitmap.getWidth() / 2;
//            canvas.drawBitmap(mSlideSourceBitmap, newLeft, 0, mPaint);

            int maxLeft = mSwitchBackgroundBitmap.getWidth()
                    - mSlideSourceBitmap.getWidth();

            // 限定滑块范围
            if (newLeft < 0) {
                newLeft = 0; // 左边范围
            } else if (newLeft > 100) {
                newLeft = 100; // 右边范围
            }

            canvas.drawBitmap(mSlideSourceBitmap, newLeft, 0, mPaint);


        } else {

            if (mToogleState) {
                canvas.drawBitmap(mSlideSourceBitmap, getWidth() - mSlideSourceBitmap.getWidth(), 0, mPaint);
            } else {
                canvas.drawBitmap(mSlideSourceBitmap, 0, 0, mPaint);
            }
        }
    }

    /**
     * 设置滑块响应触摸事件
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mCurrentX = event.getX();
                isTouchMove = true;

                break;
            case MotionEvent.ACTION_UP:
                mCurrentX = event.getX();

                isTouchMove = false;


                //根据抬起的位置设置开关值
                mToogleState = mCurrentX > mSwitchBackgroundBitmap.getWidth() / 2;

                //设置监听
                if (mStateChangeListener != null) {
                    mStateChangeListener.onStateChangeListener(mToogleState);
                }

                break;
            case MotionEvent.ACTION_MOVE:
                mCurrentX = event.getX();

                break;
            default:
                break;
        }

        Log.e("MyToggleView", "MyToggleView onTouchEvent()" + mCurrentX);

        invalidate();

        return true;
    }

    /**
     * 设置滑块
     *
     * @param slideSource
     */
    public void setSlideSource(int slideSource) {
        mSlideSourceBitmap = BitmapFactory.decodeResource(getResources(), slideSource);

    }
    /**
     * 设置开关状态
     *
     * @param toogleState
     */
    public void setToogleState(boolean toogleState) {
        mToogleState = toogleState;
    }


    public void setOnStateChangeListener(OnStateChangeListener onStateChangeListener) {
        this.mStateChangeListener = onStateChangeListener;

    }
    /**
     * 设置监听接口
     */
    public interface OnStateChangeListener {
        void onStateChangeListener(boolean toogleState);
    }
}

-------然后就是布局里面调用一下----------

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

    tools:context="bwie.com.zidingyiview.MainActivity">

    <bwie.com.zidingyiview.Kai
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_width="match_parent"
        android:layout_height="80dp" />

</RelativeLayout>

最后把需要用到的两张图片发上去,