自定義標(biāo)題欄

通常我們的活動頁面都會根據(jù)需要都會有不同的標(biāo)題欄需要選擇，一般有兩個場景，一個是統(tǒng)一標(biāo)題欄，通過引入布局到活動來進(jìn)行重復(fù)使用，還有一個就是你的活動頁面每個都需要定制的，就不能統(tǒng)一風(fēng)格了。

布局與九宮格背景圖

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

布局

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

那流式布局是怎么完成依賴關(guān)系的呢？我們可以給他加個view來進(jìn)行隔開。通過權(quán)重進(jìn)行分配，一樣可以實現(xiàn)相對布局的效果。用一個0.1dp高度的view就可以分割開了。

當(dāng)然這也不是絕對的，不是說一定要用流式會好一點，相對于大多數(shù)場景的標(biāo)題欄都是比較簡單的擺放，所以用流式也可以。但是如果啊，如果你的標(biāo)題欄的控件又要水平擺放的，又要垂直擺放的，這種情況下，還想使用流式布局就需要進(jìn)行布局嵌套了，相對來說開銷會增大。如果是這種情況的話，我可能會覺得相對布局好點。

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

總結(jié)：在設(shè)計布局的時候，相對布局盡量是相當(dāng)于父布局上下左右進(jìn)行相對。小的依賴關(guān)系盡量使用流式布局解決，類似于簡單的標(biāo)題欄，便于后期的維護。

九宮格圖片

那講完布局，與九宮格照片又有什么關(guān)系呢？
先說下九宮格圖片，知道的朋友可以跳過。

首先是它的由來，技術(shù)的進(jìn)步從來都是按需前進(jìn)的。有這個東西就說明是遇到了什么問題。那問題是什么呢？

我們將某張圖片設(shè)置為視圖背景時，如果圖片尺寸太小，系統(tǒng)則會自動拉伸圖片使之填滿背景?？梢砸坏﹫D片拉的過大，其畫面就容易變得模糊。為了解決這個問題，Android就設(shè)計了這個點九圖片。它的擴展名是png，文件名后面常有“.9”字樣。該圖片劃分成了3*3的區(qū)域。如果背景是一個形狀圖形，它的stroke節(jié)點的width屬性已經(jīng)設(shè)置了固定數(shù)值（如）1dp，那么無論該圖形怎么拉伸，描邊寬度始終是1dp。點九圖片的實現(xiàn)原理與之類似，即拉伸圖形時，只拉伸內(nèi)部區(qū)域，不拉伸邊緣線條。

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

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

左邊黑線是指垂直方向的拉伸區(qū)域。垂直方向拉伸圖片時，只有黑線區(qū)域內(nèi)的圖像會進(jìn)行一個拉伸，不在黑線內(nèi)的區(qū)域就不拉伸，還是維持原狀，這樣就能保證上下兩側(cè)的邊框厚度不變。

上邊黑線是指水平方向的拉伸區(qū)域。與上面是同理。水平拉伸，黑線內(nèi)拉伸，黑線外不拉伸。

下邊黑線是指該圖片作為控件背景時，控件內(nèi)部的文字左右邊界就只能放在黑線區(qū)域內(nèi)。如上圖。這樣的話，就會自動的有了android:paddingLeft和android:paddingRight的效果了。相當(dāng)于自動為你添加了。

右邊黑線于上邊同理。只不過是方面不同。這里就相當(dāng)于上下的邊界在黑線內(nèi)了。同樣是相當(dāng)于自動添加了android:paddingTop與android:paddingBottom的效果。

那是不是與我們的布局就很搭配了，我們通常標(biāo)題欄之類的也需要設(shè)置一個顏色，那么九宮格圖片就能很好的幫助到你，通過簡單的黑線，你就可以減少一些設(shè)置上下左右邊界的代碼了，是不是覺得變簡單了？

還有一點要注意的是，九宮格圖片如果設(shè)置為視圖背景的時候，而且是指定了Horizontal Padding和Vertical Padding，那么視圖內(nèi)部將一直與視圖邊緣保持固定的間距，無論怎么調(diào)整xml文件和java代碼都是不行的。因為是九宮格圖片設(shè)置的padding。

我們還可以給內(nèi)部的控件設(shè)置一些狀態(tài)列表背景進(jìn)行改變， 這樣在點擊控件或者獲取焦點的時候就可以，有一個明顯的效果出來。

總結(jié)

到此這篇關(guān)于Android頂部標(biāo)題欄的布局設(shè)計的文章就介紹到這了,更多相關(guān)Android標(biāo)題欄布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論