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

最新推荐文章于 2024-09-19 20:16:28 发布

技术力量猛于虎

最新推荐文章于 2024-09-19 20:16:28 发布

阅读量1k

点赞数

文章标签： android java xml 安卓项目儿童乐园

本文链接：https://blog.csdn.net/u014228527/article/details/41487773

版权

<img src="https://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() {
			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				if (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() {
			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				if (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() {
			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				if (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() {
			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				if(!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() {
			@Override
			public void onAnimationStart(Animation arg0) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onAnimationRepeat(Animation arg0) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onAnimationEnd(Animation arg0) {
				// TODO Auto-generated method stub
				for (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:控制该控件面板消失。

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