今天给大家介绍如何在Android下实现一个带动画效果的Tab Menu。Tab Menu的打开动画效果为自下而上的淡入推进效果，关闭效果为自上而下的淡出推出效果。
实现的效果图如下(没有找到合适的屏幕录像工具，只能截静态图)：
程序运行效果
[文件] dockmenu.rar ~ 49KB 下载(372)
[代码] TabMenuActivity.java
01 |
package com.zhuozhuo; |
02 |
|
03 |
import android.app.Activity; |
04 |
import android.os.Bundle; |
05 |
import android.view.KeyEvent; |
06 |
import android.widget.TextView; |
07 |
|
08 |
public class TabMenuActivity extends Activity { |
09 |
/** Called when the activity is first created. */ |
10 |
|
11 |
TabView dockView; |
12 |
TextView tv; |
13 |
|
14 |
@Override |
15 |
public void onCreate(Bundle savedInstanceState) { |
16 |
super.onCreate(savedInstanceState); |
17 |
setContentView(R.layout.main); |
18 |
tv = (TextView) findViewById(R.id.tv); |
19 |
dockView = new DockView(this); |
20 |
} |
21 |
|
22 |
public boolean onKeyDown(int keyCode, KeyEvent event) { |
23 |
if (keyCode == KeyEvent.KEYCODE_MENU) {//监听menu键 |
24 |
if(dockView.isOpen()) { |
25 |
tv.setText("点击menu键打开dock"); |
26 |
|
27 |
dockView.closeDock();//关闭dock |
28 |
} |
29 |
else { |
30 |
tv.setText("再次点击menu键或者back键关闭dock"); |
31 |
dockView.openDock();//打开dock |
32 |
} |
33 |
return true; |
34 |
} |
35 |
if (keyCode == KeyEvent.KEYCODE_BACK) {//监听back键 |
36 |
if(dockView.isOpen()) {//当dock打开时，按back键关闭dock |
37 |
dockView.closeDock(); |
38 |
return true; |
39 |
} |
40 |
} |
41 |
return super.onKeyDown(keyCode, event); |
42 |
} |
43 |
|
44 |
|
45 |
} |
[代码] TabView.java
001 |
package com.zhuozhuo; |
002 |
|
003 |
import android.app.Activity; |
004 |
import android.content.Context; |
005 |
import android.view.View; |
006 |
import android.view.View.OnClickListener; |
007 |
import android.view.animation.Animation; |
008 |
import android.view.animation.Animation.AnimationListener; |
009 |
import android.view.animation.AnimationUtils; |
010 |
import android.widget.Toast; |
011 |
|
012 |
public class TabView { |
013 |
|
014 |
private static final int INTERVAL_TIME = 50;// 每个tab之间的动画时间间隔ms |
015 |
|
016 |
private View tab1; |
017 |
private View tab2; |
018 |
private View tab3; |
019 |
private View tab4; |
020 |
|
021 |
private Activity context; |
022 |
|
023 |
private boolean isOpen; |
024 |
|
025 |
public TabView(Activity context) { |
026 |
this.context = context; |
027 |
tab1 = context.findViewById(R.id.tab1); |
028 |
tab2 = context.findViewById(R.id.tab2); |
029 |
tab3 = context.findViewById(R.id.tab3); |
030 |
tab4 = context.findViewById(R.id.tab4); |
031 |
setOnClickListener(tab1, 1); |
032 |
setOnClickListener(tab2, 2); |
033 |
setOnClickListener(tab3, 3); |
034 |
setOnClickListener(tab4, 4); |
035 |
} |
036 |
|
037 |
public void openDock() {//打开dock |
038 |
tab(tab1, 0, true); |
039 |
tab(tab2, INTERVAL_TIME * 1, true); |
040 |
tab(tab3, INTERVAL_TIME * 2, true); |
041 |
tab(tab4, INTERVAL_TIME * 3, true); |
042 |
isOpen = true; |
043 |
} |
044 |
|
045 |
private void setOnClickListener(View view, final int pos) { |
046 |
view.setOnClickListener(new OnClickListener() { |
047 |
|
048 |
@Override |
049 |
public void onClick(View v) { |
050 |
Toast.makeText(context, "view" + pos + " click!", Toast.LENGTH_SHORT).show();//点击tab时显示toast |
051 |
closeDock(); |
052 |
} |
053 |
}); |
054 |
} |
055 |
|
056 |
private void tab(final View view,int delayTime,final boolean toOpen) { |
057 |
view.postDelayed(new Runnable() { |
058 |
|
059 |
@Override |
060 |
public void run() { |
061 |
Animation animation; |
062 |
|
063 |
if(toOpen) { |
064 |
view.setVisibility(View.VISIBLE);//动画开始前,设置view可见 |
065 |
animation = AnimationUtils.loadAnimation(context, R.anim.show_tab); |
066 |
view.startAnimation(animation); |
067 |
|
068 |
} |
069 |
else { |
070 |
animation = AnimationUtils.loadAnimation(context, R.anim.close_tab); |
071 |
animation.setAnimationListener(new AnimationListener() { |
072 |
|
073 |
@Override |
074 |
public void onAnimationStart(Animation animation) { |
075 |
|
076 |
} |
077 |
|
078 |
@Override |
079 |
public void onAnimationRepeat(Animation animation) { |
080 |
|
081 |
} |
082 |
|
083 |
@Override |
084 |
public void onAnimationEnd(Animation animation) { |
085 |
view.setVisibility(View.INVISIBLE);//动画结束时,view不可见 |
086 |
|
087 |
} |
088 |
}); |
089 |
view.startAnimation(animation); |
090 |
|
091 |
|
092 |
} |
093 |
|
094 |
} |
095 |
}, delayTime); |
096 |
} |
097 |
|
098 |
public boolean isOpen() { |
099 |
return isOpen; |
100 |
} |
101 |
|
102 |
public void closeDock() {//关闭dock |
103 |
tab(tab1, 0, false); |
104 |
tab(tab2, INTERVAL_TIME * 1, false); |
105 |
tab(tab3, INTERVAL_TIME * 2, false); |
106 |
tab(tab4, INTERVAL_TIME * 3, false); |
107 |
isOpen = false; |
108 |
} |
109 |
} |