<儿童成长乐园>安卓项目开发（三）

<img src="http://img.blog.csdn.net/20141125194018532?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxNDIyODUyNw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="font-family: Arial, Helvetica, sans-serif;" />

这一部分主要是实现“美术”功能中的菜单功能，这个菜单是一个弧形的双层菜单，当点击一级菜单中心按钮时会显示二级菜单，在此点击中部按钮，二级菜单会旋转形式小时，同时点击房子形状图标，二级菜单和三级菜单都会消失。

在Art.java 代码：

package com.example.childrenplayground;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.ImageView;import android.widget.RelativeLayout;public class Art extends Activity{//home为以及菜单栏最中间的那个，star为二级菜单栏最中间那个private ImageView home,star,pencil,menu;private RelativeLayout level2,level3_01,level3_02,level3_03;private boolean isLevel2Show = true;private boolean isLevel3_02Show = true;private boolean isLevel3_01Show = false;private boolean isLevel3_03Show = false;public void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);        setContentView(R.layout.art);        home = (ImageView)findViewById(R.id.home);        star = (ImageView)findViewById(R.id.d2_01);        pencil = (ImageView)findViewById(R.id.d1_01);        menu = (ImageView)findViewById(R.id.d3_01);        level2 = (RelativeLayout)findViewById(R.id.level2);        level3_01 = (RelativeLayout)findViewById(R.id.level3_01);        level3_02 = (RelativeLayout)findViewById(R.id.level3_02);        level3_03 = (RelativeLayout)findViewById(R.id.level3_03);        //View.INVISIBLE:控制该控件面板layout不可见，但是他依旧占用空间。        //View.GONE:控制该控件面板消失。        level3_01.setVisibility(View.INVISIBLE);        level3_03.setVisibility(View.INVISIBLE);        star.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stubif (isLevel3_02Show) {//如果菜单3显示，那么将菜单3隐藏MyAnimation.startAnimationOUT(level3_02,500,0);}else{//如果菜单3隐藏，那么将菜单3显示出来if(isLevel3_01Show){MyAnimation.startAnimationOUT(level3_01, 500, 0);MyAnimation.startAnimationIN(level3_02,500);isLevel3_01Show = !isLevel3_01Show;}else if(isLevel3_03Show){MyAnimation.startAnimationOUT(level3_03, 500, 0);MyAnimation.startAnimationIN(level3_02,500);isLevel3_03Show = !isLevel3_03Show;}else{MyAnimation.startAnimationIN(level3_02,500);}}isLevel3_02Show = !isLevel3_02Show;}});        pencil.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stubif (isLevel3_01Show) {MyAnimation.startAnimationOUT(level3_01, 500, 0);}else{if(isLevel3_02Show){MyAnimation.startAnimationOUT(level3_02, 500, 0);MyAnimation.startAnimationIN(level3_01, 500);isLevel3_02Show = !isLevel3_02Show;}else if(isLevel3_03Show){MyAnimation.startAnimationOUT(level3_03, 500, 0);MyAnimation.startAnimationIN(level3_01, 500);isLevel3_03Show = !isLevel3_03Show;}else{MyAnimation.startAnimationIN(level3_01, 500);}}isLevel3_01Show = !isLevel3_01Show;}});        menu.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stubif (isLevel3_03Show) {MyAnimation.startAnimationOUT(level3_03, 500, 0);}else{if(isLevel3_01Show){MyAnimation.startAnimationOUT(level3_01, 500, 0);MyAnimation.startAnimationIN(level3_03, 500);isLevel3_01Show = !isLevel3_03Show;}else if(isLevel3_02Show){MyAnimation.startAnimationOUT(level3_02, 500, 0);MyAnimation.startAnimationIN(level3_03, 500);isLevel3_02Show = !isLevel3_02Show;}else{MyAnimation.startAnimationIN(level3_03, 500);}}isLevel3_03Show = !isLevel3_03Show;}});        home.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stubif(!isLevel2Show){//显示2级菜单MyAnimation.startAnimationIN(level2,500);}else{if (isLevel3_02Show) {//隐藏3级菜单MyAnimation.startAnimationOUT(level3_02,500,0);//隐藏2级菜单MyAnimation.startAnimationOUT(level2,1000,0);isLevel3_02Show = !isLevel3_02Show;}else if(isLevel3_01Show){MyAnimation.startAnimationOUT(level3_01, 500, 0);MyAnimation.startAnimationOUT(level2, 1000, 0);isLevel3_01Show = !isLevel3_01Show;}else if(isLevel3_03Show){MyAnimation.startAnimationOUT(level3_03, 500, 0);MyAnimation.startAnimationOUT(level2, 1000, 0);isLevel3_03Show = !isLevel3_03Show;}else{//隐藏2级菜单MyAnimation.startAnimationOUT(level2,500,0);}}isLevel2Show = !isLevel2Show;}});}}

MyAnimation.java:

package com.example.childrenplayground;import android.view.View;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.RotateAnimation;public class MyAnimation {//这个类是关联Art的类，主要是给一级二级三级菜单添加显示、隐藏动画public static void startAnimationIN(ViewGroup viewGroup,int duration){//显示菜单for (int i = 0; i < viewGroup.getChildCount(); i++) {viewGroup.getChildAt(i).setVisibility(View.VISIBLE);//显示子菜单viewGroup.getChildAt(i).setFocusable(true);//设置此视图可以接受焦点viewGroup.getChildAt(i).setClickable(true);//设置此视图可以点击}Animation animation;//RotateAnimation:动画控件对象的旋转。这个旋转发生国际X-Y平面。您可以指定要使用的点为中心旋转，(00)是左上角的点。如果未指定，则(00)是缺省旋转点。/**          * 旋转动画          * RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue)          * fromDegrees 开始旋转角度          * toDegrees 旋转到的角度          * pivotXType X轴 参照物          * pivotXValue x轴 旋转的参考点          * pivotYType Y轴 参照物          * pivotYValue Y轴 旋转的参考点          *///Animation.RELATIVE_TO_SELF:指定维度拥有浮动，应乘以正在进行动画处理的对象的高度或宽度。animation = new RotateAnimation(-180,0,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,1.0f);animation.setFillAfter(true);//停留在动画结束的位置animation.setDuration(duration);//动画持续的时间viewGroup.startAnimation(animation);//开始动画}public static void startAnimationOUT(final ViewGroup viewGroup,int duration,int startOffset){//隐藏菜单Animation animation;animation = new RotateAnimation(0,-180,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,1.0f);animation.setFillAfter(true);animation.setDuration(duration);animation.setStartOffset(startOffset);animation.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation arg0) {// TODO Auto-generated method stub}@Overridepublic void onAnimationRepeat(Animation arg0) {// TODO Auto-generated method stub}@Overridepublic void onAnimationEnd(Animation arg0) {// TODO Auto-generated method stubfor (int i = 0; i < viewGroup.getChildCount(); i++) {viewGroup.getChildAt(i).setVisibility(View.GONE);viewGroup.getChildAt(i).setFocusable(false);viewGroup.getChildAt(i).setClickable(false);}}});viewGroup.startAnimation(animation);}}

art.xml文件：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/RelativeLayout1"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:columnCount="2"    android:orientation="horizontal" >    <RelativeLayout        android:id="@+id/level1"        android:layout_width="100dip"        android:layout_height="50dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level1" >        <ImageView            android:id="@+id/home"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:src="@drawable/icon_home" />    </RelativeLayout>    <RelativeLayout        android:id="@+id/level2"        android:layout_width="180dip"        android:layout_height="90dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level2" >        <ImageView            android:id="@+id/d2_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_centerHorizontal="true"            android:layout_margin="6dip"            android:src="@drawable/d201" />        <ImageView            android:id="@+id/d3_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_margin="10dip"            android:background="@drawable/d301" />        <ImageView            android:id="@+id/d1_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_alignParentBottom="true"            android:layout_alignParentLeft="true"            android:layout_margin="10dip"            android:background="@drawable/d101" />    </RelativeLayout>    <RelativeLayout        android:id="@+id/level3_02"        android:layout_width="280dip"        android:layout_height="140dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level3" >        <ImageView            android:id="@+id/c1_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_alignParentBottom="true"            android:layout_marginBottom="6dip"            android:layout_marginLeft="12dip"            android:background="@drawable/c101" />        <ImageView            android:id="@+id/c4_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_centerHorizontal="true"            android:layout_margin="6dip"            android:background="@drawable/c401" />        <ImageView            android:id="@+id/c2_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_above="@+id/c1_01"            android:layout_alignLeft="@+id/c1_01"            android:layout_marginLeft="14dp"            android:background="@drawable/c201" />        <ImageView            android:id="@+id/c3_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_above="@+id/c2_01"            android:layout_toRightOf="@+id/c2_01"            android:background="@drawable/c301" />        <ImageView            android:id="@+id/c6_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_above="@+id/c1_01"            android:layout_alignParentRight="true"            android:layout_marginRight="25dp"            android:background="@drawable/c601" />        <ImageView            android:id="@+id/c7_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginRight="10dp"            android:background="@drawable/c701" />        <ImageView            android:id="@+id/c5_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_above="@+id/c6_01"            android:layout_toLeftOf="@+id/c6_01"            android:background="@drawable/c501" />    </RelativeLayout>    <RelativeLayout        android:id="@+id/level3_01"        android:layout_width="280dip"        android:layout_height="140dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level3" >        <ImageView            android:id="@+id/a1_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_alignParentBottom="true"            android:layout_marginBottom="6dip"            android:layout_marginLeft="12dip"            android:background="@drawable/a101" />        <ImageView            android:id="@+id/a4_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_centerHorizontal="true"            android:layout_margin="6dip"            android:background="@drawable/a401" />        <ImageView            android:id="@+id/a2_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_above="@+id/a1_01"            android:layout_alignLeft="@+id/a1_01"            android:layout_marginLeft="14dp"            android:background="@drawable/a201" />        <ImageView            android:id="@+id/a3_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_above="@+id/a2_01"            android:layout_toRightOf="@+id/a2_01"            android:background="@drawable/a301" />        <ImageView            android:id="@+id/a6_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_above="@+id/a1_01"            android:layout_alignParentRight="true"            android:layout_marginRight="25dp"            android:background="@drawable/a601" />        <ImageView            android:id="@+id/a7_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginRight="10dp"            android:background="@drawable/a701" />        <ImageView            android:id="@+id/a5_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_above="@+id/a6_01"            android:layout_toLeftOf="@+id/a6_01"            android:background="@drawable/a501" />    </RelativeLayout>        <RelativeLayout        android:id="@+id/level3_03"        android:layout_width="280dip"        android:layout_height="140dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level3" >        <ImageView            android:id="@+id/b1_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_alignParentBottom="true"            android:layout_marginBottom="6dip"            android:layout_marginLeft="12dip"            android:background="@drawable/b101" />        <ImageView            android:id="@+id/b4_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_centerHorizontal="true"            android:layout_margin="6dip"            android:background="@drawable/b401" />        <ImageView            android:id="@+id/b2_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_above="@+id/b1_01"            android:layout_alignLeft="@+id/b1_01"            android:layout_marginLeft="14dp"            android:background="@drawable/b201" />        <ImageView            android:id="@+id/b3_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_above="@+id/b2_01"            android:layout_toRightOf="@+id/b2_01"            android:background="@drawable/b301" />        <ImageView            android:id="@+id/b6_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_above="@+id/b1_01"            android:layout_alignParentRight="true"            android:layout_marginRight="25dp"            android:background="@drawable/b601" />        <ImageView            android:id="@+id/b7_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginRight="10dp"            android:background="@drawable/b701" />        <ImageView            android:id="@+id/b5_01"            android:layout_width="35dp"            android:layout_height="35dp"            android:layout_above="@+id/b6_01"            android:layout_toLeftOf="@+id/b6_01"            android:background="@drawable/b501" />    </RelativeLayout></RelativeLayout>

具体的实现过程我在代码中都有注释，在art.xml中主要实现三层菜单的表层，在Art.java 和Animation.java中实现点击图标的逻辑实现。

小提示：在art.xml中的三级菜单我是将三个RelativeLayout同时显示，但是我在Art.java中设置其中的两个RelativeLayout不显示，代码为：

level3_01.setVisibility(View.INVISIBLE);
 level3_03.setVisibility(View.INVISIBLE);

//View.INVISIBLE:控制该控件面板layout不可见，但是他依旧占用空间。
        //View.GONE:控制该控件面板消失。

接下来我们将会继续更新，实现“美术”功能中的画图、保存界面、点击出现动物图片等等。