优酷动画-点击有动画效果
1、效果：  |
| 2、步骤： 1、先定义最里面的布局，然后中间的布局，最后是最外层的布局 2、为最里面的Home和中间的ImageButton设置点击事件 3、当被点击的时候，开启其外面的布局(旋转动画，旋转出去) 4、在旋转出去的时候，将其里面的ImageButton设置为不可点击，并定格在播放完毕时间点。 5、处理多次点击时候，动画播放问题：在动画播放时候，设置view不可点击，不可聚焦，结束后，可点击可聚焦 6、在level3和level2都在的时候，点击home，将两个都out出去 |
| 3、技术点 a) 布局文件中，使用id时，要先在前面声明，然后才能使用该id，或者，用一个xml：recourse中item，id属性来声明 b) animation.setAnimationListener(listener)设置动画的监听事件，处理开始播放，播放完毕，重复播放 c)动画播放的延时： animation.setStartOffset(startOffset);// 动画延时执行的时间 |
| 4、布局： <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- 1、一级菜单 -->
<RelativeLayout
android:id="@+id/rl_level1"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level1" >
<!-- Home -->
<ImageButton
android:id="@+id/ib_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/icon_home"
android:contentDescription="菜单Home" />
<!-- android:src="@drawable/icon_home" ImageButton有个默认的边框，而background没有 -->
</RelativeLayout>
<!-- 2、二级菜单 -->
<RelativeLayout
android:id="@+id/rl_level2"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level2"
android:visibility="invisible" >
<ImageButton
android:id="@+id/ib_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:background="@drawable/icon_search" >
</ImageButton>
<ImageButton
android:id="@+id/ib_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="6dp"
android:background="@drawable/icon_menu" >
</ImageButton>
<ImageButton
android:id="@+id/ib_myyouku"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:background="@drawable/icon_myyouku" >
</ImageButton>
</RelativeLayout>
<!-- 3、三级菜单 -->
<RelativeLayout
android:id="@+id/rl_level3"
android:layout_width="335dp"
android:layout_height="165dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level3"
android:visibility="invisible" >
<!-- channel1 -->
<ImageButton
android:id="@+id/ib_channel1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="10dp"
android:layout_marginLeft="12dp"
android:background="@drawable/channel1" >
</ImageButton>
<!-- channel2 -->
<ImageButton
android:id="@+id/ib_channel2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/ib_channel1"
android:layout_marginBottom="20dp"
android:layout_marginLeft="35dp"
android:background="@drawable/channel2" >
</ImageButton>
<!-- channel3 -->
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/ib_channel2"
android:layout_marginBottom="20dp"
android:layout_marginLeft="12dp"
android:layout_toRightOf="@id/ib_channel2"
android:background="@drawable/channel3" >
</ImageButton>
<!-- channel4 -->
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:background="@drawable/channel4" >
</ImageButton>
<!-- channel5 -->
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/ib_channel6"
android:layout_marginBottom="20dp"
android:layout_marginRight="10dp"
android:layout_toLeftOf="@id/ib_channel6"
android:background="@drawable/channel5" >
</ImageButton>
<!-- channel6 -->
<ImageButton
android:id="@+id/ib_channel6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/ib_channel7"
android:layout_alignParentRight="true"
android:layout_marginBottom="20dp"
android:layout_marginRight="35dp"
android:background="@drawable/channel6" >
</ImageButton>
<!-- channel7 -->
<ImageButton
android:id="@+id/ib_channel7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="12dp"
android:background="@drawable/channel7" >
</ImageButton>
</RelativeLayout>
</RelativeLayout> ImageButton:的src属性，有一个边框，用background |
| 5、逻辑代码： package com.youku.youkumenu;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageButton;
import android.widget.RelativeLayout;
public class YoukuActivity extends Activity implements OnClickListener { private ImageButton ib_home;
private ImageButton ib_menu; private boolean is_level3_on;// 3级level是否可见
private boolean b_level2_flag = true;// 二级level,用来判断播放什么动画,true:out false:in
private boolean b_level3_flag = false;// 三级level,用来判断播放什么动画,true:out false:in private RelativeLayout rl_level3; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); this.setContentView(R.layout.activity_youku); rl_level3 = (RelativeLayout) this.findViewById(R.id.rl_level3); ib_home = (ImageButton) this.findViewById(R.id.ib_home);
ib_menu = (ImageButton) this.findViewById(R.id.ib_menu); ib_home.setOnClickListener(this);
ib_menu.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) { case R.id.ib_home: RelativeLayout rl_level2 = (RelativeLayout) this.findViewById(R.id.rl_level2); if (b_level2_flag) {// 二级level显示,in
startMyAnimation(rl_level2, R.anim.rl_level2_in, true,R.id.ib_home,0);
b_level2_flag = false;
rl_level2.setVisibility(View.VISIBLE);
// is_level2_on = true;
} else {// 二级level隐藏，out
if (is_level3_on) {// 如果三级level也在显示，将其也关闭
startMyAnimation(rl_level3,R.anim.rl_level3_out, false, R.id.ib_home, 0);
b_level3_flag = false;
is_level3_on = false;
}
startMyAnimation(rl_level2, R.anim.rl_level2_out, false,R.id.ib_home,300);
b_level2_flag = true;
rl_level2.setVisibility(View.INVISIBLE);
// is_level2_on = false;
}
break; case R.id.ib_menu: rl_level3 = (RelativeLayout) this.findViewById(R.id.rl_level3);
if (b_level3_flag) {// true，表示出去out
rl_level3.setVisibility(View.VISIBLE);
startMyAnimation(rl_level3, R.anim.rl_level3_out, false,R.id.ib_menu,0);
b_level3_flag = false;
is_level3_on = false;// 三级level可见
} else {// false，表示进入in
startMyAnimation(rl_level3, R.anim.rl_level3_in, true,R.id.ib_menu,0);
b_level3_flag = true;
is_level3_on = true;// 三级level不可见
rl_level3.setVisibility(View.INVISIBLE);
}
/*if (is_level3_on) {// 如果三级level可见，home不可点击不可聚焦
ib_home.setClickable(false);
ib_home.setFocusable(false);
} else {
ib_home.setClickable(true);
ib_home.setFocusable(true);
}*/
// Toast.makeText(this, "is_level3_on:" + is_level3_on, 0).show();
break;
}
}
/**
* 播放动画
* @param viewGroup 要播放动画的view
* @param animId 动画的xml文件
* @param isIn 是否是进入动画
* @param ResId 点击的组件执行的动画
* @param startOffset 动画延时执行的时间，long
*/
public void startMyAnimation(ViewGroup viewGroup, int animId, boolean isIn,
final int ResId, long startOffset) {
// 1、该viewGroup开启动画
Animation animation = AnimationUtils.loadAnimation(this, animId);
animation.setAnimationListener(new AnimationListener() {
View view = findViewById(ResId);// 用来解决多次点击时候，动画多次执行
@Override
public void onAnimationStart(Animation animation) {
view.setClickable(false);
view.setFocusable(false);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
view.setClickable(true);
view.setFocusable(true);
}
});
animation.setStartOffset(startOffset);// 动画延时执行的时间
viewGroup.startAnimation(animation);
// 2、将该viewGroup对象下面的还在设置为不可点击
int childCount = viewGroup.getChildCount();
for (int i = 0; i < childCount; i++) {
viewGroup.getChildAt(i).setClickable(isIn);
viewGroup.getChildAt(i).setFocusable(isIn);
}
}
} |
| 问题：R.java文件找不到 , 原因是前面的组件，使用到了后面组件的id，因为还没有声明。 |