基于Android的衛(wèi)星式菜單設(shè)計與實現(xiàn)

馬杰++陳冬明

摘 要

本文基于Android實現(xiàn)一款衛(wèi)星式菜單，通過坐標(biāo)運(yùn)算實現(xiàn)屏幕自適應(yīng)，使用ImageView組件作為主菜單，給出了子菜單的角度及坐標(biāo)計算方法，并通過Animation動畫實現(xiàn)菜單的動畫路徑、縮放操作，增加界面的友好性。

【關(guān)鍵詞】Android 衛(wèi)星式菜單 動畫

當(dāng)前，智能手機(jī)已經(jīng)成為隨身攜帶的計算機(jī)以及人與人之間時刻保持聯(lián)系的重要媒介，手機(jī)應(yīng)用軟件豐富多彩，且還處在爆發(fā)式增長的過程中，由于手機(jī)界面小、規(guī)格不一，如何在手機(jī)界面上增加交互式設(shè)計、提高用戶體驗感對于手機(jī)應(yīng)用開發(fā)具有重要意義。

1 衛(wèi)星式菜單簡介

衛(wèi)星式菜單有一個主菜單View圖標(biāo)，可以全部或者部分顯示在屏幕下方，用戶點擊該圖標(biāo)時，子菜單以動畫效果彈出顯示在主菜單四周，呈衛(wèi)星式分布，當(dāng)用戶再次點擊主菜單圖標(biāo)時，子菜單圖標(biāo)以動畫效果隱藏。衛(wèi)星式菜單可以作為應(yīng)用軟件的主菜單或者上下文菜單，它實現(xiàn)了分層利用屏幕空間、增加用戶體驗感的效果。

2 衛(wèi)星式菜單的實現(xiàn)

2.1 屏幕自適應(yīng)及主菜單實現(xiàn)

手機(jī)的屏幕尺寸多樣，為了防止在不同的手機(jī)屏幕上，主菜單的位置出現(xiàn)偏差，需要首先解決屏幕適配的問題。主菜單放置在當(dāng)前屏幕左上角、左下角、右上角、右下角的計算方式分別是：

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）

例如，右下角放置主菜單時的坐標(biāo)及參數(shù)示意如圖1所示，menu（X，Y）作為主菜單的起始位置，也可以根據(jù)需要縮進(jìn)一些位置。

主菜單基于ImageView組件來實現(xiàn)。通過自定義ImageView的src屬性添加主菜單圖片，需要修改時可以直接改變src屬性即可。

2.2 子菜單實現(xiàn)

子菜單圍繞在主菜單周圍呈90°扇形排列。扇形半徑可以根據(jù)需要自定義，然后通過TypedArray對象來獲取。設(shè)置菜單1的坐標(biāo)為（0，R），則子菜單n的偏移角度計算公式為：（n-1）*[90°/（count-1）]，其中count為預(yù)定義的子菜單總個數(shù)，示意圖如圖2。根據(jù)三角函數(shù)運(yùn)算，可以得出子菜單n的坐標(biāo)計算公式為：

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動畫實現(xiàn)菜單展開、收攏功能

通過給單個子菜單添加從主菜單位置到它偏移位置的移動路徑，可以實現(xiàn)子菜單從主菜單中展開的效果，反之，可以實現(xiàn)子菜單的收攏的效果?？梢曰贏ndroid提供的Animation動畫實現(xiàn)該效果，子菜單隱藏和顯示由AlphaAnimation實現(xiàn)，運(yùn)動效果由TranslateAnimation實現(xiàn)。先由AlphaAnimation動畫降低子菜單的透明度，再執(zhí)行TranslateAnimation動畫，這樣才能顯示出子菜單展開的位移軌跡。相反，兩個動畫的先后順序要互換才能顯示出子菜單的收攏效果。同時，可以通過RotateAnimation旋轉(zhuǎn)和ScaleAnimation縮放組合實現(xiàn)子菜單的放大/縮小、旋轉(zhuǎn)效果，增加用戶界面友好性。

3 衛(wèi)星式菜單應(yīng)用

在應(yīng)用軟件開發(fā)中，需要較多的菜單選項。通過使用衛(wèi)星式菜單，既能解決菜單在屏幕占用上的問題，還能豐富用戶體驗，具有較好的應(yīng)用效果，如圖3所示。

4 總結(jié)

衛(wèi)星式菜單在屏幕大小受限的手機(jī)終端上具有實現(xiàn)多層次空間利用、顯示效果友好的特點，在應(yīng)用開發(fā)中自定義一個完整的衛(wèi)星式菜單，可以改善當(dāng)前菜單顯示效果，具有良好的復(fù)用性和借鑒意義。

參考文獻(xiàn)

[1]吳俊，莫雷.智能手機(jī)交互設(shè)計的分層視覺模型[J].包裝工程.2013，34（03）：14-17.

[2]崔天劍，董甜甜.交互界面功能性擴(kuò)展設(shè)計研究：以智能手機(jī)為例[J].南京藝術(shù)學(xué)院學(xué)報（美術(shù)與設(shè)計），2015（05）：206-210.

[3]朱婧茜，何人可.Android手機(jī)應(yīng)用界面布局的可用性測試研究[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設(shè)計.盛青，譚春波：譯[M].北京：清華大學(xué)出版社，2016.

作者簡介

馬杰（1983-），現(xiàn)為海南軟件職業(yè)技術(shù)學(xué)院副教授、軟件設(shè)計師。主要研究方向為移動計算、軟件工程。

作者單位

海南軟件職業(yè)技術(shù)學(xué)院 海南省瓊海市 571400