Android頂部標題欄的佈局設計

自定義標題欄

通常我們的活動頁面都會根據需要都會有不同的標題欄需要選擇,一般有兩個場景,一個是統一標題欄,通過引入佈局到活動來進行重復使用,還有一個就是你的活動頁面每個都需要定制的,就不能統一風格瞭。

佈局與九宮格背景圖

下面講講佈局與九宮格的一些搭配。

佈局

常用設計標題欄的佈局都是通過流式佈局來進行的。為什麼呢?是不是覺得有時候流式佈局反而更麻煩一點。標題欄一般都是有控件依賴關系的。為什麼不采用相對佈局呢?相對佈局不就是解決依賴關系的麼?是,但是有個設計的小技巧。相對佈局的確對依賴關系是有很好的適用性。但是要考慮到項目需求的變更。你一開始設計的,可能是覺得位置都合適瞭。但是現在需求變更瞭呢,有些控件需要進行改動的話,是不是發現很麻煩,加入或者刪除都有可能會讓你的佈局全都打亂,需要重新指定依賴關系。

那流式佈局是怎麼完成依賴關系的呢?我們可以給他加個view來進行隔開。通過權重進行分配,一樣可以實現相對佈局的效果。用一個0.1dp高度的view就可以分割開瞭。

在這裡插入圖片描述

當然這也不是絕對的,不是說一定要用流式會好一點,相對於大多數場景的標題欄都是比較簡單的擺放,所以用流式也可以。但是如果啊,如果你的標題欄的控件又要水平擺放的,又要垂直擺放的,這種情況下,還想使用流式佈局就需要進行佈局嵌套瞭,相對來說開銷會增大。如果是這種情況的話,我可能會覺得相對佈局好點。

那是不是因為控件的依賴關系就不太想使用相對佈局瞭呢?其實不然,相對佈局最合適使用的地方,我覺得就不是相對控件的依賴關系(大范圍指定控件),而是相對佈局的依賴關系。這個就顯得更加有用瞭。通常我們的頁面也會有listview這些列表類的滾動場景,還會有使用系統軟鍵盤進行輸入的場景,如果我們不指定佈局之間的依賴關系而采用流式佈局這些,你就會發現,點擊輸入框彈出鍵盤的時候,你的頁面底部就被鍵盤頂上去瞭,頁面控件顯示不全,這是因為高度發生瞭改變。當然你也可以自定義監聽事件,對高度進行檢測,再做邏輯處理。

總結:在設計佈局的時候,相對佈局盡量是相當於父佈局上下左右進行相對。小的依賴關系盡量使用流式佈局解決,類似於簡單的標題欄,便於後期的維護。

九宮格圖片

那講完佈局,與九宮格照片又有什麼關系呢?
先說下九宮格圖片,知道的朋友可以跳過。

首先是它的由來,技術的進步從來都是按需前進的。有這個東西就說明是遇到瞭什麼問題。那問題是什麼呢?

我們將某張圖片設置為視圖背景時,如果圖片尺寸太小,系統則會自動拉伸圖片使之填滿背景。可以一旦圖片拉的過大,其畫面就容易變得模糊。為瞭解決這個問題,Android就設計瞭這個點九圖片。它的擴展名是png,文件名後面常有“.9”字樣。該圖片劃分成瞭3*3的區域。如果背景是一個形狀圖形,它的stroke節點的width屬性已經設置瞭固定數值(如)1dp,那麼無論該圖形怎麼拉伸,描邊寬度始終是1dp。點九圖片的實現原理與之類似,即拉伸圖形時,隻拉伸內部區域,不拉伸邊緣線條。

下面就是一個九宮格的背景圖片:

在這裡插入圖片描述

左邊是加工區域,右邊是圖片預覽區域,從上到下一次是縱向拉伸,橫向拉伸、兩方向同時拉伸的預覽圖片模式。在左側窗口圖片四周的馬賽克處單擊會出現一個黑點,把黑點左右或者上下拖動出一條黑線,不同的方向上的黑線就會表示出不同的效果。

左邊黑線是指垂直方向的拉伸區域。垂直方向拉伸圖片時,隻有黑線區域內的圖像會進行一個拉伸,不在黑線內的區域就不拉伸,還是維持原狀,這樣就能保證上下兩側的邊框厚度不變。

上邊黑線是指水平方向的拉伸區域。與上面是同理。水平拉伸,黑線內拉伸,黑線外不拉伸。

下邊黑線是指該圖片作為控件背景時,控件內部的文字左右邊界就隻能放在黑線區域內。如上圖。這樣的話,就會自動的有瞭android:paddingLeft和android:paddingRight的效果瞭。相當於自動為你添加瞭。

右邊黑線於上邊同理。隻不過是方面不同。這裡就相當於上下的邊界在黑線內瞭。同樣是相當於自動添加瞭android:paddingTop與android:paddingBottom的效果。

那是不是與我們的佈局就很搭配瞭,我們通常標題欄之類的也需要設置一個顏色,那麼九宮格圖片就能很好的幫助到你,通過簡單的黑線,你就可以減少一些設置上下左右邊界的代碼瞭,是不是覺得變簡單瞭?

還有一點要註意的是,九宮格圖片如果設置為視圖背景的時候,而且是指定瞭Horizontal Padding和Vertical Padding,那麼視圖內部將一直與視圖邊緣保持固定的間距,無論怎麼調整xml文件和java代碼都是不行的。因為是九宮格圖片設置的padding。

我們還可以給內部的控件設置一些狀態列表背景進行改變, 這樣在點擊控件或者獲取焦點的時候就可以,有一個明顯的效果出來。

在這裡插入圖片描述

總結

到此這篇關於Android頂部標題欄的佈局設計的文章就介紹到這瞭,更多相關Android標題欄佈局內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: