Android仿优酷菜单效果

一、效果图

二、主要的技术点

  1.RelativeLayout布局

  2.RotateAnimation旋转动画

三、需求

  1.点击二级菜单中的“menu”键控制三级菜单的进入和退出动画效果;

  2.点击一级菜单中的“home”键控制二级和三级菜单的进入和退出效果;

  3.点击手机上的菜单键控制一级、二级和三级菜单的进入和退出效果。

四、实例代码

  1.布局文件:activity_main.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <RelativeLayout
        android:id="@+id/rl_level1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:background="@drawable/level1" >

        <ImageView
            android:id="@+id/iv_icon_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/rl_level2"
        android:layout_width="180dp"
        android:layout_height="90dp"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:background="@drawable/level2" >

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

        <ImageView
            android:id="@+id/iv_icon_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:src="@drawable/icon_menu" />

        <ImageView
            android:id="@+id/iv_icon_myyouku"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignTop="@id/iv_icon_search"
            android:layout_marginRight="3dp"
            android:src="@drawable/icon_myyouku" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_level3"
        android:layout_width="280dp"
        android:layout_height="140dp"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="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_alignParentLeft="true"
            android:layout_margin="3dp"
            android:src="@drawable/channel1" />

        <ImageView
            android:id="@+id/iv_channel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="40dp"
            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_alignParentBottom="true"
            android:layout_marginBottom="75dp"
            android:layout_marginLeft="55dp"
            android:src="@drawable/channel3" />

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

        <ImageView
            android:id="@+id/iv_channel5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="75dp"
            android:layout_marginRight="55dp"
            android:src="@drawable/channel5" />

        <ImageView
            android:id="@+id/iv_channel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="40dp"
            android:layout_marginRight="25dp"
            android:src="@drawable/channel6" />

         <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="3dp"
            android:src="@drawable/channel7" />
    </RelativeLayout>

</RelativeLayout>

  2.设置旋转动画:MyUtils.java

package com.gnnuit.youkumenu;

import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;

public class MyUtils {

    /**
     * 设置View退出时的旋转动画
     *
     * @param offset
     *            动画执行的延迟时间
     * @param view
     */
    public static void startAnimationOut(RelativeLayout view, long offset) {
        // 旋转动画,(1)必须确定旋转圆心,默认是View的左上角;(2)设置旋转方向,右边是0度,左边是180度,上边是270度,下边是90度,顺时针是从0到180
        // 设置顺时针退出,从0到180
        RotateAnimation rotateAnimation = new RotateAnimation(0, 180, view.getWidth() / 2, view.getHeight());
        rotateAnimation.setDuration(300);
        rotateAnimation.setFillAfter(true);// 动画执行完后,保持最后的状态
        rotateAnimation.setStartOffset(offset);// 设置延迟执行
        view.startAnimation(rotateAnimation);
    }

    /**
     * 设置View进入时的旋转动画
     *
     * @param offset
     *            动画执行的延迟时间
     * @param view
     */
    public static void startAnimationIn(RelativeLayout view, long offset) {
        // 设置顺时针进入,从180到360
        RotateAnimation rotateAnimation = new RotateAnimation(180, 360, view.getWidth() / 2, view.getHeight());
        rotateAnimation.setDuration(300);
        rotateAnimation.setFillAfter(true);
        rotateAnimation.setStartOffset(offset);
        view.startAnimation(rotateAnimation);
    }

}

  3.主界面:MainActivity.java

package com.gnnuit.youkumenu;

import android.os.Bundle;
import android.app.Activity;
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 ImageView iv_icon_home;
    private ImageView iv_icon_menu;

    private RelativeLayout rl_level1;
    private RelativeLayout rl_level2;
    private RelativeLayout rl_level3;

    private boolean isLevel3Show = true;// 控制三级菜单当前是否处于显示状态
    private boolean isLevel2Show = true;// 控制二级菜单当前是否处于显示状态
    private boolean isLevel1Show = true;// 控制一级菜单当前是否处于显示状态

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        iv_icon_home = (ImageView) findViewById(R.id.iv_icon_home);
        iv_icon_menu = (ImageView) findViewById(R.id.iv_icon_menu);

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

        iv_icon_home.setOnClickListener(this);
        iv_icon_menu.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.iv_icon_menu:// 二级菜单Menu的点击事件
            if (isLevel3Show) {
                // 三级菜单当前处于显示状态,关闭三级菜单
                MyUtils.startAnimationOut(rl_level3, 0);
                isLevel3Show = false;
            } else {
                // 三级菜单当前处于关闭状态,显示三级菜单
                MyUtils.startAnimationIn(rl_level3, 0);
                isLevel3Show = true;
            }
            break;
        case R.id.iv_icon_home:// 一级级菜单Home的点击事件
            if (isLevel2Show && isLevel3Show) {
                // 二级和三级菜单当前都处于显示状态,则依次关闭三级菜单,二级菜单
                MyUtils.startAnimationOut(rl_level3, 0);
                MyUtils.startAnimationOut(rl_level2, 200);
                isLevel2Show = false;
                isLevel3Show = false;
            } else if (isLevel2Show) {
                // 二级菜单当前处于显示状态,三级菜单当前处于关闭状态,关闭二级菜单
                MyUtils.startAnimationOut(rl_level2, 0);
                isLevel2Show = false;
            } else {
                // 二级菜单当前处于关闭状态,显示二级菜单
                MyUtils.startAnimationIn(rl_level2, 0);
                isLevel2Show = true;
            }
            break;

        default:
            break;
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU) {
            if (isLevel1Show) {
                // 一级菜单当前处于显示状态,关闭一级,二级,三级菜单
                if (isLevel3Show) {// 三级菜单当前处于显示状态,则一级,二级也处于显示状态
                    MyUtils.startAnimationOut(rl_level3, 0);
                    MyUtils.startAnimationOut(rl_level2, 200);
                    MyUtils.startAnimationOut(rl_level1, 300);
                    isLevel1Show = false;
                    isLevel2Show = false;
                    isLevel3Show = false;
                } else if (isLevel2Show) {// 二级菜单当前处于显示状态,则一级也处于显示状态
                    MyUtils.startAnimationOut(rl_level2, 0);
                    MyUtils.startAnimationOut(rl_level1, 200);
                    isLevel1Show = false;
                    isLevel2Show = false;
                } else {
                    MyUtils.startAnimationOut(rl_level1, 0);
                    isLevel1Show = false;
                }
            } else {
                // 一级菜单当前处于关闭状态,显示一级,二级菜单
                MyUtils.startAnimationIn(rl_level1, 0);
                MyUtils.startAnimationIn(rl_level2, 200);
                isLevel1Show = true;
                isLevel2Show = true;
            }
        }
        return super.onKeyDown(keyCode, event);
    }

}
时间: 2024-11-06 01:59:16

