本文重點討論豎屏狀態下的appbar效果。
不過想防一個appbar的話,有必要了解一下。
1. 視覺尺寸
爲展開狀態,整個appbar寬480高72
每個iconbutton尺寸爲48*48,icon間距爲36(不論有幾個icon)
...其實也是一個button,sdk的icons目錄能找到這張圖。這張圖的尺寸是72*72,但上方有12像素的同名空白,所以視覺效果是和其他icon上對齊的
2. 點擊尺寸
最左邊的72*72以及最右邊的72*72(...按鈕)響應菜單展開事件。
iconbutton的響應尺寸是84*72,這個值是在48*48的基礎上加上Padding(18,12)
3.彈起狀態
高度變爲102像素. icon文字左右各有6像素的縮進。因此描述文字可用空間寬度爲84-12=72像素。對於中文是5個半字,因此icon描述一定不要超過5個字。
按鈕描述文字大概相當於FontSize=14的系統默認字體
AppBar menu 的最多能顯示5個半,超過5個將出現滾動條。
menu文字的FontSize約爲33,上下Padding均12. 左邊的Margin爲24,右邊Margin爲0.
4.收起Appbar
以下操作將起Appbar:
彈出面板之外的任意地方點擊
back硬件鍵
appbar上的任意按鈕有效點擊,包括icon、menu以及上面提到的左右各72*72
以下操作則不會收起:
按鈕上按下 - 拖到按鈕外 - 放開
滾動條滑動(如果菜單超過5個)
無效區域點擊,如菜單左邊的24像素寬的區域、icon欄上空隙部分(如果icon少於4個)