相仿iphone滑动按钮效果

类似iphone滑动按钮效果

先上一张效果图:
相仿iphone滑动按钮效果
以后大家在设计UI时,可以将那些开关型的功能模块使用上述UI原型进行改造:)相仿iphone滑动按钮效果


DragTab.java文件:
package com.example.ex.view;

import com.example.ex.R;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.TextView;

public class DragTab extends FrameLayout {

	private CallDragTab callTab;
	private int currentTab = -1;
	private TextView game;
	private TextView app;
	private TextView between;
	private int width;
	private OnClickListener gameOnClickListener;
	private OnClickListener appOnClickListener;
	private boolean right;
	private int widgetWidth;
	private int betweenLeft;
	private int firstX;

	public DragTab(Context context) {
		super(context);
		callTab = (CallDragTab) context;
	}

	public DragTab(Context context, AttributeSet attrs) {
		super(context, attrs);
		callTab = (CallDragTab) context;
	}

	public void setCurrentDrayTab(int curTab) {
		setCurrentDrayTab(curTab, false);
	}

	public void setGameText(int redId) {
		if (redId > 0) {
			this.game.setText(redId);
		}
	}

	public void setGameText(String text) {
		if (text != null && text.length() != 0) {
			this.game.setText(text);
		}
	}

	public void setAppText(int redId) {
		if (redId > 0) {
			this.app.setText(redId);
		}
	}

	public void setAppText(String text) {
		if (text != null && text.length() != 0) {
			this.app.setText(text);
		}
	}

	public void setBetweenText(int redId) {
		if (redId > 0) {
			this.between.setText(redId);
		}
	}

	public void setBetweenText(String text) {
		if (text != null && text.length() != 0) {
			this.between.setText(text);
		}
	}

	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		final int action = ev.getAction();
		final int moveX = (int) ev.getX();
		final int scape = moveX - firstX;
		switch (action) {
		case MotionEvent.ACTION_DOWN:
			firstX = (int) ev.getX();
			break;
		case MotionEvent.ACTION_MOVE:
			move(scape);
			break;
		case MotionEvent.ACTION_UP:
			if (currentTab == 1) {
				if (betweenLeft != 0) {
					animationStart(-betweenLeft, 0);
				}

				callTab.getData(1);
			} else if (currentTab == 2) {
				if (betweenLeft != width) {
					animationStart(betweenLeft, width);
				}
				callTab.getData(2);
			}
			break;
		}
		return true;
	}

	private void animationStart(int left, int leftMargin) {
		TranslateAnimation trans = new TranslateAnimation(
				Animation.RELATIVE_TO_SELF, 0, Animation.ABSOLUTE,
				left / width, Animation.RELATIVE_TO_SELF, 0,
				Animation.RELATIVE_TO_SELF, 0);
		trans.setStartOffset(0);
		trans.setDuration(100);
		trans.setFillBefore(false);
		between.startAnimation(trans);
		setLayoutParams(leftMargin);
	}

	private void move(int scape) {
		LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) between
				.getLayoutParams();
		betweenLeft = between.getLeft();
		if (width <= scape) {
			lp.leftMargin = width;
		} else if (scape <= 0) {
			if (betweenLeft == width) {
				right = true;
			} else if (betweenLeft == 0) {
				right = false;
			}
			if (right) {
				lp.leftMargin = width + scape;
				if (lp.leftMargin <= 0) {
					lp.leftMargin = 0;
				}
			} else {
				lp.leftMargin = scape;
				if (lp.leftMargin <= 0) {
					lp.leftMargin = 0;
				}
			}
		} else if (scape > 0 && width > scape) {
			lp.leftMargin = scape;
			if (betweenLeft == width) {
				lp.leftMargin = width;
			}
		}
		if (widgetWidth / 3 <= betweenLeft) {
			setCurrentDrayTab(2);
		} else if (widgetWidth / 3 >= betweenLeft) {
			setCurrentDrayTab(1);
		}
		between.setLayoutParams(lp);
	}

	public void setCurrentDrayTab(int curTab, boolean isSetLayoutParams) {
		if (currentTab == curTab) {
			return;
		}
		currentTab = curTab;
		if (curTab == 1) {
			game.setVisibility(INVISIBLE);
			app.setVisibility(VISIBLE);
			between.setText(game.getText());
			if (isSetLayoutParams) {
				setLayoutParams(0);
			}
		} else if (curTab == 2) {
			app.setVisibility(INVISIBLE);
			game.setVisibility(VISIBLE);
			between.setText(app.getText());
			if (isSetLayoutParams) {
				setLayoutParams(width);
			}
		}
	}

	@Override
	protected void onFinishInflate() {
		game = (TextView) findViewById(R.id.game);
		app = (TextView) findViewById(R.id.app);
		between = (TextView) findViewById(R.id.between);
		LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) between
				.getLayoutParams();
		widgetWidth = lp.width;
		width = (int) (widgetWidth / 1.0);
	}

	private void setLayoutParams(int leftMargin) {
		LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) between
				.getLayoutParams();
		lp.leftMargin = leftMargin;
		between.setLayoutParams(lp);
	}

	public void setGameClickListener(OnClickListener listener) {
		if (listener != null) {
			this.gameOnClickListener = listener;
			this.game.setOnClickListener(gameOnClickListener);
		}
	}

	public void setAppClickListener(OnClickListener listener) {
		if (listener != null) {
			this.appOnClickListener = listener;
			this.app.setOnClickListener(appOnClickListener);
		}
	}

	public interface CallDragTab {
		void getData(int curTab);
	}
}



