自定义开关按钮

1.定义一个类ToggleButton,继承View 

2.在布局文件中使用该自定义view  

3.创建与父类相同的构造器。 

4.重写onMesuer和onDraw方法

5.在自定义ToggleButton中定义设置开关按钮图片方法,设置开关按钮背景方法 

6.在MainActivity类中使用该view,给该自定义view设置背景图片和按钮图片

具体实现代码如下: 

自定义ToggleButton

package cn.ning.test.toggledemo.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * ==================================================================
 * 

* 项 目 名 称: ToggleDemo *

* 包 名: cn.ning.test.toggledemo.view *

* 文 件 名: ToggleButton *

* 版 权: *

* 作 者 :宁显宏 *

* 版 本 :1.0 *

* 创 建 日 期 : 2015/9/19 14:13. *

* 描 述 :完成一个自定义的开关按钮 *

*

* 修 订 历 史: *

* ================================================================== */ public class ToggleButton extends View { private Bitmap mSlideBackgroundResource; private ToggleState toggleState = ToggleState.Open;//开关状态 private Bitmap mSwitchBackground; private int currentX;//当前触摸点坐标 private boolean isSliding = false; private int centerx; /** * 动态创建view时使用 * * @param context */ public ToggleButton(Context context) { super(context); } /** * 如果view只是在布局文件中使用,只需要重写该构造方法 * * @param context * @param attrs */ public ToggleButton(Context context, AttributeSet attrs) { super(context, attrs); } public ToggleButton(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } /** * 设置滑动块的背景图片 * * @param slideBackgroundResource */ public void setSlideBackgroundResource(int slideBackgroundResource) { mSlideBackgroundResource = BitmapFactory.decodeResource(getResources(), slideBackgroundResource); } /** * 设置滑动开关的背景图片 * * @param switch_background */ public void setSwitchBackgroundResource(int switch_background) { mSwitchBackground = BitmapFactory.decodeResource(getResources(), switch_background); } public void setToggleState(ToggleState state) { toggleState = state; } /** * 开关的状态 */ public enum ToggleState { Open, Close } /** * 设置控件在屏幕上显示的宽高 * * @param widthMeasureSpec * @param heightMeasureSpec */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); setMeasuredDimension(mSwitchBackground.getWidth(), mSwitchBackground.getHeight()); } /** * 绘制自定义view在屏幕上显示的样子 * * @param canvas */ @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //绘制背景图片 /** * @param mSwitchBackground 绘制的背景图片 * @param left 图片的左边的x坐标 * @param top 图顶部的y坐标 * @param paint 画笔 绘制图片不需要画笔 */ canvas.drawBitmap(mSwitchBackground, 0, 0, null); //绘制滑动块图片 if (isSliding) { int left = currentX - mSlideBackgroundResource.getWidth() / 2; //控制滑动块与滑块重合 if (left < 0) { left = 0; } if (left > mSwitchBackground.getWidth() - mSlideBackgroundResource.getWidth()) { left = mSwitchBackground.getWidth() - mSlideBackgroundResource.getWidth(); } canvas.drawBitmap(mSlideBackgroundResource, currentX, 0, null); } else { if (toggleState == ToggleState.Open) { canvas.drawBitmap(mSlideBackgroundResource, mSwitchBackground.getWidth() - mSlideBackgroundResource.getWidth(), 0, null); } else { canvas.drawBitmap(mSlideBackgroundResource, 0, 0, null); } } /* if (toggleState == ToggleState.Open) { canvas.drawBitmap(mSlideBackgroundResource, mSwitchBackground.getWidth() - mSlideBackgroundResource.getWidth(), 0, null); } else { canvas.drawBitmap(mSlideBackgroundResource, 0, 0, null); }*/ } @Override public boolean onTouchEvent(MotionEvent event) { currentX = (int) event.getX(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: isSliding = true; break; case MotionEvent.ACTION_MOVE: break; case MotionEvent.ACTION_UP: isSliding = false; centerx = mSwitchBackground.getWidth() / 2; if (currentX > centerx) { toggleState = ToggleState.Open; } else { toggleState = ToggleState.Close; } if (listener != null){ listener.onToggleStateChangeState(toggleState); } break; } invalidate();//重绘view return true; } private OnToggleStateChangeListener listener; public void setOnToggleStateChangeListener(OnToggleStateChangeListener listener){ this.listener = listener; } public interface OnToggleStateChangeListener{ void onToggleStateChangeState(ToggleState state); } }

布局文件如下

xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MainActivity">

            android:id="@+id/toggleButton"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>


MainActivity代码如下  

package cn.ning.test.toggledemo;

import android.app.Activity;
import android.os.Bundle;

import cn.ning.test.toggledemo.view.ToggleButton;

public class MainActivity extends Activity {
    private ToggleButton toggleButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        toggleButton = (ToggleButton) this.findViewById(R.id.toggleButton);
        toggleButton.setSlideBackgroundResource(R.mipmap.slide_button_background);
        toggleButton.setSwitchBackgroundResource(R.mipmap.switch_background);
        toggleButton.setToggleState(ToggleButton.ToggleState.Open);
    }
}

使用到的图片资源












 
  



你可能感兴趣的:(Android基础学习,androidUI控件学习,自定义控件)