自定義控件之開關(guān)

今天看了一個學(xué)習(xí)視頻，自定義控件之開關(guān)，覺得自己在自定義控件這里很菜，于是呢就寫一些筆記來記錄一下，以后忘記了也可以來看看，不至于丟失，如果你也有需要的話也可以參考一下，大佬可以自動繞道。哈哈哈哈。。。。
看圖，嘿嘿。。。

slide_button.png
switch_background.png

一、首先先寫一個類繼承View，并重寫帶有兩個參數(shù)的構(gòu)造函數(shù)

 public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

二、接下來就是初始化的工作，畫筆，我們要繪制的圖片等

private void initView() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        //背景圖，開與關(guān)
        mBitmapBg = BitmapFactory.decodeResource(getResources(),R.drawable.switch_background);
        //滑動的開關(guān) 這兩張圖等下都會貼出，這樣子大家理解的就會比較深刻 
        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,經(jīng)過以上四個步驟就可以實現(xiàn)靜態(tài)的界面，如圖

Screenshot_1496575744.png

接下來就是要實現(xiàn)點擊事件和觸摸事件，首先先寫觸摸事件，只要重寫onTouchEvent(MotionEvent event)方法就ok了，

@Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //1、記下按下的X坐標(biāo)
                lastX = startX = event.getX();

                isEnableClick= true;
                break;
            case MotionEvent.ACTION_MOVE:
                //2 記下結(jié)束的X坐標(biāo)
                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 數(shù)據(jù)還原
                startX = event.getX();

                if(Math.abs(endX - lastX) > 5){
                    //滑動
                    isEnableClick = false;
                }
                break;
            case MotionEvent.ACTION_UP:
             //當(dāng)滑動距離大于5dp時候，就認為滑動了，然后屏蔽點擊事件，設(shè)置為不可點擊。
                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();
    }

觸摸事件完成之后就來實現(xiàn)點擊事件，只要繼承View.OnClickListener這個接口就可以了,


    @Override
    public void onClick(View v) {
        if(isEnableClick){
            isOpen = !isOpen;
            drawView();
        }
    }

完成以上功能之后就可以進行隨意的點擊和移動，哈哈哈

Screenshot_1496575748.png

說到這里這個功能就實現(xiàn)了，是不是很簡單，當(dāng)然對于我這個小白來講還是要細細體會的。哈哈哈，接下來我給出完整的代碼

/**
 * author WuGuofei on 2017/6/4.
 */

public class CustomView extends View implements View.OnClickListener {
    private Bitmap mBitmapBg;//背景圖
    private Bitmap mBitmapSwitch;//開關(guān)圖
    private Paint mPaint;
    private int slideLeftMax;//距離左邊的最大的距離
    private boolean isOpen =false;//關(guān)的
    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坐標(biāo)
                lastX = startX = event.getX();

                isEnableClick= true;
                break;
            case MotionEvent.ACTION_MOVE:
                //2 記下結(jié)束的X坐標(biāo)
                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 數(shù)據(jù)還原
                startX = event.getX();
                //當(dāng)滑動距離大于5dp時候，就認為滑動了，然后屏蔽點擊事件，設(shè)置為不可點擊。
                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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容