自定義可點選和滑動的按鈕

阿新 • • 發佈：2019-01-17

一. 在最近的專案中需要實現一個這樣的自定義View,有點類似一個開關選擇按鈕，可以點選、可以滑動。在按鈕下方是一個ViewPager，根據按鈕的切換，同時切換ViewPager的介面。同時滑動ViewPager,也會切換到按鈕不同的登入方式。把實現步驟記錄一下，方便以後擴充套件和複用，同時加深一下對自定義View的理解。

總結：主要解決的問題是 1. 自定義View的步驟， 2. 點選和滑動的衝突 2. 自定義控制元件和ViewPager的聯動切換。
問題：想實現點選的時候滑塊也可以向滑動按鈕一樣平滑的滑動到另一邊，並且讓下面的ViewPager也勻速滑動，有什麼好的方法處理

這裡寫圖片描述

二. 看下面的幾個gif圖的演示效果。

滑動上面的控制元件，讓ViewPager中的Fragment進行切換。
滑動控制元件下方的ViewPager讓按鈕的滑塊進行同向移動（gif檔案過大，無法上傳）
點選控制元件，切換不同的按鈕背景

三. 實現上面三個效果的步驟：
1. 新建一個SwitchButton類繼承自View, 實現View的構造方法，測量，繪製的方法，並在xml中引用該控制元件。
構造方法：

public SwitchButton(Context context, @Nullable AttributeSet attrs) {
        super 
(context, attrs);
        initView();
    }

initView方法初始化需要繪製的Bitmap和畫筆、以及繪製的一些位置引數
login_select_liner_bg是整個控制元件的大的背景圖片
這裡寫圖片描述
要滑動的選擇器login_selected_text_bg

通過BitmapFactory.decodeResource把drawable資料夾下的png圖片轉換成Bitmap影象。

backgroundBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.login 
_select_liner_bg);

slidingBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.login_selected_text_bg);

初始化繪製的時候是：slidingBitmap 在 backgroundBitmap的靠左居中，讓slidingBitmap 距離top為slidingMarginTop 。

slidingMarginTop = (backgroundBitmap.getHeight() - slidingBitmap.getHeight()) /2;

上面Bitmap的繪製需要畫筆，初始化一個畫筆

mBitMapPaint = new Paint();
mBitMapPaint.setAntiAlias(true);

控制元件上的文字也是繪製上去的，同樣需要畫筆，黃色文字和白色文字的畫筆設定。

        mDefaultTextPaint = new Paint();
        mDefaultTextPaint.setAntiAlias(true);
        mDefaultTextPaint.setTextSize(32);
        mDefaultTextPaint.setStyle(Paint.Style.FILL);
        mDefaultTextPaint.setTextAlign(Paint.Align.LEFT);
        mDefaultTextPaint.setColor(Color.WHITE);

        mSelectTextPaint = new Paint();
        mSelectTextPaint.setAntiAlias(true);
        mSelectTextPaint.setTextSize(32);
        mSelectTextPaint.setStyle(Paint.Style.FILL);
        mSelectTextPaint.setTextAlign(Paint.Align.LEFT);
        mSelectTextPaint.setColor(getResources().getColor(R.color.orange));

初始化引數之後，開始進行測量：這是一個view, 設定自定義View的寬高為backgroundBitmap的寬高

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

開始繪製：
slidingMarginLeft 表示滑動選擇塊離這個自定義view的左邊偏移距離
passwordLoginStr =“密碼登入”
smsLoginStr = “簡訊登入”

canvas.drawBitmap(backgroundBitmap,0 ,0, mBitMapPaint);
canvas.drawBitmap(slidingBitmap,slidingMarginLeft,slidingMarginTop, mBitMapPaint);

