基于Android的卫星式菜单设计与实现
摘 要
本文基于Android实现一款卫星式菜单,通过坐标运算实现屏幕自适应,使用ImageView组件作为主菜单,给出了子菜单的角度及坐标计算方法,并通过Animation动画实现菜单的动画路径、缩放操作,增加界面的友好性。
【关键词】Android 卫星式菜单 动画
当前,智能手机已经成为随身携带的计算机以及人与人之间时刻保持联系的重要媒介,手机应用软件丰富多彩,且还处在爆发式增长的过程中,由于手机界面小、规格不一,如何在手机界面上增加交互式设计、提高用户体验感对于手机应用开发具有重要意义。
1 卫星式菜单简介
卫星式菜单有一个主菜单View图标,可以全部或者部分显示在屏幕下方,用户点击该图标时,子菜单以动画效果弹出显示在主菜单四周,呈卫星式分布,当用户再次点击主菜单图标时,子菜单图标以动画效果隐藏。卫星式菜单可以作为应用软件的主菜单或者上下文菜单,它实现了分层利用屏幕空间、增加用户体验感的效果。
2 卫星式菜单的实现
2.1 屏幕自适应及主菜单实现
手机的屏幕尺寸多样,为了防止在不同的手机屏幕上,主菜单的位置出现偏差,需要首先解决屏幕适配的问题。主菜单放置在当前屏幕左上角、左下角、右上角、右下角的计算方式分别是:
menu(X,Y)=(0,0)
menu(X,Y)=(screen.height–menu.height,0)
menu(X,Y)=(0,screen.width–menu.width)
menu(X,Y)=(screen.height– menu.height,screen.width– menu.width)
例如,右下角放置主菜单时的坐标及参数示意如图1所示,menu(X,Y)作为主菜单的起始位置,也可以根据需要缩进一些位置。
主菜单基于ImageView组件来实现。通过自定义ImageView的src属性添加主菜单图片,需要修改时可以直接改变src属性即可。
2.2 子菜单实现
子菜单围绕在主菜单周围呈90°扇形排列。扇形半径可以根据需要自定义,然后通过TypedArray对象来获取。设置菜单1的坐标为(0,R),则子菜单n的偏移角度计算公式为:(n-1)*[90°/(count-1)],其中count为预定义的子菜单总个数,示意图如图2。根据三角函数运算,可以得出子菜单n的坐标计算公式为:
Xn=R*sin∠a=R* sin[90°/(count-1)*(n-1)]
Yn= R* cos∠a=R* cos [90°/(count-1)*(n-1)]
2.3 基于Animation动画实现菜单展开、收拢功能
通过给单个子菜单添加从主菜单位置到它偏移位置的移动路径,可以实现子菜单从主菜单中展开的效果,反之,可以实现子菜单的收拢的效果。可以基于Android提供的Animation动画实现该效果,子菜单隐藏和显示由AlphaAnimation实现,运动效果由TranslateAnimation实现。先由AlphaAnimation动画降低子菜单的透明度,再执行TranslateAnimation动画,这样才能显示出子菜单展开的位移轨迹。相反,两个动画的先后顺序要互换才能显示出子菜单的收拢效果。同时,可以通过RotateAnimation旋转和ScaleAnimation缩放组合实现子菜单的放大/缩小、旋转效果,增加用户界面友好性。
3 卫星式菜单应用
在应用软件开发中,需要较多的菜单选项。通过使用卫星式菜单,既能解决菜单在屏幕占用上的问题,还能丰富用户体验,具有较好的应用效果,如图3所示。
4 总结
卫星式菜单在屏幕大小受限的手机终端上具有实现多层次空间利用、显示效果友好的特点,在应用开发中自定义一个完整的卫星式菜单,可以改善当前菜单显示效果,具有良好的复用性和借鉴意义。
参考文献
[1]吴俊,莫雷.智能手机交互设计的分层视觉模型[J].包装工程.2013,34(03):14-17.
[2]崔天剑,董甜甜.交互界面功能性扩展设计研究:以智能手机为例[J].南京艺术学院学报(美术与设计),2015(05):206-210.
[3]朱婧茜,何人可.Android手机应用界面布局的可用性测试研究[J].包装工程,2014,35(10):61-64.
[4]Bill Phillips, Chris Stewart, Brian Hardy ,et al. Android Programming:the Big Nerd Ranch Guide,second Edition[M].北京:人民邮电出版社,2016.
[5]Wallace Jackson著.精通Android UI设计.盛青,谭春波:译[M].北京:清华大学出版社,2016.
作者简介
马杰(1983-),现为海南软件职业技术学院副教授、软件设计师。主要研究方向为移动计算、软件工程。
作者单位
海南软件职业技术学院 海南省琼海市 571400