先上一张效果图:
以后大家在设计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; 这个又代表哪种状态啊?
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.
发一下出来。
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 前天