当前位置: 代码迷 >> Iphone >> 相仿iphone滑动按钮效果
  详细解决方案

相仿iphone滑动按钮效果

热度:91   发布时间:2016-04-25 06:29:57.0
类似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>


本来不想附上源码的,因为代码都贴在这了,还是附上吧,也许有的人需要现成的东东!!!!
1 楼 pcq019 2011-08-17  
48个浏览,居然没人回复,我来谢谢你啦~
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  
很不错,学习了
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 前天  
  相关解决方案