(原創)滑動按鈕，滑動鎖的實現

先上圖：

大概就是這種效果，你可以用於滑動解鎖，也可以當做個性化的Button來用

這個我已經進行了封裝，可以直接在xml中進行編寫，然后在activity中重寫ontouch方法進行button的判斷即可，不用你再調整任何東西，

滑動什么的都是自動適配的

 

我把這種Button命名為SlidingButton，先看一下代碼吧，都是非常簡單易用的：

package com.test.slidingbutton;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.Interpolator;
import android.view.animation.TranslateAnimation;
import android.view.animation.Animation.AnimationListener;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

public class SlidingButton extends Button {

	public SlidingButton(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	public SlidingButton(Context context) {
		super(context);
	}

	private boolean isMe = false;

	public boolean isMe() {
		return isMe;
	}

	public void setMe(boolean isMe) {
		this.isMe = isMe;
	}

	public SlidingButton(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		if (event.getAction() == MotionEvent.ACTION_DOWN) {
			isMe = true;
		} else if (event.getAction() == MotionEvent.ACTION_UP) {
			isMe = false;
		}
		return false;
	}

	public boolean handleActivityEvent(MotionEvent activityEvent) {
		boolean result = false;
		if (isMe()) {
			if (activityEvent.getAction() == MotionEvent.ACTION_UP) {
//				Log.v("yupeng", "frame left" + ((FrameLayout)this.getParent().getParent()).getLeft());
//				Log.v("yupeng", "my left" + this.getLeft());
//				Log.v("yupeng", "touch " + this.getLeft());
				
				if(this.getLeft() + this.getWidth()/2 > ((FrameLayout)this.getParent().getParent()).getWidth() - this.getWidth()){
					//用戶完成了選擇動作
					Log.v("yupeng", "sliding true");
					LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)this.getLayoutParams();
					lp.leftMargin = 0;
					this.setLayoutParams(lp);
					this.setMe(false);
					result = true;
				}else{
					TranslateAnimation trans =
				              new TranslateAnimation(
				            		  Animation.ABSOLUTE, 0, 
									  Animation.ABSOLUTE,-this.getLeft(), Animation.RELATIVE_TO_SELF, 0,
									  Animation.RELATIVE_TO_SELF, 0);
					
//					trans.setStartOffset(0);
					trans.setDuration(600);
//					trans.setFillAfter(true);
					trans.setInterpolator(new AccelerateInterpolator());
					trans.setInterpolator(new Interpolator() {
						
						@Override
						public float getInterpolation(float input) {
							// TODO Auto-generated method stub
							return 0;
						}
					});
					trans.setAnimationListener(new SlidingAnimationListener(this));
					startAnimation(trans);
				}
			} else {
				// 還在拖動
				LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) getLayoutParams();
//				Log.v("yupeng", "yu" + lp.leftMargin);
				lp.leftMargin = (int) (activityEvent.getX() - ((FrameLayout)this.getParent().getParent()).getLeft()) - this.getWidth()/2;
				if (lp.leftMargin > 0 && lp.leftMargin < ((FrameLayout)this.getParent().getParent()).getWidth() - this.getWidth()) {
					setLayoutParams(lp);
					
				}
			}
		}
		return result;
	}
	
	private static class SlidingAnimationListener implements AnimationListener {

		private SlidingButton but;

		public SlidingAnimationListener(SlidingButton button) {
			this.but = button;
		}

		@Override
		public void onAnimationEnd(Animation animation) {
			rePosition();
			but.setMe(false);
			but.clearAnimation();
		}

		private void rePosition() {
			LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) but
					.getLayoutParams();
			lp.leftMargin = 0;
			but.setLayoutParams(lp);
			
		}

		@Override
		public void onAnimationRepeat(Animation animation) {
			// TODO Auto-generated method stub

		}

		@Override
		public void onAnimationStart(Animation animation) {
			// TODO Auto-generated method stub

		}

	}
	
}

SlidingButton是集成了Button，重寫onTouchEvent方法，但是這里的ontouchEvent里只是判斷是否touch了自己，如果是

則把自己的boolean isMe這個變量置為true，然后在activity中執行SlidingButton的handleActivityEvent方法，handleActivityEvent方法

來判斷是否滑動，以及是否滑動到了進度條的末端，如果是則返回Boolean告訴調用者結果，如果沒有，則觸發動畫滑回去

	lp.leftMargin = (int) (activityEvent.getX() - ((FrameLayout)this.getParent().getParent()).getLeft()) - this.getWidth()/2;
				if (lp.leftMargin > 0 && lp.leftMargin < ((FrameLayout)this.getParent().getParent()).getWidth() - this.getWidth()) {
					setLayoutParams(lp);
					
				}

 

再看Activity的代碼：

package com.test.slidingbutton;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.Toast;

public class SlidingButtonActivity extends Activity {
    
	private SlidingButton mSlidingButton;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        mSlidingButton = (SlidingButton)this.findViewById(R.id.mainview_answer_1_button);
        
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent event) {
    	if (mSlidingButton.handleActivityEvent(event)) {
			Toast.makeText(SlidingButtonActivity.this, "touch", 1).show();
		}
    	
    	return super.onTouchEvent(event);
    }
    
}

這就不用解釋了吧？要是看不懂你就放棄吧…

需要注意的是xml文件：

<FrameLayout
        android:layout_width="250dip"
        android:layout_height="60dip"
        android:layout_gravity="center"
         >
		
        <TextView
            android:id="@+id/mainview_answer_1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/w_bg1"
            android:gravity="center"
            android:paddingLeft="35dip"
            android:text="滑動按鈕測試"
            android:textColor="#FFFFFF"
            android:textSize="18sp" />
        <!-- 此處，滑動按鈕的父親組件不能為FrameLayout -->

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <com.test.slidingbutton.SlidingButton
                android:id="@+id/mainview_answer_1_button"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:background="@drawable/bn_jt1"
                android:gravity="center" />
        </LinearLayout>
    </FrameLayout>

最外層一定要用FrameLayout，因為在SlidingButton中我一路找到它的父類並把它強轉為了FrameLayout，你自己如果

願意改也可以。

 

ok，就這樣簡單。