Android仿优酷菜单效果的相关文章

Android自定义控件——仿优酷圆盘菜单

尊重作者劳动成果,转载时请标明该文章出自  http://blog.csdn.net/allen315410/article/details/39232535 最近学习的时候,看见一份资料上教怎么写自定义控件,上面的示例用的是优酷早期版本的客户端,该客户端的菜单就是一个自定义的组件(现在的版本就不清楚有没有了,没下载过了),好吧,废话不多说,先上优酷的原型图. 这个自定义组件感官上看是,里外三层设计,每一层上有布置不同的菜单按钮,每一层又设置了进入和退出的动画,来增强用户的体验效果.这种设计非常

仿优酷Android客户端图片左右滑动(自动滑动)

最终效果: 页面布局main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent

android自定义控件之模仿优酷菜单

去年的优酷HD版有过这样一种菜单,如下图: 应用打开之后,先是三个弧形的三级菜单,点击实体键menu之后,这三个菜单依次旋转退出,再点击实体键menu之后,一级菜单会旋转进入,点击一级菜单,二级菜单旋转进入,点击二级菜单的menu键,三级菜单旋转进入,再次点击二级菜单的旋转键,三级菜单又会旋转退出,这时再点击一级菜单,二级菜单退出,最后点击实体menu键,一级菜单退出. 总体来说实现这样的功能: (1)点击实体menu键时,如果界面上有菜单显示,不管有几个,全部依次退出,如果界面上没有菜单显示,

高仿优酷Android客户端图片左右滑动(自动切换)

本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现: 具体思路: 1. 工程中需要添加android-support-v4.jar,才能使用ViewPager控件. 2. 图片的自动切换: 可使用Timer或者ScheduledExecutorService,这个有多重方式可以实现. 同时要切换底部的dots(园点) 3.Handler+Message机制更新UI,这个相信大家都很熟练,不再描述 4. 实现的一些细节:注意本例中的优

自定义View(一)-ViewGroup实现优酷菜单

自定义View的第一个学习案例 ViewGroup是自动以View中比较常用也比较简单的一种方式,通过组合现有的UI控件,绘制出一个全新的View 效果如下: 主类实现如下: package com.demo.youku; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.K

模仿优酷菜单

转载注明出处:    http://blog.csdn.net/forwardyzk/article/details/42554691 在开发中,会使用菜单,现在模拟一下优酷的菜单效果. 其实效果都是由android基本的动画效果组成的,在合适的时间显示对应的动画,即可展示出不一样的效果. 思路: 1.自定义类RotateMenuView继承RelativeLayout. 2.在需要加载的布局文件中,添加对应的菜单View. 3.定义菜单进入和出去的动画效果,使用旋转动画,进来顺时针,出去的时候

android 仿ppt进入动画效果合集

EnterAnimation android 仿ppt进入动画效果合集, 百叶窗效果,擦除效果,盒状效果,阶梯效果,菱形效果,轮子效果,劈裂效果,棋盘效果, 切入效果,扇形展开效果,十字扩展效果,随机线条效果,向内溶解效果,圆形扩展效果, 适用于各种view和viewgroup,activity即用于页面根部viewgroup, 自定义viewgroup自动换行layout, 看效果图 Series of entrance animation effects just like ppt in A

android之官方导航栏ActionBar(三)之高仿优酷首页

一.问题概述 通过上两篇文章,我们对如何使用ActionBar大致都已经有了认识.在实际应用中,我们更多的是定制ActionBar,那么就需要我们重写或者定义一些样式来修饰ActionBar,来满足具体的需要.我们就以优酷首页为例,一起学习下ActionBar的综合应用. 二.Android系统ActionBar样式的定义 首先,我们先认识一下android系统中是如何定义ActionBar样式的,这里我们以Theme.Holo.Light主题为例,通过源码我们可以看到在该主题中关于Action

Android优酷菜单组件自定义

主要做的就是模仿优酷手机客户端的底部菜单控件的实现.先来几张图片,点击中间的home,显示二级菜单,点击二级菜单的menu,显示三级菜单. 这是实现起来最简单的一个布局,但是从中学会了自定义动画和一些布局的基本知识,从中还是收获很大的. 首先是定义布局文件,三个菜单条其实就是三个relativelayout,level1,level2,level3,然后每个菜单条中的小标题就加到对应的相对布局中. <RelativeLayout xmlns:android="http://schemas.