类似iphone滑动按钮效果

先上一张效果图:

以后大家在设计UI时,可以将那些开关型的功能模块使用上述UI原型进行改造:)


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>

本来不想附上源码的,因为代码都贴在这了,还是附上吧,也许有的人需要现成的东东!!!!

评论

8 楼 龙哥IT 2012-06-27  

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.

6 楼 qjx1987904 2011-12-03  

很不错，学习了

5 楼 bear1122ccc 2011-10-08  

private int width; 这个宽度是代表什么啊？
private int currentTab = -1; 这个又代表哪种状态啊？

4 楼 bear1122ccc 2011-10-08  

求代码注释。

3 楼 huanzi5566 2011-09-05  

哇  真厉害

2 楼 lemonboxs 2011-08-19  

很好，解决了我的问题。

1 楼 pcq019 2011-08-17  

48个浏览，居然没人回复，我来谢谢你啦~