美文网首页ProgramAndroid
自定义View(一) 仿IPhone 开关控件

自定义View(一) 仿IPhone 开关控件

作者: 程序员Android1 | 来源:发表于2017-10-10 21:35 被阅读23次

自定义ViewAndroid中常用的方法之一,本章实现类似于IPhone 开关控件,实现效果如下:

开启 关闭

本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以下内容:

1.自定义View,继承View类
2.引用自定义View布局
3.自定义View 素材
4.Activity 中使用自定义View 控件的方法

欢迎关注微信公众号:程序员Android
公众号ID:ProgramAndroid
获取更多信息

微信公众号:ProgramAndroid

我们不是牛逼的程序员,我们只是程序开发中的垫脚石。
我们不发送红包,我们只是红包的搬运工。

1.自定义View,继承View类

自定义View 实现主要继承View,并实现View的一些方法。

public class SwitchControlView extends View implements OnTouchListener {
    private Bitmap bg_on, bg_off, slipper_btn;
    private float downX, nowX;

    private boolean onSlip = false;

    private boolean nowStatus = false;

    private OnChangedListener listener;

    public SwitchControlView(Context context) {
        super(context);
        init();
    }

    public SwitchControlView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public void init() {
        bg_on = BitmapFactory.decodeResource(getResources(), R.drawable.on_btn);
        bg_off = BitmapFactory.decodeResource(getResources(),
                R.drawable.off_btn);
        slipper_btn = BitmapFactory.decodeResource(getResources(),
                R.drawable.white_btn);
        setOnTouchListener(this);
    }

    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Matrix matrix = new Matrix();
        Paint paint = new Paint();
        float x = 0;
        if (bg_on != null && bg_off != null) {
            if (nowX < (bg_on.getWidth() / 2)) {
                canvas.drawBitmap(bg_off, matrix, paint);
            } else {
                canvas.drawBitmap(bg_on, matrix, paint);
            }
        }

        if (onSlip) {
            if (nowX >= bg_on.getWidth())
                x = bg_on.getWidth() - slipper_btn.getWidth() / 2;
            else
                x = nowX - slipper_btn.getWidth() / 2;
        } else {
            if (nowStatus) {
                x = bg_on.getWidth() - slipper_btn.getWidth();
            } else {
                x = 0;
            }
        }

        if (x < 0) {
            x = 0;
        } else if (x > bg_on.getWidth() - slipper_btn.getWidth()) {
            x = bg_on.getWidth() - slipper_btn.getWidth();
        }

        canvas.drawBitmap(slipper_btn, x, 0, paint);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {
            if (event.getX() > bg_off.getWidth()
                    || event.getY() > bg_off.getHeight()) {
                return false;
            } else {
                onSlip = true;
                downX = event.getX();
                nowX = downX;
            }
            break;
        }
        case MotionEvent.ACTION_MOVE: {
            nowX = event.getX();
            break;
        }
        case MotionEvent.ACTION_UP: {
            onSlip = false;
            if (event.getX() >= (bg_on.getWidth() / 2)) {
                nowStatus = true;
                nowX = bg_on.getWidth() - slipper_btn.getWidth();
            } else {
                nowStatus = false;
                nowX = 0;
            }

            if (listener != null) {
                listener.OnChanged(SwitchControlView.this, nowStatus);
            }
            break;
        }
        }
        invalidate();
        return true;
    }

    public void setOnChangedListener(OnChangedListener listener) {
        this.listener = listener;
    }

    public void setChecked(boolean checked) {
        if (checked) {
            nowX = bg_off.getWidth();
        } else {
            nowX = 0;
        }
        nowStatus = checked;
    }

    public interface OnChangedListener {
        public void OnChanged(SwitchControlView wiperSwitch, boolean checkState);
    }

}

2.引用自定义View布局

引用自定义View跟普通View 一样,在XML 中直接导入自定义View类的布局即可,实现如下:

使用自定义View布局方法

3.自定义View 素材

关闭背景图
开启背景图
白色原点图片

4.Activity 中使用自定义View 控件的方法

自定义View 控件跟其他系统控件(Button)使用方法类似,具体使用方法如下:

Activity 中使用自定义View 控件的方法

至此,本篇已结束,如有不对的地方,欢迎您的建议与指正。期待您的关注,
感谢您的阅读,谢谢!

​欢迎关注微信公众号:程序员Android
公众号ID:ProgramAndroid
获取更多信息

微信公众号:ProgramAndroid

我们不是牛逼的程序员,我们只是程序开发中的垫脚石。
我们不发送红包,我们只是红包的搬运工。

点击阅读原文,获取更多福利


推荐阅读:

1.自定义View(一) 仿IPhone 开关控件
2.自定义View(二) 自定义itemClickView
3.自定义View(三) 自定义itemCheckView
4. 自定义View(四) 自定义ItemToggleView
5.自定义样式View(一)--自定义CheckBox样式
6. 自定义样式View(二)--自定义Button
7. 自定义样式View(三)--自定义EditText

相关文章

  • 自定义View(一) 仿IPhone 开关控件

    自定义View 是Android中常用的方法之一,本章实现类似于IPhone 开关控件,实现效果如下: 本篇文章主...

  • 自定义视频选帧控件

    自定义View仿抖音视频加载BufferLineView 自定义视频选帧控件 自定义View 视频截取控件 项目中...

  • 自定义View仿抖音视频加载BufferLineView

    自定义View仿抖音视频加载BufferLineView 自定义视频选帧控件 自定义View 视频截取控件 自定义动画线

  • 自定义View 视频截取控件

    自定义View仿抖音视频加载BufferLineView 自定义视频选帧控件 自定义View 视频截取控件 抖音最...

  • 自定义开关

    阅读原文 自定义开关 自定义一个类继承View 实例化控件 重写onMeasure()测量方法 绘制 开关的点击事...

  • 自定义View(三),仿小米运动计步

    前面主要说了自定义View的一些知识,这篇文章主要是利用自定义View做一个仿小米运动计步功能的控件,如下图所示:...

  • 自定义View记录

    自定义View只要有三种类型:自绘控件、组合控件、继承控件。 自绘控件 自定义View主要是因为系统的内置View...

  • 自定义View仿iOS的UiSwitch控件

    自定义View仿iOS的UiSwitch控件 本文原创,转载请注明出处。欢迎关注我的 简书。 前言: Androi...

  • m3

    Check View(检查控件)--CheckBox(复选框),Switch(开关控件),ToggleButton...

  • 自定义控件基础总结

    前言 自定义控件按照使用方式不同可分为自定义View和自定义ViewGroup,自定义View一般用在没有子控件的...

网友评论

    本文标题:自定义View(一) 仿IPhone 开关控件

    本文链接:https://www.haomeiwen.com/subject/bnamyxtx.html