if (isSelectLeft) {
            canvas.drawText(passwordLoginStr, textLeftMargin, textVerticalLocation, mSelectTextPaint);
            canvas.drawText(smsLoginStr, slidMarginLeftMax + textLeftMargin, textVerticalLocation, mDefaultTextPaint);
        } else {
            canvas.drawText(passwordLoginStr, textLeftMargin, textVerticalLocation, mDefaultTextPaint);
            canvas.drawText(smsLoginStr, slidMarginLeftMax + textLeftMargin, textVerticalLocation, mSelectTextPaint);
        }

新增點選事件：繪製出了view只後，只是如第一張圖片一樣是一個靜態的效果，需要新增點選事件。
讓View繼承自View.OnClickListener 實現onClick方法：
預設當滑到左邊的時候slidingBitmap 距離左邊為5個畫素（把畫素裝換成dp會有更好的適配效果），滑到右邊的時候距離左邊最大的距離slidMarginLeftMax = backgroundBitmap.getWidth() - slidingBitmap.getWidth() - 5(把畫素裝換成dp會有更好的適配)

isSelectLeft 表示是否點選選中左邊的密碼登入，預設為true，每點選一次進行切換，上面的文字繪製需要根據這個值進行判斷。

//實現控制元件的點選事件
    @Override
    public void onClick(View v) {
            isSelectLeft = !isSelectLeft;
            if (isSelectLeft) {
                slidingMarginLeft = 5;
            } else {
                slidingMarginLeft = slidMarginLeftMax;
            }
            //isChangeComplete = true;
            invalidate();
    }

在 initView 中加上setOnClickListener(this);
這樣就能相應點選事件了。

除了點選效果外，還需要新增滑動處理：實現onTouchEvent方法

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //計算按下的座標
                isStartX = startX = event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                float endX = event.getX();
                float distanceX = endX - startX;
                slidingMarginLeft += distanceX;
                //防止將滑塊滑出介面，遮蔽非法值
                if(slidingMarginLeft > slidMarginLeftMax){
                    slidingMarginLeft = slidMarginLeftMax;
                }else if(slidingMarginLeft < 5){
                    slidingMarginLeft = 5;
                }
                invalidate();
                //資料還原
                startX = event.getX();
                break;
            case MotionEvent.ACTION_UP:
                    if (slidingMarginLeft > slidMarginLeftMax / 2) {
                        slidingMarginLeft = slidMarginLeftMax;
                        isSelectLeft = false;
                    } else {
                        slidingMarginLeft = 5;
                        isSelectLeft = true;
                    }
                    invalidate();
                break;
        }
        return true;
    }

在添加了點選和觸控滑動效果之後會出現衝突效果，解決衝突的辦法是，宣告一個boolean值的變數isEnableClick，如果boolean 為true表示點選事件生效，當活動觸控是，將其設定為false, 表示點選事件不生效。
修改之後的點選事件onClick方法:

@Override
    public void onClick(View v) {
        if(isEnableClick) {
            isSelectLeft = !isSelectLeft;
            if (isSelectLeft) {
                slidingMarginLeft = 5;
            } else {
                slidingMarginLeft = slidMarginLeftMax;
            }
            //isChangeComplete = true;
            invalidate();
        }
    }

觸控事件 onTouchEvent也做相應的修改。

@Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //計算按下的座標
                isStartX = startX = event.getX();
                isEnableClick = true;
                break;
            case MotionEvent.ACTION_MOVE:
                float endX = event.getX();
                float distanceX = endX - startX;
                slidingMarginLeft += distanceX;
                //遮蔽非法值
                if(slidingMarginLeft > slidMarginLeftMax){
                    slidingMarginLeft = slidMarginLeftMax;
                }else if(slidingMarginLeft < 5){
                    slidingMarginLeft = 5;
                }
                //isChangeComplete = false;
                invalidate();
                //資料還原
                startX = event.getX();

                if(Math.abs(endX - isStartX) > 5){
                    //已經滑動了 就不再執行點選事件
                    isEnableClick = false;
                }
                break;
            case MotionEvent.ACTION_UP:
                if(!isEnableClick) {
                    if (slidingMarginLeft > slidMarginLeftMax / 2) {
                        slidingMarginLeft = slidMarginLeftMax;
                        isSelectLeft = false;
                    } else {
                        slidingMarginLeft = 5;
                        isSelectLeft = true;
                    }
                    invalidate();
                }
                break;
        }
        return true;
    }

