自制控件1 开关按钮

最新推荐文章于 2024-07-10 17:04:51 发布

阿敏其人

最新推荐文章于 2024-07-10 17:04:51 发布

阅读量1.1k

点赞数

分类专栏： Android笔划文章标签：控件自制控件自定义控件

本文链接：https://blog.csdn.net/icoollike/article/details/50835774

版权

本文介绍了如何制作一个自定义的开关按钮，包括思路整理、图片准备、滑动监听、位置处理和回调接口的实现。通过继承View，利用onTouchEvent和onDraw方法，实现了开关按钮的滑动效果和状态控制。

摘要由CSDN通过智能技术生成

在自定义控件——初识自定义控件里面，我们已经大致介绍三种自定义控件，分别是
* 自制控件
* 组合控件
* 拓展控件

并且，我们已经对自制控件就继承自View和继承自ViewGroup进行了分析和最简单deme展示。

熟能生巧，接下的几篇文章，我们依然来进行自制控件。
在本篇里面，我们来进行自制简单的开关按钮。

有图有真相，先看一下最终的效果图。

效果.gif

马上开工。

一、思路整理

从上面的图片中，我们看出，这个自定义控件涉及到3张图片，1张是黑色背景，1张是白色背景，另外一张就是一个圆形球的图片。

思路：弄一个类继承自View，比如叫做DiyToggleView，利用onDraw()方法里面，控制着三张图片在对应的时刻显示对应的图片。

我们触摸球状图片的时候，这张图片会动起来，所以需要用到onTouchEvent，然后在这里面进行MotionEvent.ACTION_DOWN、MotionEvent.ACTION_MOVE和MotionEvent.ACTION_UP的判断

在DiyToggleView里面，弄一些方法和回调接口给控件的使用者使用。

大概思路已经整理好了，现在开工。

二、准备三张图片，然后在在继承自View的自定义控件里面做出一个最简单的开关的样子

.
.

1、准备3张图片

球.png

关闭背景.png

打开背景.png

2、画上简单的开关样子

这个开关我们继承自View，然后复写三个构造方法。

其实说到底，我们这个开关的自定义流程就是弄3个Bitmap，然后对点击和滑动进行监听，根据滑动的位置控制Bitmap是否显示。

既然思路摆在这里，那么我们就先在onDraw画上一个开关的样子。

DiyToggleView

public class DiyToggleView extends View {
   
    private Bitmap toggleBall;
    private Bitmap toggleOnBg;
    private Bitmap toggleOffBg;
    public DiyToggleView(Context context) {
        super(context);
    }
    public DiyToggleView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public DiyToggleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    /**
     * 设置开关的滑动的球
     * @param resId
     */
    public void setToggleBallBitmap(int resId) {
        toggleBall = BitmapFactory.decodeResource(getResources(), resId);
    }
    /**
     * 设置开关的打开状态的背景
     * @param resId
     */
    public void setToggleOnBgBitmap(int resId){
        toggleOnBg = BitmapFactory.decodeResource(getResources(),resId);
    }
    /**
     * 设置开关关闭状态的背景
     * @param resId
     */
    public void setToggleOffBgBitmap(int resId){
        toggleOffBg = BitmapFactory.decodeResource(getResources(),resId);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(toggleOnBg != null){
            canvas.drawBitmap(toggleOnBg, 0, 0, null);
        }
        if(toggleBall != null){
            canvas.drawBitmap(toggleBall,0,0,null);
        }

    }
    // 我们需要精确控制这个开关的大小，所以必须复写onMeasure方法
    // 在onMeasure里面精确控制大小用到的是  setMeasuredDimension 这个方法
    // 假设不复写控制的大小，那么这个自动自定义View即使宽高都为wrap_content也会占据全屏
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int measureWidth = toggleOnBg.getWidth();
        int measureHeight = toggleOnBg.getHeight();
        setMeasuredDimension(measureWidth,measureHeight);  // 控制View的大小的关键方法
    }

}

.
.
MainActivity

public class MainActivity extends Activity {
   
    private DiyToggleView mDtv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mDtv = (DiyToggleView) findViewById(R.id.mDtv);
        mDtv.setToggleBall