Android自定义开关

来源：互联网发布：淘宝模板自己怎么设计编辑：程序博客网时间：2024/06/01 07:33

一、效果:

这里写图片描述

二、解析:

(1)自定义类继承View

/** * 自定义开关 * Created by Sean on 2017/1/30. */public class ToggleView extends View {    private Bitmap switchBackgroundBitmap; //背景图片    private Bitmap slideButtonBitmap;//滑块背景图    private Paint paint;    private boolean mSwitchState = false;//开关状态一开始为关    private float currentX;    private boolean isTouchMode;    public ToggleView(Context context) {        super(context);        init();    }    public ToggleView(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public ToggleView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    /**     * 初始化画笔     */    private void init() {        paint = new Paint();    }}

(2)自定义属性，拷贝包名的全路径到xml文件中

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="ToggleView">        <attr name="switch_background" format="reference"/>        <attr name="slide_button" format="reference"/>        <attr name="switch_state" format="boolean"/>    </declare-styleable></resources>

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:sean="http://schemas.android.com/apk/res/com.project.codingma.customedswitch"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity">    <com.project.codingma.customedswitch.ToggleView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/toggleView"        android:layout_centerInParent="true"        sean:switch_background="@drawable/switch_background"        sean:switch_state="false"        sean:slide_button="@drawable/slide_button"/></RelativeLayout>

(3)找到相关控件，初始化信息

public ToggleView(Context context, AttributeSet attrs) {        super(context, attrs);        init();        //获取配置的自定义属性        String namespace = "http://schemas.android.com/apk/res/com.project.codingma.customedswitch";        int switchBackgroundRescource = attrs.getAttributeResourceValue(namespace,"switch_background",-1);        int slideButtonResource = attrs.getAttributeResourceValue(namespace,"slide_button",-1);        mSwitchState = attrs.getAttributeBooleanValue(namespace,"switch_state",false);        setSwitchBackgroundResource(switchBackgroundRescource);        setSlideButtonResource(slideButtonResource);    }

/**     * 设置滑块图片     * @param slideButtonResource 滑块背景图     */    private void setSlideButtonResource(int slideButtonResource) {        slideButtonBitmap= BitmapFactory.decodeResource(getResources(),slideButtonResource);    }    /**     * 设置背景图     * @param switchBackgroundRescource 背景图资源     */    private void setSwitchBackgroundResource(int switchBackgroundRescource) {        switchBackgroundBitmap = BitmapFactory.decodeResource(getResources(),switchBackgroundRescource);    }

(4)测量自定义控件的大小

@Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        setMeasuredDimension(switchBackgroundBitmap.getWidth(),switchBackgroundBitmap.getHeight());    }

(5)绘制图像

@Override    protected void onDraw(Canvas canvas) {        //绘制背景        canvas.drawBitmap(switchBackgroundBitmap,0,0,paint);        //绘制滑块        if(isTouchMode){            // 根据当前用户触摸到的位置画滑块            // 让滑块向左移动自身一半大小的位置            float newLeft = currentX - slideButtonBitmap.getWidth() / 2.0f;            int maxLeft = switchBackgroundBitmap.getWidth() - slideButtonBitmap.getWidth();            // 限定滑块范围            if(newLeft < 0){                newLeft = 0; // 左边范围            }else if (newLeft > maxLeft) {                newLeft = maxLeft; // 右边范围            }            canvas.drawBitmap(slideButtonBitmap, newLeft, 0, paint);        }else {            // 根据开关状态boolean, 直接设置图片位置            if(mSwitchState){// 开                int newLeft = switchBackgroundBitmap.getWidth() - slideButtonBitmap.getWidth();                canvas.drawBitmap(slideButtonBitmap, newLeft, 0, paint);            }else {// 关                canvas.drawBitmap(slideButtonBitmap, 0, 0, paint);            }        }

(6)设置触摸事件

 @Override    public boolean onTouchEvent(MotionEvent event) {        switch (event.getAction()){            case MotionEvent.ACTION_DOWN:                isTouchMode=true;                currentX=event.getX();                break;            case MotionEvent.ACTION_MOVE:                currentX=event.getX();                break;            case MotionEvent.ACTION_UP:                isTouchMode=false;                currentX=event.getX();                float center = switchBackgroundBitmap.getWidth()/2.0f;                //当前的位置同中心位置比较，决定状态                boolean state = currentX>center;                mSwitchState = state;                break;            default:                break;        }        invalidate();        return true;

源码地址:https://github.com/codingma/CustomizedSwitch

0 0