android_94_自定义ToggleButton

效果:



枚举:



自定义View与ViewGroup的区别



示意图:

getX();得到的是 View内部的坐标系;原点在View内的左上角

注意:文字是特殊情况,

getRawX();得到的是 屏幕坐标系:原点在屏幕的左上角



布局文件:

<RelativeLayout 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"
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="com.sg31.sgtogglebutton.MainActivity" >

<com.sg31.sgtogglebutton.SGToogleButton
android:id="@+id/toggleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>

</RelativeLayout>


主控制器:

package com.sg31.sgtogglebutton;

import com.sg31.sgtogglebutton.SGToogleButton.OnToggleStateChangeLisener;
import com.sg31.sgtogglebutton.SGToogleButton.ToggleState;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends ActionBarActivity {

private SGToogleButton toggleBtn;

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

initToggleButton();

}

private void initToggleButton() {
toggleBtn = (SGToogleButton)findViewById(R.id.toggleBtn);
toggleBtn.setBgImgResource(R.drawable.onimg2);
toggleBtn.setSlideImgResource(R.drawable.slideimg);
toggleBtn.setToggleState(ToggleState.Closed);
toggleBtn.setOnToggleStateChangeLisener(new OnToggleStateChangeLisener() {

@Override
public void onToggleStateChanged(ToggleState state) {
// TODO Auto-generated method stub
System.out.println(state==ToggleState.Open?"open":"closed");
}
});
}
}


自定义ToggleButton

package com.sg31.sgtogglebutton;

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;

public class SGToogleButton extends View {

// 状态枚举
public enum ToggleState{
Open,Closed
}

// 代理
private OnToggleStateChangeLisener lisener;
private ToggleState toggleSate;
private Bitmap slideImg;
private Bitmap bgImg;
private int fingerX;
private boolean isSliding;
public interface OnToggleStateChangeLisener{
void onToggleStateChanged(ToggleState state);
}
public void setOnToggleStateChangeLisener(OnToggleStateChangeLisener lisener) {
this.lisener = lisener;
}

// 构造方法
public SGToogleButton(Context context) {
super(context);
}
public SGToogleButton(Context context, AttributeSet attrs) {
super(context, attrs);
}

// 供外界调用
public void setBgImgResource(int imgID) {
bgImg = BitmapFactory.decodeResource(getResources(), imgID);
}
// 供外界调用
public void setSlideImgResource(int imgID) {
slideImg = BitmapFactory.decodeResource(getResources(), imgID);
}
// 供外界调用
public void setToggleState(ToggleState state) {
toggleSate = state;
}

// 自定义View的第2步,onMeasure方法
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(bgImg.getWidth(), bgImg.getHeight());
}

// 自定义View的第3步,onDraw方法
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 1.绘制背景图 在 View中的位置 (画图可以不用Paint)
canvas.drawBitmap(bgImg, 0, 0, null);

// 2根据状态及变量,进行绘制滑块
if (isSliding) {
int slideImgX = fingerX - slideImg.getWidth()/2;
if (slideImgX < 0) {
// 防止左边越界
slideImgX = 0;
}
if (slideImgX > bgImg.getWidth() - slideImg.getWidth()) {
// 防止右边越界
slideImgX = bgImg.getWidth() - slideImg.getWidth();
}
canvas.drawBitmap(slideImg, slideImgX, 0, null);
} else {
// 抬起时:要么关,要么开
if (toggleSate == ToggleState.Open) {
// 背景图片: 左是开, 右是关
canvas.drawBitmap(slideImg, 0, 0, null);
} else {
canvas.drawBitmap(slideImg, bgImg.getWidth() - slideImg.getWidth(), 0, null);
}

}

}

// 自定义View的第4步,onTouchEvent方法
@Override
public boolean onTouchEvent(MotionEvent event) {
System.out.println("sg__touch");
// 得到按下点,在View自己内部的坐标(相对于View自身的左上角)
fingerX = (int)event.getX();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
{
// 只要按下,就标记为滑动
isSliding = true;
}
break;
case MotionEvent.ACTION_MOVE:
{

}
break;
case MotionEvent.ACTION_UP:
{
isSliding = false;
int toggleCenterX = bgImg.getWidth()/2;
if (fingerX > toggleCenterX) {
// 如果用户手指按下的地方,在view的中心线之后面,则表示 滑块从左往右,从开到闭
// 只有不是闭的时候,才要关闭
if (toggleSate != ToggleState.Closed) {
toggleSate = ToggleState.Closed;
// 通知
if (lisener != null) {
lisener.onToggleStateChanged(toggleSate);
}
}
} else {
// 如果用户手指按下的地方,在view的中心线之前面,则表示 滑块从右往左,从闭到开
// 只有不是开的时候,才要打开
if (toggleSate != ToggleState.Open) {
toggleSate = ToggleState.Open;
// 通知
if (lisener != null) {
lisener.onToggleStateChanged(toggleSate);
}
}
}
}
break;

default:
break;
}
// 非常重要的方法,不然没法更新界面
invalidate();
// 自己要处理,所以返回true
return true;
}

}