實現與ViewPager的聯動方式一：點選按鈕切換ViewPager
在View中第一個點選監聽的interface

 public   interface   ChangeSelectListener{
       void changeSelect(boolean isSelectLeft);
    }

    public void setChangeSelectListener(ChangeSelectListener changeSelectListener){
        mChangeSelectListener = changeSelectListener;
    }

在onClick方法中加上回調方法

if(mChangeSelectListener != null && isEnableClick) {
                mChangeSelectListener.changeSelect(isSelectLeft);
            }

XXActivity的xml中定義如下

 <LinearLayout
        android:id="@+id/login_model_switch_liner"
        android:layout_width="wrap_content"
        android:orientation="horizontal"
        android:layout_height="0dp"
        android:layout_weight="1.5"
        android:gravity="center_vertical">

        <kap.com.smarthome.android.ui.view.SwitchButton
            android:id="@+id/switchButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="@dimen/margin_20"
            />

    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/login_view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="15dp"
        android:layout_weight="9.5">
    </android.support.v4.view.ViewPager>

在 XXActivity中ViewPager的處理程式碼：

 //設定ViewPager的介面卡， 設定展示的fragment
        mMethodViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }

            @Override
            public int getCount() {
                return fragments.size();
            }
        });

        //給ViewPager新增切換的監聽器
        mMethodViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//滑動ViewPager的時候讓mSwitchButton的滑塊跟著按照比例跟著滑動，                      //setSlidingMarginLeft的方法下面給出
          mSwitchButton.setSlidingMarginLeft(positionOffset);
            }
            @Override
            public void onPageSelected(int position) {
                //當滑動結束之後，設定是滑動到左邊還是右半邊 
                //SwitchButton中的setSelectLeft方法後面給出
                if(position == 0){
                    mSwitchButton.setSelectLeft(true);
                }else{
                    mSwitchButton.setSelectLeft(false);
                }
            }
            @Override
            public void onPageScrollStateChanged(int state) {}
        });


        mListener = new SwitchButton.ChangeSelectListener() {
            @Override
            public void changeSelect(boolean isSelectLeft) {
                if(isSelectLeft){
                    mMethodViewPager.setCurrentItem(0);
                }else{
                    mMethodViewPager.setCurrentItem(1);
                }
            }
        };

        mSwitchButton.setChangeSelectListener(mListener);

SwitchButton類中的setSlidingMarginLeft方法傳入的scalex是viewpager的滑動比例，根據這個值可以計算出當前slidingMarginLeft 的值

public void setSlidingMarginLeft(float scaleX){
        if(scaleX != 0) {
            slidingMarginLeft = (int) (slidMarginLeftMax * scaleX);
            invalidate();
        }
    }

SwitchButton類中的setSelectLeft方法，表示ViewPager滑動結束，slidingMarginLeft 重新設定最終值

public void setSelectLeft(boolean selectLeft) {
        isSelectLeft = selectLeft;
        if (isSelectLeft) {
            slidingMarginLeft = 5;
        } else {
            slidingMarginLeft = slidMarginLeftMax;
        }
        invalidate();
    }

下面給出SwitchButton類的完整程式碼， ViewPager的程式碼在上面第8部分已經基本給出。

