Android 사용자 정의 컨트롤 iOS 슬라이더 스위치 버튼 모방

SwitchButton 은 클릭 할 때 CheckBox 와 같은 상 태 를 전환 할 수 있 습 니 다.
드래그 할 때 도 드래그 한 거리 에 따라 전환 여 부 를 판단 할 수 있 습 니 다.ToggleButton 과 유사 합 니 다.
따라서 클릭 이벤트 와 드래그 이 벤트 를 구별 해 야 합 니 다.
실현 효 과 는 그림 과 같다.

사용자 정의 SwitchButton 은 다음 과 같 습 니 다.

public class SwitchButton extends View implements View.OnTouchListener {
 private Bitmap bg_on, bg_off, slipper_btn;
 /**
 *     x    x
 */
 private float downX, nowX;
 /**
 *          
 */
 private boolean onSlip = false;
 /**
 *      
 */
 private boolean nowStatus = false;
 /**
 *     
 */
 private OnChangedListener listener;
 /**
 *           ，         
 * getScaledTouchSlop()：
 * Distance in pixels a touch can wander before we think the user is scrolling
 * */
 private int mTouchSlop=new ViewConfiguration().getScaledTouchSlop();
 
 public SwitchButton(Context context) {
 super(context);
 init();
 }
 public SwitchButton(Context context, AttributeSet attrs) {
 super(context, attrs);
 init();
 }
 public void init(){
 //      
 bg_on = BitmapFactory.decodeResource(getResources(), R.mipmap.switch_on_on);
 bg_off = BitmapFactory.decodeResource(getResources(), R.mipmap.switch_off_off);
 slipper_btn = BitmapFactory.decodeResource(getResources(), R.mipmap.switch_ball_ball);
 setOnTouchListener(this);
 }
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 Matrix matrix = new Matrix();
 Paint paint = new Paint();
 float x = 0;
 //  nowX    ，      
 if (nowX < (bg_on.getWidth()/2)){
 canvas.drawBitmap(bg_off, matrix, paint);//        
 }else{
 canvas.drawBitmap(bg_on, matrix, paint);//        
 }
 if (onSlip) {//        ,
 if(nowX >= bg_on.getWidth())//        ,         ,       
 x = bg_on.getWidth() - slipper_btn.getWidth()/2;//    1/2   
 else
 x = nowX - slipper_btn.getWidth()/2;
 }else {
 if(nowStatus){//            x 
 x = bg_on.getWidth() - slipper_btn.getWidth();
 }else{
 x = 0;
 }
 }
 //           ，       
 if (x < 0 ){
 x = 0;
 }
 else if(x > bg_on.getWidth() - slipper_btn.getWidth()){
 x = bg_on.getWidth() - slipper_btn.getWidth();
 }
 //    
 canvas.drawBitmap(slipper_btn, x, 0, paint);
 }
 
 @Override
 public boolean onTouch(View v, MotionEvent event) {
 switch(event.getAction()){
 case MotionEvent.ACTION_DOWN:{
 if (event.getX() > bg_off.getWidth() || event.getY() > bg_off.getHeight()){
 return false;
 }else{
 onSlip = true;
 downX = event.getX();
 nowX = downX;
 }
 break;
 }
 case MotionEvent.ACTION_MOVE:{
 nowX = event.getX();
 break;
 }
 case MotionEvent.ACTION_UP:{
 DebugLog.e("mTouchSlop:"+mTouchSlop);
 onSlip = false;
 nowX = event.getX();
 float float_distance=nowX - downX;
 int int_disatnce=(int)float_distance;
 DebugLog.e("int_disatnce:"+int_disatnce);
 /**
 *       ，       
 */
 if(Math.abs(int_disatnce)<mTouchSlop){
 if(this.isChecked()){
 this.setChecked(false);
 nowX = 0;
 }else{
 this.setChecked(true);
 nowX = bg_on.getWidth() - slipper_btn.getWidth();
 }
 }else{
 /**
 *       ，       
 */
 if(event.getX() >= (bg_on.getWidth()/2)){
 nowStatus = true;
 nowX = bg_on.getWidth() - slipper_btn.getWidth();
 }else{
 nowStatus = false;
 nowX = 0;
 }
 }
 if(listener != null){
 listener.OnChanged(SwitchButton.this, nowStatus);
 }
 break;
 }
 }
 //    
 invalidate();
 return true;
 }
 /**
 *  WiperSwitch      ，        
 * @param listener
 */
 public void setOnChangedListener(OnChangedListener listener){
 this.listener = listener;
 }
 /**
 *            ，     
 * @param checked
 */
 public void setChecked(boolean checked){
 if(checked){
 nowX = bg_off.getWidth();
 }else{
 nowX = 0;
 }
 nowStatus = checked;
 }
 public boolean isChecked() {
 return nowStatus;
 }
 /**
 *     
 *
 */
 public interface OnChangedListener {
 public void OnChanged(SwitchButton wiperSwitch, boolean checkState);
 }
}

레이아웃 파일 에서 사용:

<com.uestcneon.chuji.changjianglife.share.SwitchButton
 android:id="@+id/user_privacy_state"
 android:layout_width="wrap_content"
 android:layout_height="20dp"
 android:layout_marginLeft="30dp" />

컨트롤 에 사용 할 자원 그림 3 개:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.