今天看了一個學(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時候，就認(rèn)為滑動了耸携，然后屏蔽點擊事件棵癣，設(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時候颊咬，就認(rèn)為滑動了务甥，然后屏蔽點擊事件牡辽，設(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>
