設(shè)計(jì)小技巧

• 自定義標(biāo)題欄
• 布局與九宮格背景圖
• • 布局
  • 九宮格圖片

自定義標(biāo)題欄

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

布局與九宮格背景圖

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

布局

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

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

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

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

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

九宮格圖片

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

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

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

下面就是一個(gè)九宮格的背景圖片：

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

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

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

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

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

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

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

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

小編資歷尚淺，本文不對(duì)之處，還希望各位指出改正。

總結(jié)

以上是生活随笔為你收集整理的顶部标题栏的布局设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。