Android优酷菜单组件自定义

主要做的就是模仿优酷手机客户端的底部菜单控件的实现。先来几张图片，点击中间的home，显示二级菜单，点击二级菜单的menu，显示三级菜单。

这是实现起来最简单的一个布局，但是从中学会了自定义动画和一些布局的基本知识，从中还是收获很大的。

首先是定义布局文件，三个菜单条其实就是三个relativelayout，level1，level2，level3，然后每个菜单条中的小标题就加到对应的相对布局中。

<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"tools:context="com.test.youku.MainActivity$PlaceholderFragment" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/hello_world" /><RelativeLayout android:id="@+id/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/icon_home"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:background="@drawable/icon_home"/></RelativeLayout><RelativeLayout android:id="@+id/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/icon_search"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_margin="10dp"android:background="@drawable/icon_search"/><ImageView android:id="@+id/icon_menu"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:background="@drawable/icon_menu"/><ImageView android:id="@+id/icon_myyouku"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_margin="10dp"android:layout_alignParentRight="true"android:background="@drawable/icon_myyouku"/></RelativeLayout><RelativeLayout android:id="@+id/level3"android:layout_width="280dp"android:layout_height="145dp"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:background="@drawable/level3"><ImageView android:id="@+id/channel1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginLeft="10dp"android:layout_marginBottom="10dp"android:background="@drawable/channel1"/><ImageViewandroid:id="@+id/channel2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_above="@id/channel1"android:layout_alignLeft="@id/channel1"android:layout_marginBottom="6dp"android:layout_marginLeft="20dp"android:background="@drawable/channel2" /><ImageViewandroid:id="@+id/channel3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@id/channel2"android:layout_alignLeft="@id/channel2"android:layout_marginBottom="6dp"android:layout_marginLeft="30dp"android:background="@drawable/channel3" /><ImageViewandroid:id="@+id/channel4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_marginTop="5dp"android:background="@drawable/channel4" /><ImageView android:id="@+id/channel7"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/channel7"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"android:layout_marginBottom="10dp"android:layout_marginRight="10dp"/><ImageViewandroid:id="@+id/channel6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@id/channel7"android:layout_alignRight="@id/channel7"android:layout_marginBottom="6dp"android:layout_marginRight="20dp"android:background="@drawable/channel6" /><ImageViewandroid:id="@+id/channel5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@id/channel6"android:layout_alignRight="@id/channel6"android:layout_marginBottom="6dp"android:layout_marginRight="30dp"android:background="@drawable/channel5" /></RelativeLayout></RelativeLayout>

然后就是进入进出动画的定义：

因为是旋转进入，所有要定义一个RotateAnimation，并进行配置：

