android應用開發-從設計到實作 3-5 靜态原型的Appbar

靜态原型的Appbar

我們設計的

Appbar

包括了兩個部分，一個是

toolbar

，另一個就是

flexible space

-顯示當日天氣的詳細資訊，

Toolbar參數确定

添加

Toolbar

很簡單，首先找到

Material Design

中對

Appbar

的描述可以知道，

1. 這是一個高度為

   56dp

   的矩形區域；
2. 當

   Appbar

   收縮時，應用的名字會顯示出來，

   

   注意：這裡顯示的是中文-

   Dense

   類型的文字，是以文字的大小比英文要大1sp。

   

添加Toolbar

先添加區域，

1. 選擇

   Insert -> Shape -> Rectangle

   (或者快捷按鍵R)；
2. 在期望的位置，拖動出一個56px*360px的矩形框；拖動的過程中，矩形尺寸會動态的顯示出來；

   

   此時畫闆上已經多出了一個叫做

   Rectangle

   的形狀。
3. 假如尺寸有偏差也沒有關系，可以通過修改

   屬性區域

   的高寬數值，進行精确的修改

   

4. 修改背景顔色為

   Primary Color

   ：#3F51B5，

   

接下來添加應用名稱：這裡要顯示的并不是應用的真實名稱，而是天氣預報的位置，

1. 選擇

   Insert -> Text

   (或者快捷按鍵T)；
2. 在

   Toolbar

   的大緻位置進行點選，寫下位置名稱-

   成都

   ；此時畫闆上多出了

   Text

   元件；
3. 修改新元件的屬性為，

   

4. 選中

   Rectangle

   和

   成都

   元件，使用cmd + G，将其組合成

   Toolbar

   

再來進行标題位置的設定，

1. 選擇

   Toolbar

   下的所有元件，點選

   垂直對齊

   的按鈕，

   

2. 标題的左邊距是16dp，選中

   成都

   ，同時按下

   alt

   按鍵，可以看到

   成都

   上下左右的邊距大小，使用方向鍵調整左邊距的大小即可，

   

因為此時并不需要顯示位置資訊，是以要點選

成都

元件旁邊的

眼睛

按鈕，把内容隐藏起來。

使用

alt

檢視元件的邊距是一個常用的技巧，檢視的同時，如果移動滑鼠到不同的區域，就能看到元件相對于不同區域的邊距數值，這讓我們在排版的時候非常的友善。

至此，

Toolbar

的設定就完成了。

天氣詳情區域參數設定

天氣詳情區域由三個部分組成，

1. 天氣圖示；
2. 目前溫度，當日溫度範圍；
3. 位置資訊；

整體設計上講，天氣詳情區域、Toolbar和狀态欄都是整體的藍色，占據整個螢幕空間的一半。是以這裡将天氣詳情區域的高度，設計成

245dp

，它内部的元素都布局在360dp*245dp的區域範圍内。

圖示和溫度的設計是比較自由的，隻要設計師覺得美觀就好了。我将它們放在兩個150dp*100dp的矩形當中，讓它們的左、右、上邊距都成為

24dp

。

目前溫度，采用

Display 3

的類型，

項目	數值
字型	Noto
字形	Regular
大小	56sp
顔色	FFFFFF
透明度	70%

當日溫度範圍，采用

Headline

的類型，

項目	數值
字型	Noto
字形	Regular
大小	24sp
顔色	FFFFFF
透明度	100%

位置資訊，采用

Display 1

的類型，

項目	數值
字型	Noto
字形	Regular
大小	34sp
顔色	FFFFFF
透明度	100%
左邊距	24dp
下邊距	24dp

注意：

Noto

字型和

Roboto

字型對于

English-like

是相容的，是以當表示數字、英文字母的時候，兩者都可以使用。

添加天氣詳情

根據之前的規劃，劃出360px*245px的矩形區域，背景色修改成

Primary Color

：#3F51B5。預設情況下建立的矩形會有

border

，我們将它移出，

1. 建立兩個150dp*100dp的矩形，準備用它們分别裝入天氣圖示和溫度資訊;
2. 将新建立的矩形和

   bg

   進行組合；

調整兩者頂部和左右的邊距為

24dp

，

添加天氣圖示

引入天氣圖示，

1. 打開之前準備好的資源檔案夾，把晴間多雲的圖示-

   陰晴

   拖入

   工作區域

   ，尺寸設定成120dp*100dp；
2. 将剛引入的

   陰晴

   與之前的

   weather icon bg

   組合成一個新的元件-

   Weather icon

   ，并将

   陰晴

   水準居中放置，

   

3. 展開

   陰晴

   ，修改其顔色成

   Accent Color

   ：#FFC107，

   

4. 移除

   weather icon bg

   的背景顔色，

   

在對圖示進行居中設定的時候，需要選中

陰晴

和

weather icon bg

，使用

水準居中對齊

功能。

weather icon bg

在這裡充當了被對齊的參照物，在使用

Sketch

設計的時候，經常需要添加一個這樣的輔助設計元素。

添加溫度資訊

使用快捷按鍵T，在相應的位置，添加兩個文字輸入區域，寫上對應的内容，并設定好對應的字型屬性。

對元件結構進行調整，

對文字進行水準居中的排列，并移除背景的顔色，

添加位置

在适當的位置，添加一個Text元件，寫入

成都

，做好設定，

注意，它的左邊距和下邊距都是

24dp

。

至此，整個Appbar的内容就添加完畢了。

本文是《從設計到實作-手把手教你做android應用開發》系列文檔中的一篇。感謝您的閱讀和回報，對本文有任何的意見和建議請留言，我都會盡量一一回複。

如果您覺得本文對你有幫助，請推薦給更多的朋友；或者加入我們的QQ群348702074和更多的小夥伴一起讨論；也希望大家能給我出出主意，讓這些文檔能講的更好，能最大化的幫助到希望學習開發的夥伴們。

除了CSDN釋出的文章，本系列最新的文章将會首先釋出到我的專屬部落格book.anddle.com。大家可以去那裡先睹為快。

同時也歡迎您光顧我們在淘寶的網店安豆的雜貨鋪。店中的積木可以搭配成智能LED燈，相關的配套文檔也可以在這裡看到。

這些相關硬體都由我們為您把關購買，為大家節省選擇的精力與時間。同時也感謝大家對我們這些碼農的支援。

最後再次感謝各位讀者對

安豆

的支援，謝謝:)