【Android基础】Android 高仿【优酷】圆盘旋转菜单的实现

最新推荐文章于 2023-03-20 15:57:52 发布

dodod2012

最新推荐文章于 2023-03-20 15:57:52 发布

阅读量884

点赞数

分类专栏： Android 基础

Android 基础专栏收录该内容

96 篇文章 2 订阅

订阅专栏

参考地址：http://blog.csdn.net/t12x3456/article/details/7893478

目前，用户对安卓应用程序的UI设计要求越来越高,因此，掌握一些新颖的设计很有必要.

比如菜单，传统的菜单已经不能满足用户的需求. 其中优酷中圆盘旋转菜单的实现就比较优秀，这里我提供下我的思路及实现，仅供参考.

该菜单共分里外三层导航菜单.可以依次从外向里关闭三层菜单，也可以反向打开，并且伴有圆盘旋转的动画效果

首先，看下效果：

以下是具体的代码及解释:

1. 菜单布局文件:

大家看到主要有三个RalativeLayout，就是大家看到的三层，但是关于图片的倾斜是怎样实现的呢？实际上是个假象，图片是正放的，里面图像是倾斜的

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RelativeLayout
        android:id="@+id/rl_level3"
        android:layout_width="280dp"
        android:layout_height="140dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level3" >

        <ImageView
            android:id="@+id/iv_channel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_margin="10dp"
            android:src="@drawable/channel1" />

        <ImageView
            android:id="@+id/iv_channel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/iv_channel1"
            android:layout_alignLeft="@id/iv_channel1"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="25dp"
            android:src="@drawable/channel2" />

        <ImageView
            android:id="@+id/iv_channel3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/iv_channel2"
            android:layout_alignLeft="@id/iv_channel2"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="35dp"
            android:src="@drawable/channel3" />

        <ImageView
            android:id="@+id/iv_channel4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:src="@drawable/channel4" />

        <ImageView
            android:id="@+id/iv_channel7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="10dp"
            android:src="@drawable/channel7" />

        <ImageView
            android:id="@+id/iv_channel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/iv_channel7"
            android:layout_alignRight="@id/iv_channel7"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="25dp"
            android:src="@drawable/channel6" />

        <ImageView
            android:id="@+id/iv_channel5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/iv_channel6"
            android:layout_alignRight="@id/iv_channel6"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="35dp"
            android:src="@drawable/channel5" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_level2"
        android:layout_width="180dp"
        android:layout_height="90dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level2" >

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_margin="10dp"
            android:src="@drawable/icon_search" />

        <ImageView
            android:id="@+id/iv_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:src="@drawable/icon_menu" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="10dp"
            android:src="@drawable/icon_myyouku" />
    </RelativeLayout>

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

        <ImageView
            android:id="@+id/iv_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:src="@drawable/icon_home" />
    </RelativeLayout>

</RelativeLayout>

2. MainActivity：

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends Activity implements OnClickListener {

	private RelativeLayout rlLevel1, rlLevel2, rlLevel3;

	private boolean isLevel1Show = true;
	private boolean isLevel2Show = true;
	private boolean isLevel3Show = true;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		ImageView ivHome = (ImageView) findViewById(R.id.iv_home);
		ImageView ivMenu = (ImageView) findViewById(R.id.iv_menu);

		rlLevel1 = (RelativeLayout) findViewById(R.id.rl_level1);
		rlLevel2 = (RelativeLayout) findViewById(R.id.rl_level2);
		rlLevel3 = (RelativeLayout) findViewById(R.id.rl_level3);

		ivHome.setOnClickListener(this);
		ivMenu.setOnClickListener(this);

		// 为了避免第三层布局将一二层事件拦截掉, 需要在布局文件中最先注册第三层, 最后注册第一层
		rlLevel3.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.iv_home:
			System.out.println("home clicked!");
			if (isLevel2Show) {
				Tools.hideView(rlLevel2);// 隐藏第二层布局
				isLevel2Show = false;

				if (isLevel3Show) {// 如果发现第三次也展现, 也需要隐藏
					Tools.hideView(rlLevel3, 200);// 动画延时200毫秒再运行
					isLevel3Show = false;
				}
			} else {
				Tools.showView(rlLevel2);
				isLevel2Show = true;
			}

			break;
		case R.id.iv_menu:
			System.out.println("menu clicked!");
			if (isLevel3Show) {
				Tools.hideView(rlLevel3);
				isLevel3Show = false;
			} else {
				Tools.showView(rlLevel3);
				isLevel3Show = true;
			}

			break;

		default:
			break;
		}
	}

	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if (keyCode == KeyEvent.KEYCODE_MENU) {
			if (isLevel1Show) {
				Tools.hideView(rlLevel1);
				isLevel1Show = false;
				if (isLevel2Show) {
					Tools.hideView(rlLevel2, 200);
					isLevel2Show = false;
				}

				if (isLevel3Show) {
					Tools.hideView(rlLevel3, 300);
					isLevel3Show = false;
				}
			} else {
				Tools.showView(rlLevel1);
				isLevel1Show = true;

				Tools.showView(rlLevel2, 200);
				isLevel2Show = true;
			}

			return true;
		}

		return super.onKeyDown(keyCode, event);
	}

}

3. 自定义动画类Tools:

import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;

public class Tools {

	public static void hideView(ViewGroup view) {
		hideView(view, 0);
	}

	public static void showView(ViewGroup view) {
		showView(view, 0);
	}

	// 隐藏动画
	public static void hideView(ViewGroup view, long delay) {
		RotateAnimation anim = new RotateAnimation(0, 180,
				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
				1f);
		anim.setDuration(500);
		anim.setFillAfter(true);// 保持动画后的状态
		anim.setStartOffset(delay);// 延迟多长时间后才运行动画

		view.startAnimation(anim);

		// 禁用所有孩子的点击事件
		int childCount = view.getChildCount();
		for (int i = 0; i < childCount; i++) {
			view.getChildAt(i).setEnabled(false);// 禁用点击事件
		}
	}

	// 显示动画
	public static void showView(ViewGroup view, long delay) {
		RotateAnimation anim = new RotateAnimation(180, 360,
				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
				1f);
		anim.setDuration(500);
		anim.setFillAfter(true);// 保持动画后的状态
		anim.setStartOffset(delay);// 延迟多长时间后才运行动画

		view.startAnimation(anim);

		// 开启所有孩子的点击事件
		int childCount = view.getChildCount();
		for (int i = 0; i < childCount; i++) {
			view.getChildAt(i).setEnabled(true);// 开启点击事件
		}
	}

}

这样，一个高仿优酷三级导航圆盘旋转菜单就完成了.，以后完全可以借鉴这些优秀的UI设计，甚至根据新的需求,可以做出更好的UI.

源代码下载地址http://download.csdn.net/detail/dodod2012/9503700

dodod2012

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【Android基础】Android 高仿【优酷】圆盘旋转菜单的实现

参考地址：http://blog.csdn.net/t12x3456/article/details/7893478目前，用户对安卓应用程序的UI设计要求越来越高,因此，掌握一些新颖的设计很有必要.比如菜单，传统的菜单已经不能满足用户的需求. 其中优酷中圆盘旋转菜单的实现就比较优秀，这里我提供下我的思路及实现，仅供参考.该菜单共分里外三层导航菜单.可
复制链接

扫一扫