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实例的框架图: 其 ...
随机推荐
- 模板优化 运用 function 及 外部模板
我们都知道模板是泛型的,但是,它一旦被实例化就会产生一个实例化的副本. 好了,大家应该能够猜到,低效模板和高效模板的差异了 一般的低效模板: 1.泛型实参表达形式多样导致的低效模板 2.多文件引用同一 ...
- Alter GDG limit
//JOBCARD... //*-------------------------------------------------------------------* //* Alter GDG l ...
- 图形文件元数据管理工具exiv2
图形文件元数据管理工具exiv2 图形文件通常都包含多种元数据,如Exif.IPTC.XMP.这些信息往往是渗透人员收集的目标.为了便于管理这些信息,Kali Linux内置了专用工具exiv2. ...
- Linux内核中断处理机制
<什么是中断> 计算停下当前处理任务,并保存现场,转而去处理其他是任务,当完成任务后再回到原来的任务中去. <中断的分类> a:软中断 软中断时执行中断指令产生的,软中 ...
- [BZOJ4700]适者(CDQ分治+DP/李超线段树)
如果没有秒杀,就是经典的国王游戏问题,按t/a从小到大排序即可. 考虑删除两个数i<j能给答案减少的贡献:S[i]*T[i]+P[i-1]*A[i]-A[i]+S[j]*T[j]+P[j-1]* ...
- [BZOJ4881][Lydsy1705月赛]线段游戏
首先冷静一下看清问题的本质,是将整个数列分成两个递增子序列. 那么由Dilworth定理得,无解当且仅当数列的最长下降子序列的长度>2,先特判掉. 然后就有一些比较厉害的做法:http://ww ...
- 中国气象局某分院官网漏洞打包(弱口令+SQL注入+padding oracle)
漏洞一.后台弱口令 后台地址:http://www.hnmatc.org/admin/ 直接爆破得到账号admin 密码admin888 漏洞二.SQL注入(前台后台都有) 注入点:http://w ...
- hdu 2197 推公式
题意:由0和1组成的串中,不能表示为由几个相同的较小的串连接成的串,称为本原串,有多少个长为n(n<=100000000)的本原串?答案mod2008.例如,100100不是本原串,因为他是由两 ...
- 【NOIP2014】生活大爆炸版石头剪刀布
石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一 样,则不分胜负.在<生活大爆炸>第二季第 8 集中出现了一种石头剪刀布的升级版游戏. 升级版游戏在传统的石头剪 ...
- Ajax-验证码
function validateCode(){ var code=document.getElementById("code").value; var spanObj=docum ...