码迷,mamicode.com
首页 > 移动开发 > 详细

Android自己定义控件:老版优酷的三级菜单(效果图 + Demo)

时间:2016-01-10 18:24:32      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

效果图:

技术分享


制作思路:

1、先分析这个效果,事实上能够理解为把三级菜单分成level1,level2,level3,level1是始终显示的。

点击level1后,level2会出现;点击level2后,level3会出现;level2,level3出现后,点击level1,level2和level3都会消失。

然后消失和出现我们用到了一个动画效果。

2、动画效果用到的是RotateAnimation。因为我们都是用同一个效果,那么我们仅仅要写一个类,把效果实现了就能够了。要是使用RotateAnimation的话。我们会不断的复用一些代码,这样开发的效率会比較低。

3、RotateAnimation的旋转进入和旋转出去是个坑——由于他是在X轴顺时针方向旋转的。大家能够看看图:

技术分享

总体思路就是这样,接下来就是一些操作了:

代码:

1、MyAnimation类:

public class MyAnimation{
	public static void animationIn(View view){
		animationIn(view,0);
	}
	
	public static void animationOut(View view){
		animationOut(view,0);
	}
	
	public static void animationIn(View view,long delay){
		RotateAnimation animation = new RotateAnimation(180, 360, view.getWidth()/2, view.getHeight());
		animation.setDuration(500);
		animation.setFillAfter(true);
		animation.setStartOffset(delay);
		
		view.startAnimation(animation);
	}
	
	public static void animationOut(View view,long delay){
		RotateAnimation animation = new RotateAnimation(0, 180, view.getWidth()/2, view.getHeight());
		animation.setDuration(500);
		animation.setFillAfter(true);
		animation.setStartOffset(delay);
		
		view.startAnimation(animation);
	}
}

2、MainActivity类:

public class MainActivity extends Activity implements OnClickListener{
	private boolean isLevel2showed,isLevel3showed;
	
	private RelativeLayout level1,level2,level3;
	private ImageButton home,menu;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		isLevel2showed = false;
		isLevel3showed = false;
		initLayout();
		initImageButton();
	}

	public void initLayout() {
		level1 = (RelativeLayout)findViewById(R.id.relate_level1);
		level2 = (RelativeLayout)findViewById(R.id.relate_level2);
		level3 = (RelativeLayout)findViewById(R.id.relate_level3);
		
		level2.setVisibility(View.INVISIBLE);
		level3.setVisibility(View.INVISIBLE);
	}

	public void initImageButton() {
		home = (ImageButton)level1.findViewById(R.id.home);
		menu = (ImageButton)level2.findViewById(R.id.menu);
		
		home.setOnClickListener(this);
		menu.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		switch(v.getId()){
		case R.id.home:
			if(!isLevel2showed){
				isLevel2showed = true;
				MyAnimation.animationIn(level2);
			}else if(!isLevel3showed){
				isLevel2showed = false;
				MyAnimation.animationOut(level2);
			}else{
				isLevel2showed = false;
				isLevel3showed = false;
				MyAnimation.animationOut(level3);
				MyAnimation.animationOut(level2,500);
			}
			
			break;
		case R.id.menu:
			if(!isLevel3showed){
				isLevel3showed = true;
				MyAnimation.animationIn(level3);
			}else{
				isLevel3showed = false;
				MyAnimation.animationOut(level3);
			}
			break;
		}
	}
}


源代码下载

Android自己定义控件:老版优酷的三级菜单(效果图 + Demo)

标签:

原文地址:http://www.cnblogs.com/lcchuguo/p/5118720.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!