/**
 * Created by Administrator on 2017/9/22 0022.
 *
 * 建立自定義View用於登入介面中密碼登入和簡訊登入的切換
 *
 * 1.構造方法，例項化類
 * 2.開始測量 measure(int , int) -> onMeasure();
 * 如果當前view是一個ViewGroup,還有義務測量自己的孩子，孩子有建議權
 * 3. 指定位置-layout（）--> onlayout();
 * 指定控制元件的位置，一般view不用寫這個方法，ViewGroup的時候才需要，一般View不需要重寫該方法
 * 4. 繪製檢視 -- draw() --> onDraw(Canvas)
 * 根據上面兩個方法的引數，進行繪製
 */

public class SwitchButton extends View implements View.OnClickListener{

    private Bitmap backgroundBitmap;
    private Bitmap slidingBitmap;

    private int slidMarginLeftMax;
    private Paint mBitMapPaint;
    private Paint mDefaultTextPaint;
    private Paint mSelectTextPaint;

    private int slidingMarginTop;
    private int slidingMarginLeft = 5;
    private int textVerticalLocation;
    private int textLeftMargin = 20;

    //是否選擇左邊
    private boolean isSelectLeft = true;

    //預設點選事件生效 ，滑動事件不生效
    private boolean isEnableClick = true;

    //橫向滑動的X軸起點座標
    private float startX;
    private float isStartX;

    private String passwordLoginStr;
    private String smsLoginStr;


    private ChangeSelectListener  mChangeSelectListener;

    //判斷與之監聽的 ViewPager 是否滑動結束 , 只有當滑動結束的時候文字才變化。
    /*private boolean isChangeComplete = false ;
    private boolean isFirstDraw = true;*/

    public SwitchButton(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    private void initView(){
        backgroundBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.login_select_liner_bg);
        slidingBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.login_selected_text_bg);

        passwordLoginStr = getResources().getString(R.string.password_login);
        smsLoginStr = getResources().getString(R.string.sms_login);

        slidMarginLeftMax = backgroundBitmap.getWidth() - slidingBitmap.getWidth() - 5;
        slidingMarginTop = (backgroundBitmap.getHeight() - slidingBitmap.getHeight()) /2 - 2;
        textVerticalLocation = backgroundBitmap.getHeight()/2+5;

        mBitMapPaint = new Paint();
        mBitMapPaint.setAntiAlias(true);

        mDefaultTextPaint = new Paint();
        mDefaultTextPaint.setAntiAlias(true);
        mDefaultTextPaint.setTextSize(32);
        mDefaultTextPaint.setStyle(Paint.Style.FILL);
        mDefaultTextPaint.setTextAlign(Paint.Align.LEFT);
        mDefaultTextPaint.setColor(Color.WHITE);

        mSelectTextPaint = new Paint();
        mSelectTextPaint.setAntiAlias(true);
        mSelectTextPaint.setTextSize(32);
        mSelectTextPaint.setStyle(Paint.Style.FILL);
        mSelectTextPaint.setTextAlign(Paint.Align.LEFT);
        mSelectTextPaint.setColor(getResources().getColor(R.color.orange));

