Android UI-底部旋转菜单栏
以前都是说每逢佳节倍思亲,现在的工作状态是每到周末倍亲切,年底真的是加班加的没完没了的,也没时间写博客,也没时间学习,周末闲来无事看到一个比较有意思的旋转菜单,没事自己实战了一下感觉还不错,代码倒是没什么,主要是有两个技术点,一个就是布局文件,第二个就是动画旋转,关于布局文件是仁者见仁智者见智,只能自己研究,动画的话之前写过这方面的文章有兴趣的可以看下本人之前的博客,开始正题吧:
基础布局
先看下要实现的效果吧:
下面的主要是三个图片,一个半圆,两个版圆环,最外面的是三级菜单,中间的是二级菜单;
一级菜单布局:
<RelativeLayout
android:id="@+id/menuFirst"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/menu1" > <ImageView
android:id="@+id/icon_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/icon_home" />
</RelativeLayout>
二级菜单布局:
<RelativeLayout
android:id="@+id/menuSecond"
android:layout_width="170dp"
android:layout_height="90dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/menu2" > <ImageView
android:id="@+id/icon_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="8dp"
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:layout_marginTop="5dp"
android:background="@drawable/icon_menu" /> <ImageView
android:id="@+id/icon_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="8dp"
android:background="@drawable/icon_center" />
</RelativeLayout>
三级菜单布局,这个布局的时候需要注意的是左边的三个图片设置完之后,设置的是对称方向的最底部的一个图片,以此为依据搞定其他两个图标:
<RelativeLayout
android:id="@+id/menuThird"
android:layout_width="270dp"
android:layout_height="140dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/menu3" > <ImageView
android:id="@+id/channel1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:background="@drawable/channel1" /> <ImageView
android:id="@+id/channel2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/channel1"
android:layout_alignLeft="@id/channel1"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:background="@drawable/channel2" /> <ImageView
android: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="8dp"
android:layout_marginLeft="30dp"
android:background="@drawable/channel3" /> <ImageView
android: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:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:background="@drawable/channel7" /> <ImageView
android: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="8dp"
android:layout_marginRight="20dp"
android:background="@drawable/channel6" /> <ImageView
android: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="8dp"
android:layout_marginRight="30dp"
android:background="@drawable/channel5" />
</RelativeLayout>
实现Demo
主要实现的主要就是两个按钮,一个按钮式最底层的按钮,一个是二级菜单的按钮:
homeView = (ImageView) findViewById(R.id.icon_home);
menuView = (ImageView) findViewById(R.id.icon_menu);
menuFirst = (RelativeLayout) findViewById(R.id.menuFirst);
menuSecond = (RelativeLayout) findViewById(R.id.menuSecond);
menuThird = (RelativeLayout) findViewById(R.id.menuThird);
homeView.setOnClickListener(this);
menuView.setOnClickListener(this);
两个按钮的点击事件:
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.icon_home:
if (isSecond) {
MyHelper.StartAninationOut(menuSecond,500,200);
if (isThird) {
MyHelper.StartAninationOut(menuThird,500,300);
isThird=false;
}
}else {
MyHelper.StartAninationIn(menuSecond,500,300);
}
isSecond=!isSecond;
break;
case R.id.icon_menu:
if (isThird) {
MyHelper.StartAninationOut(menuThird,500,200);
isThird=false;
}else {
MyHelper.StartAninationIn(menuThird,500,200);
isThird=true;
}
break;
default:
break;
}
}
两个按钮都有点击点击事件,封装一个可以主要就是淡入和淡出的效果:
public class MyHelper { public static void StartAninationIn(RelativeLayout layout,long duratoin,long offset) {
// TODO Auto-generated method stub
RotateAnimation rotateAnimation=new RotateAnimation(180, 360, layout.getWidth()/2, layout.getHeight());
rotateAnimation.setDuration(duratoin);
rotateAnimation.setFillAfter(true);//保持旋转之后的状态
rotateAnimation.setStartOffset(offset);//延迟加载时间
layout.startAnimation(rotateAnimation);
} public static void StartAninationOut(RelativeLayout layout,long duratoin,long offset) {
// TODO Auto-generated method stub
RotateAnimation rotateAnimation=new RotateAnimation(0, 180, layout.getWidth()/2, layout.getHeight());
rotateAnimation.setDuration(duratoin);
rotateAnimation.setFillAfter(true);
rotateAnimation.setStartOffset(offset);
layout.startAnimation(rotateAnimation);
} }
最后看下效果图:
链接: http://pan.baidu.com/s/1jGh3Qse 密码: wilw
Android UI-底部旋转菜单栏的更多相关文章
- [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)
http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...
- Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡...)
众所周知,想要让ImageView旋转的话,可以用setRotation()让其围绕中心点旋转,但这个旋转是不带动画的,也就是旋转屏幕时图片噌的一下就转过去了,看不到旋转的过程,此UI体验不大好,为此 ...
- Android UI设计
Android UI设计--PopupWindow显示位置设置 摘要: 当点击某个按钮并弹出PopupWindow时,PopupWindow左下角默认与按钮对齐,但是如果PopupWindow是下图的 ...
- GitHub上受欢迎的Android UI Library
GitHub上受欢迎的Android UI Library 内容 抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayout 图标 下拉刷新 Vi ...
- Android UI相关开源项目库汇总
最近做了一个Android UI相关开源项目库汇总,里面集合了OpenDigg 上的优质的Android开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个st ...
- 各种Android UI开源框架 开源库
各种Android UI开源框架 开源库 转 https://blog.csdn.net/zhangdi_gdk2016/article/details/84643668 自己总结的Android开源 ...
- Android UI性能测试——使用 Gfxinfo 衡量性能
Android官方文档翻译 原文地址:https://developer.android.com/training/testing/performance参考:https://www.jianshu. ...
- iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸
iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸 iPhone界面尺寸 设备 分辨 ...
- Android应用底部导航栏(选项卡)实例
现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...
随机推荐
- 前端安全系列之二:如何防止CSRF攻击?
背景 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点.在移动互联网时代,前端人员除了传统的 XSS.CSRF 等安全问题之外,又时常遭遇网络劫持 ...
- hdu 2275 Kiki & Little Kiki 1 水题
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2275 这个题比较简单,所以就没有测试样例提供给大家,基本把题目的样例过了就可以了 题目大意 给你一串操作, ...
- [Hdu4372] Count the Buildings
[Hdu4372] Count the Buildings Description There are N buildings standing in a straight line in the C ...
- nginx安装第三方模块
原已经安装好的nginx,现在需要添加一个未被编译安装的模块 举例说明:安装第三方的ngx_cache_purge模块(用于清除指定URL的缓存) nginx的模块是需要重新编译nginx,而不是像a ...
- pear中几个实用的xml代码库
1.XML_Beautifier 用于将一段排版凌乱的XML文档美化 <?php require_once "XML/Beautifier.php"; $fmt = new ...
- 彻底解决每次打开visio都提示windows正在配置visio的问题
出现这个提示windows正在配置XXX软件的问题,是由于在安装一个新的版本时,之前那个版本的office没有完全卸载,注册表内有残留. 最简单的方式,并不是 把HKEY_CURRENT_USER\S ...
- PowerDesigner导出表为Excel(转)
打开脚本运行器Ctrl+Shift+X 导出: '*************************************************************************** ...
- http://qurtyy.blog.163.com/blog/static/5744368120130221419244/
我们先来看它的思路:把控制不透明度和控向上移动的动画分别存储在两个队列中,控制向上移动的队列按默认情况进行(在2000毫秒内完成),而不透明度的控制在1000毫秒内执行,但这个队列要晚于默认队列100 ...
- Python threads synchronization: Locks, RLocks, Semaphores, Conditions, Events and Queues(Forwarding)
This article describes the Python threading synchronization mechanisms in details. We are going to s ...
- SPOJ 1811. Longest Common Substring (LCS,两个字符串的最长公共子串, 后缀自动机SAM)
1811. Longest Common Substring Problem code: LCS A string is finite sequence of characters over a no ...