[view] 03_优酷菜单-点击有动画效果

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" >

<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" >

<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" />

</RelativeLayout>

<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>

<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" >

<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>

<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>

<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>

<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>

<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>

<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>

<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，因为还没有声明。

[view] 03_优酷菜单-点击有动画效果

Android 4.0

Get in touch