首页 > 代码库 > 模仿优酷菜单
模仿优酷菜单
转载注明出处: http://blog.csdn.net/forwardyzk/article/details/42554691
在开发中，会使用菜单，现在模拟一下优酷的菜单效果。
其实效果都是由android基本的动画效果组成的，在合适的时间显示对应的动画，即可展示出不一样的效果。
思路:
1.自定义类RotateMenuView继承RelativeLayout。
2.在需要加载的布局文件中，添加对应的菜单View。
3.定义菜单进入和出去的动画效果，使用旋转动画，进来顺时针，出去的时候，为逆时针。
4.在为不同等级的菜单添加动画的时，设置合适时间间隔。
同时进入时候，进入顺序，一级菜单，二级菜单，三级菜单，有动画间隔延迟加载。
同时出去的时候，出去顺序，三级菜单，二级菜单，一级菜单，有动画间隔延迟加载。
5.一级菜单控制耳机菜单，二级菜单控制三级菜单，菜单的显示状态，每次都更新，初始化额时候，默认都是不现实。
6.对二级菜单和三级菜单的按钮增加点击事件。
菜单进入，出去，点击的效果
private static boolean isRunning = false;
/**
* 菜单进入动画，顺时针，
*
* @param viewGroup
* @param startOffset
* 延迟时间
*/
public static void startInRotateAnimation(ViewGroup viewGroup,
long startOffset) {
for (int i = 0; i < viewGroup.getChildCount(); i++) {
viewGroup.getChildAt(i).setEnabled(true); // 设置VieGroup所有的孩子状态Endbled为True
}
RotateAnimation anim = new RotateAnimation(-180f, 0f,
Animation.RELATIVE_TO_SELF, 0.5f, // x轴上的值
Animation.RELATIVE_TO_SELF, 1.0f); // y轴上的值
anim.setDuration(500); // 一次动画的事件
anim.setStartOffset(startOffset);
anim.setFillAfter(true); // 动画停止在最后状态
anim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
isRunning = true;
}
@Override
public void onAnimationEnd(Animation animation) {
isRunning = false;
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
});
viewGroup.startAnimation(anim);
}
/**
* 菜单出去动画
*
* @param viewGroup
* @param startOffset
* 延迟时间
*/
public static void startOutRotateAnimation(ViewGroup viewGroup,
long startOffset) {
for (int i = 0; i < viewGroup.getChildCount(); i++) {
viewGroup.getChildAt(i).setEnabled(false);
}
RotateAnimation anim = new RotateAnimation(0f, -180f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
1.0f);
anim.setDuration(500);
anim.setStartOffset(startOffset);
anim.setFillAfter(true);
anim.setAnimationListener(new AnimationListener() {
/**
* 当动画开始时
*/
@Override
public void onAnimationStart(Animation animation) {
isRunning = true;
}
/**
* 当动画结束时
*/
@Override
public void onAnimationEnd(Animation animation) {
isRunning = false;
}
/**
* 当动画开始之前
*/
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
});
viewGroup.startAnimation(anim);
}
/**
* 获取动画是否正在执行
*
* @return
*/
public static boolean isRunningAnimation() {
return isRunning;
}
/**
* @return 点击菜单按钮的效果，放大
*/
public static ScaleAnimation normalToBig(View view) {
ScaleAnimation animation = new ScaleAnimation(1.0f, 1.5f, 1.0f, 1.5f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(2000);
animation.setFillAfter(false);
view.startAnimation(animation);
return animation;
}设置菜单显示和隐藏
/**
* 优酷菜单是否显示
*
* @return
*/
public boolean showMeun() {
if (MenuAnimationUtils.isRunningAnimation())
return true;
if (isDisplayMenu) {
long startOffset = 0;
// 隐藏菜单
if (isDisplayLevel2) { // 二级菜单显示状态, 隐藏
if (isDisplayLevel3) { // 三级菜单显示状态, 隐藏它
MenuAnimationUtils.startOutRotateAnimation(rlLevel3,
startOffset);
startOffset = 200;
isDisplayLevel3 = !isDisplayLevel3;
}
MenuAnimationUtils.startOutRotateAnimation(rlLevel2,
startOffset);
startOffset += 200;
isDisplayLevel2 = !isDisplayLevel2;
}
// 隐藏一级菜单
MenuAnimationUtils.startOutRotateAnimation(rlLevel1, startOffset);
} else {
// 显示菜单
// 判断菜单是否是为View.GONE的状态
if (rlLevel1.getVisibility() == View.GONE
&& rlLevel2.getVisibility() == View.GONE
&& rlLevel3.getVisibility() == View.GONE) {
// 设置菜单显示
rlLevel1.setVisibility(View.VISIBLE);
rlLevel2.setVisibility(View.VISIBLE);
rlLevel3.setVisibility(View.VISIBLE);
}
MenuAnimationUtils.startInRotateAnimation(rlLevel1, 0);
MenuAnimationUtils.startInRotateAnimation(rlLevel2, 200);
MenuAnimationUtils.startInRotateAnimation(rlLevel3, 400);
isDisplayLevel2 = !isDisplayLevel2;
isDisplayLevel3 = !isDisplayLevel3;
}
return isDisplayMenu = !isDisplayMenu;
}控制按钮的点击事件
if (MenuAnimationUtils.isRunningAnimation())
return;
switch (v.getId()) {
case R.id.ib_home:// 主菜单按钮
if (isDisplayLevel2) {
long startOffset = 0;
if (isDisplayLevel3) {
MenuAnimationUtils.startOutRotateAnimation(rlLevel3,
startOffset);
isDisplayLevel3 = !isDisplayLevel3;
startOffset = 200;
}
// 隐藏二级菜单
MenuAnimationUtils.startOutRotateAnimation(rlLevel2,
startOffset);
} else {
// 显示二级菜单
MenuAnimationUtils.startInRotateAnimation(rlLevel2, 0);
}
isDisplayLevel2 = !isDisplayLevel2;
break;
case R.id.ib_menu:// 二级菜单控制三级菜单的按钮
if (isDisplayLevel3) {
// 隐藏三级菜单
MenuAnimationUtils.startOutRotateAnimation(rlLevel3, 0);
} else {
// 显示三级菜单
MenuAnimationUtils.startInRotateAnimation(rlLevel3, 0);
}
isDisplayLevel3 = !isDisplayLevel3;
break;
default:
break;
}
非控制菜单按钮的点击事件。
private OnClickListener clickListener = new OnClickListener() {
@Override
public void onClick(View v) {
if (clickMenuListener == null) {
return;
}
switch (v.getId()) {
case R.id.ib_level2_1:
clickMenuListener.click(v, LEVEL2_21);
break;
case R.id.ib_level2_3:
clickMenuListener.click(v, LEVEL2_23);
break;
case R.id.ib_level3_1:
clickMenuListener.click(v, LEVEL3_31);
break;
case R.id.ib_level3_2:
clickMenuListener.click(v, LEVEL3_32);
break;
case R.id.ib_level3_3:
clickMenuListener.click(v, LEVEL3_33);
break;
case R.id.ib_level3_4:
clickMenuListener.click(v, LEVEL3_34);
break;
case R.id.ib_level3_5:
clickMenuListener.click(v, LEVEL3_35);
break;
case R.id.ib_level3_6:
clickMenuListener.click(v, LEVEL3_36);
break;
case R.id.ib_level3_7:
clickMenuListener.click(v, LEVEL3_37);
break;
default:
break;
}
MenuAnimationUtils.normalToBig(v);
}
};布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="@+id/rl_level1"
android:layout_width="100dip"
android:layout_height="50dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/icon_youku_level1" >
<ImageButton
android:id="@+id/ib_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/icon_youku_home" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_level2"
android:layout_width="200dip"
android:layout_height="100dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/icon_youku_level2" >
<ImageButton
android:id="@+id/ib_level2_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="5dip"
android:layout_marginLeft="10dip"
android:background="@drawable/icon_youku_search" />
<ImageButton
android:id="@+id/ib_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip"
android:background="@drawable/icon_youku_menu" />
<ImageButton
android:id="@+id/ib_level2_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="5dip"
android:layout_marginRight="10dip"
android:background="@drawable/icon_youku_myyouku" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_level3"
android:layout_width="315dip"
android:layout_height="160dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/icon_youku_level3" >
<ImageButton
android:id="@+id/ib_level3_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dip"
android:layout_marginLeft="15dip"
android:background="@drawable/icon_youku_channel1" />
<ImageButton
android:id="@+id/ib_level3_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/ib_level3_1"
android:layout_marginBottom="20dip"
android:layout_marginLeft="40dip"
android:background="@drawable/icon_youku_channel2" />
<ImageButton
android:id="@+id/ib_level3_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/ib_level3_2"
android:layout_marginBottom="10dip"
android:layout_marginLeft="10dip"
android:layout_toRightOf="@id/ib_level3_2"
android:background="@drawable/icon_youku_channel3" />
<ImageButton
android:id="@+id/ib_level3_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip"
android:background="@drawable/icon_youku_channel4" />
<ImageButton
android:id="@+id/ib_level3_7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dip"
android:layout_marginRight="15dip"
android:background="@drawable/icon_youku_channel5" />
<ImageButton
android:id="@+id/ib_level3_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/ib_level3_7"
android:layout_alignParentRight="true"
android:layout_marginBottom="20dip"
android:layout_marginRight="40dip"
android:background="@drawable/icon_youku_channel6" />
<ImageButton
android:id="@+id/ib_level3_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/ib_level3_6"
android:layout_marginBottom="10dip"
android:layout_marginRight="10dip"
android:layout_toLeftOf="@id/ib_level3_6"
android:background="@drawable/icon_youku_channel7" />
</RelativeLayout>
</RelativeLayout>使用步骤:
activity_main1.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.view.RotateMenuView
android:id="@+id/menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom" >
</com.example.view.RotateMenuView>
<Button
android:id="@+id/bt_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="87dp"
android:background="@drawable/bt_pay_selector"
android:text="显示菜单"
android:textColor="@android:color/white" />
</RelativeLayout>MainActivity.java
public class MainActivity extends Activity {
private RotateMenuView menu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main1);
menu = (RotateMenuView) findViewById(R.id.menu);
final Button bt_show = (Button) findViewById(R.id.bt_show);
bt_show.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (!menu.showMeun()) {
bt_show.setText("显示菜单");
} else {
bt_show.setText("隐藏菜单");
}
}
});
menu.setClickMenuListener(new ClickMenuListener() {
@Override
public void click(View view, int position) {
switch (position) {
case RotateMenuView.LEVEL2_21:
showShortToast("搜索");
break;
case RotateMenuView.LEVEL2_23:
showShortToast("关注");
break;
case RotateMenuView.LEVEL3_31:
showShortToast("音乐");
break;
case RotateMenuView.LEVEL3_32:
showShortToast("播放器");
break;
case RotateMenuView.LEVEL3_33:
showShortToast("熊猫");
break;
case RotateMenuView.LEVEL3_34:
showShortToast("排名");
break;
case RotateMenuView.LEVEL3_35:
showShortToast("麦克风");
break;
case RotateMenuView.LEVEL3_36:
showShortToast("视频");
break;
case RotateMenuView.LEVEL3_37:
showShortToast("收音机");
break;
default:
break;
}
}
});
}
public void showShortToast(String message) {
Toast.makeText(getApplicationContext(), message, 0).show();
}
}
源码下载: http://download.csdn.net/detail/forwardyzk/8344663
效果图:
模仿优酷菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。