        setOnClickListener(this);
    }

    /**
     * 測量這個view的大小
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(backgroundBitmap.getWidth(), backgroundBitmap.getHeight());
    }

    /**
     * 進行繪製
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(backgroundBitmap,0 ,0, mBitMapPaint);
        canvas.drawBitmap(slidingBitmap,slidingMarginLeft,slidingMarginTop, mBitMapPaint);

        drawText(canvas);
    }

    /**
     * 繪製文字
     * @param canvas
     */
    private void drawText(Canvas canvas) {
        if (isSelectLeft) {
            canvas.drawText(passwordLoginStr, textLeftMargin, textVerticalLocation, mSelectTextPaint);
            canvas.drawText(smsLoginStr, slidMarginLeftMax + textLeftMargin, textVerticalLocation, mDefaultTextPaint);
        } else {
            canvas.drawText(passwordLoginStr, textLeftMargin, textVerticalLocation, mDefaultTextPaint);
            canvas.drawText(smsLoginStr, slidMarginLeftMax + textLeftMargin, textVerticalLocation, mSelectTextPaint);
        }
    }


    //實現控制元件的點選事件
    @Override
    public void onClick(View v) {
        if(isEnableClick) {
            isSelectLeft = !isSelectLeft;
            if (isSelectLeft) {
                slidingMarginLeft = 5;
            } else {
                slidingMarginLeft = slidMarginLeftMax;
            }

            if(mChangeSelectListener != null && isEnableClick) {
                mChangeSelectListener.changeSelect(isSelectLeft);
            }

            invalidate();
        }
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //計算按下的座標
                isStartX = startX = event.getX();
                isEnableClick = true;
                break;
            case MotionEvent.ACTION_MOVE:
                float endX = event.getX();
                float distanceX = endX - startX;
                slidingMarginLeft += distanceX;
                //遮蔽非法值
                if(slidingMarginLeft > slidMarginLeftMax){
                    slidingMarginLeft = slidMarginLeftMax;
                }else if(slidingMarginLeft < 5){
                    slidingMarginLeft = 5;
                }
                //isChangeComplete = false;
                invalidate();
                //資料還原
                startX = event.getX();

                if(Math.abs(endX - isStartX) > 5){
                    //已經滑動了 就不再執行點選事件
                    isEnableClick = false;
                }
                break;
            case MotionEvent.ACTION_UP:
                if(!isEnableClick) {
                    if (slidingMarginLeft > slidMarginLeftMax / 2) {
                        slidingMarginLeft = slidMarginLeftMax;
                        isSelectLeft = false;
                    } else {
                        slidingMarginLeft = 5;
                        isSelectLeft = true;
                    }
                    invalidate();
                }
                break;
        }
        return true;
    }



    public boolean isSelectLeft() {
        return isSelectLeft;
    }

    public void setSelectLeft(boolean selectLeft) {
        isSelectLeft = selectLeft;
        if (isSelectLeft) {
            slidingMarginLeft = 5;
        } else {
            slidingMarginLeft = slidMarginLeftMax;
        }
        invalidate();
    }


    public void setSlidingMarginLeft(float scaleX){
        if(scaleX != 0) {
            slidingMarginLeft = (int) (slidMarginLeftMax * scaleX);
            invalidate();
        }
    }

    public   interface   ChangeSelectListener{
       void changeSelect(boolean isSelectLeft);
    }

    public void setChangeSelectListener(ChangeSelectListener changeSelectListener){
        mChangeSelectListener = changeSelectListener;
    }
}

自定義可點選和滑動的按鈕

自定義可點選和滑動的按鈕

Android星星評分控制元件SimpleRatingBar的使用（可點選和滑動星星）

Android 自定義帶點選效果的圓角按鈕

cocos2dx 3.0 lua 關於listview和item點選和滑動的觸控吞噬問題

自定義Material點選效果的View

Android RecyclerView自帶原生點選和長按事件

自定義元件點選空白處隱藏

高德地圖自定義Marker點選時出現的InfoWindow

自定義Dialog點選彈框外的區域無法關閉問題

一個自定義dialog提供確定和取消按鈕的回撥介面

自定義PopupWindow,點選彈出PopupWindow,背景變暗,仿點選彈出分享

android自定義可拖動的懸浮按鈕

關於百度地圖InfoWindow響應自定義佈局點選事件

Android自定義可拖拽的懸浮按鈕---DragFloatingActionButton

介面的使用—自定義view點選事件的介面回撥

Qt-Qlabel 自定義滑鼠點選事件以及文字樣式效果設計

ListView中自定義Item點選事件處理

在螢幕上新增一個可移動，可點選的懸浮按鈕。

ios 星星評分（支援點選和滑動）

Android 通過ViewPager實現點選和滑動切換Fragment標籤頁

自定義可點選和滑動的按鈕

相關推薦