import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;public class MyUtils {/*** 让指定的view 执行 旋转离开的动画* @param view*/public static void startAnimOut(RelativeLayout view) {startAnimOut(view, 0);}/*** 让指定view 延时 执行旋转离开的动画，* @param level3* @param offset   延时的时间*/public static void startAnimOut(RelativeLayout view, long offset) {/** 默认圆为 为view的左上角，* 水平向右 为 0度* 顺时针旋转度数增加*/RotateAnimation animation  =new RotateAnimation(0, 180, view.getWidth()/2, view.getHeight());animation.setDuration(500);   //  设置运行的时间animation.setFillAfter(true);    //动画执行完以后，保持最后的状态animation.setStartOffset(offset);   // 设置延时执行的时间view.startAnimation(animation);}/*** 让指定的view 执行 旋转进入的动画* @param view*/public static void startAnimIn(RelativeLayout view) {startAnimIn(view, 0);}/*** 让指定的view 延时执行 旋转进入的动画* @param level2* @param i    延时的时间*/public static void startAnimIn(RelativeLayout view, int i) {/** 默认圆为 为view的左上角，* 水平向右 为 0度* 顺时针旋转度数增加*/RotateAnimation animation  =new RotateAnimation(180, 360, view.getWidth()/2, view.getHeight());animation.setDuration(500);    //  设置运行的时间animation.setFillAfter(true);    //动画执行完以后，保持最后的状态animation.setStartOffset(i);    //设置延时执行的时间view.startAnimation(animation);}}

最后就是空间显示的主类了，这个类没什么难的，就是根据逻辑，调用上面写得进入进出动作，要注意逻辑的清晰：

public class MainActivity extends Activity implements OnClickListener {private ImageView icon_menu;private ImageView icon_home;private RelativeLayout level1;private RelativeLayout level2;private RelativeLayout level3;/*** 判断 第3级菜单是否显示* true 为显示*/private boolean isLevel3Show = true;/*** 判断 第2级菜单是否显示* true 为显示*/private boolean isLevel2Show = true;/*** 判断 第1级菜单是否显示* true 为显示*/private boolean isLevel1show = true;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);icon_home = (ImageView) findViewById(R.id.icon_home);icon_menu = (ImageView) findViewById(R.id.icon_menu);level1 = (RelativeLayout) findViewById(R.id.level1);level2 = (RelativeLayout) findViewById(R.id.level2);level3 = (RelativeLayout) findViewById(R.id.level3);icon_home.setOnClickListener(this);icon_menu.setOnClickListener(this);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.icon_menu: //处理 menu 图标的点击事件// 如果第3级菜单是显示状态，那么将其隐藏if(isLevel3Show){//隐藏 第3级菜单MyUtils.startAnimOut(level3);}else{// 如果第3级菜单是隐藏状态，那么将其显示MyUtils.startAnimIn(level3);}isLevel3Show = !isLevel3Show;break;case R.id.icon_home:  //处理 home 图标 的点击事件// 如果第2级菜单是显示状态，那么就隐藏，2，3级菜单if(isLevel2Show ){MyUtils.startAnimOut(level2);isLevel2Show = false;if(isLevel3Show){ // 如果此时，第3级菜单也显示，那也将其隐藏MyUtils.startAnimOut(level3,200);isLevel3Show = false;}}else{// 如果第2级菜单是隐藏状态，那么就显示2级菜单MyUtils.startAnimIn(level2);isLevel2Show = true;}break;}}/*** 改变第1级菜单的状态*/private void changeLevel1State() {//如果第1级菜单是显示状态，那么就隐藏 1，2，3级菜单 if(isLevel1show){MyUtils.startAnimOut(level1);isLevel1show = false;if(isLevel2Show){ // 判断2级菜单是否显示MyUtils.startAnimOut(level2,100);isLevel2Show = false;if(isLevel3Show){ // 判断3级菜单是否显示MyUtils.startAnimOut(level3,200);isLevel3Show = false;}}}else{//如果第1级菜单是隐藏状态，那么就显示 1，2级菜单 MyUtils.startAnimIn(level1);isLevel1show = true;MyUtils.startAnimIn(level2,200);isLevel2Show = true;}}@Override/*** 响应按键的动作*/public boolean onKeyDown(int keyCode, KeyEvent event) {if(keyCode == KeyEvent.KEYCODE_MENU){ // 监听 menu 按键changeLevel1State();}return super.onKeyDown(keyCode, event);}}

最后最后，感觉自定义组件还是很强大很炫的，明天继续学习总结这方面的知识。。睡觉。。

Android优酷菜单组件自定义相关推荐

Android自定义控件：优酷菜单
优酷菜单常用控件回顾布局文件实现代码处理逻辑解决bug的两种方法(ViewGroup和属性动画) 常用控件回顾按钮控件(Button和ImageButton) ImageButton继承自I ...
android的优酷菜单,Android利用属性动画实现优酷菜单
利用属性动画实现优酷菜单,供大家参考,具体内容如下布局文件 xmlns:tools="http://schemas.android.com/tools" android:layo ...
android仿优酷菜单,Android自定义控件之仿优酷菜单
去年的优酷HD版有过这样一种菜单,如下图: 应用打开之后,先是三个弧形的三级菜单,点击实体键menu之后,这三个菜单依次旋转退出,再点击实体键menu之后,一级菜单会旋转进入,点击一级菜单,二级菜单旋 ...
android自定义控件之模仿优酷菜单
去年的优酷HD版有过这样一种菜单,如下图: 应用打开之后,先是三个弧形的三级菜单,点击实体键menu之后,这三个菜单依次旋转退出,再点击实体键menu之后,一级菜单会旋转进入,点击一级菜单,二级菜单旋 ...
Android优酷播放器SDK——Eclipse工程迁移Android Studio遇到问题
Android优酷播放器SDK--Eclipse工程迁移Android Studio遇到问题希望大家看完本文章能解决遇到的问题,如果没有表明清楚问题所在,还望指点一二: 下载优酷视频播放器SDK 导 ...
android仿优酷菜单,Android编程实现仿优酷旋转菜单效果(附demo源码)
本文实例讲述了Android编程实现仿优酷旋转菜单效果.分享给大家供大家参考,具体如下: 首先,看下效果: 不好意思,不会制作动态图片,只好上传静态的了,如果谁会,请教教我吧. 首先,看下xml文件: ...
Android仿酷狗音乐自定义侧滑菜单控件简单实现
随着Android的不断成熟,许多绚丽的效果也在不断的被大家开发出来,其中侧滑的效果用到的项目很多,用的好的更是给吸引了很多用户.国内像QQ和酷狗App的侧滑就很给力,所以查了一些资料,并结合View ...
android 优酷自动全屏播放,Android如何实现仿优酷视频的悬浮窗播放效果
Android如何实现仿优酷视频的悬浮窗播放效果发布时间:2020-07-11 10:24:43 来源:亿速云阅读:228 作者:清晨这篇文章主要介绍Android如何实现仿优酷视频的悬浮窗播放 ...
android 优酷自动全屏播放,Android用Webview播放优酷视频全屏问题
在播放优酷视频, 点击全屏的时候, 会黑屏, 而不显示需要全屏的view 试过各种方法, 发现有一些细节需要注意: 1. demo的Manifest Activity需要设置为: 全屏, 横屏 and ...

Android优酷菜单组件自定义

Android优酷菜单组件自定义相关推荐

最新文章

热门文章