SlideButtonActivity.java:
package com.example.ex;

import com.example.ex.view.DragTab;
import com.example.ex.view.DragTab.CallDragTab;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;

public class SlideButtonActivity extends Activity implements CallDragTab {

	private DragTab mDragTab;
	private int currentClick = -1;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		mDragTab = (DragTab) findViewById(R.id.self_tab);
		mDragTab.setCurrentDrayTab(1);
		mDragTab.setGameClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				mDragTab.setCurrentDrayTab(1, true);
				getData(1);
			}
		});
		mDragTab.setAppClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				mDragTab.setCurrentDrayTab(2, true);
				getData(2);
			}
		});

		getData(1);
	}

	@Override
	public void getData(int curTab) {
		if (currentClick == curTab) {
			return;
		}
		currentClick = curTab;
		if (curTab == 1) {
			Toast.makeText(this, "游戏", Toast.LENGTH_LONG).show();
		} else if (curTab == 2) {
			Toast.makeText(this, "应用", Toast.LENGTH_LONG).show();
		}

	}
}


main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<include layout="@layout/self_tab" android:layout_width="wrap_content"
		android:layout_height="wrap_content" android:id="@+id/self_tab" />
</LinearLayout>


self_tab.xml:
<?xml version="1.0" encoding="utf-8"?>
<com.example.ex.view.DragTab
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="200dp" android:layout_height="wrap_content">
	<LinearLayout android:layout_width="200dp"
		android:layout_height="wrap_content" android:background="@drawable/rank_long">
		<TextView android:id="@+id/game" android:layout_width="100dp"
			android:layout_height="wrap_content" android:text="游戏"
			android:textSize="16sp" android:textColor="#000000" android:gravity="center_horizontal"
			android:layout_gravity="center" />
		<TextView android:id="@+id/app" android:layout_width="100dp"
			android:layout_height="wrap_content" android:text="应用"
			android:textSize="16sp" android:textColor="#000000" android:gravity="center_horizontal"
			android:layout_gravity="center" />
	</LinearLayout>
	<LinearLayout android:layout_width="200dp"
		android:layout_height="wrap_content">
		<TextView android:id="@+id/between" android:layout_width="100dp"
			android:layout_height="wrap_content" android:background="@drawable/rank_short"
			android:text="游戏" android:textSize="16sp" android:textColor="#000000"
			android:gravity="center" />
	</LinearLayout>
</com.example.ex.view.DragTab>


本来不想附上源码的,因为代码都贴在这了,还是附上吧,也许有的人需要现成的东东!!!!
1 楼 pcq019 2011-08-17  
48个浏览,居然没人回复,我来谢谢你啦~相仿iphone滑动按钮效果
2 楼 lemonboxs 2011-08-19  
很好,解决了我的问题。
3 楼 huanzi5566 2011-09-05  
哇  真厉害
4 楼 bear1122ccc 2011-10-08  
求代码注释。
5 楼 bear1122ccc 2011-10-08  
private int width; 这个宽度是代表什么啊?
private int currentTab = -1; 这个又代表哪种状态啊?
6 楼 qjx1987904 2011-12-03  
很不错,学习了相仿iphone滑动按钮效果
7 楼 yangchch786 2011-12-11  
学习了,有个小bug,就是当向左拖动时,scape<0时出现的bug,已经改过
发一下出来。
if(widgetWidth/3 <= lp.leftMargin){
setCurrentDrayTab(2);
}else if(widgetWidth / 3 >= lp.leftMargin){
setCurrentDrayTab(1);
}
这里需要用lp.leftMargin,不用betweenLeft。

if(right){
lp.leftMargin = width + scape;
if(lp.leftMargin<=0){
lp.leftMargin = 0;
}
}else{
lp.leftMargin = 0;
}
这里当right==false时,就把lp.leftMargin设置为0.
8 楼 龙哥IT 前天  
相仿iphone滑动按钮效果