<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:控制该控件面板消失。
接下来我们将会继续更新,实现“美术”功能中的画图、保存界面、点击出现动物图片等等。