Button背景問題詳解和製作?

有沒有辦法讓botton圖片縮放時四個角不變模糊,也就是四個角不隨圖片整體做放縮,這樣的話不論button或高或寬,或大或小,背景圖片都不會變模糊?

Button背景問題詳解和製作 帶圖分解

Button背景問題詳解和製作 帶圖分解

Button背景問題詳解和製作 帶圖分解

工具/原料

電腦

軟體

方法/步驟

可以將圖片劃分為九個區域,四個角、四條邊和中間區域。四個角不做放縮,當圖片要水平拉長時,只讓上下綠塊以及中間紫塊水平拉長;當圖片要垂直長高時,只讓左右綠塊以及中間紫塊垂直長高;這樣四角都不會變化,圖片就不會出現鋸齒。

來看看Android中NinePatch類的定義:

NinePatch類可以繪製一個九宮格式的圖片。它的四個角不會縮放;四個邊會沿著一個軸的方向縮放。中間的區域會在兩個軸上都縮放。本質上,就是允許你建立按照你定義的方式縮放的圖片。

Button背景問題詳解和製作 帶圖分解

NinePatch圖片的工作原理和使用

如何將一個普通的PNG圖片劃分為九宮格並變成NinePatch圖呢?

可以在普通的PNG圖片周圍額外增加1畫素寬的邊界,在上邊界和左邊界畫上黑色的線段,根據這兩條線段就可以將圖片劃分為九個區域。

Button背景問題詳解和製作 帶圖分解

Android中NinePatchDrawable是一個包含額外1畫素寬邊界的標準PNG影象,它以.9.png為字尾,儲存在工程的res/drawable/目錄下。

這個邊界是用來確定影象的可伸縮區域和內容區域。你可以在左邊和上邊的線上畫一個或多個黑色的1個畫素指出可伸縮的部分(你可能需要很多可伸縮區域)。

還可以在影象的右邊和下邊畫一條可選的drawable區域。如果View設定NinePath圖片為背景並且含有Text,它將自行伸縮以使所有的Text在右線與底部線確定的的區域中(如果有的話)。

總之,左邊跟頂部的線來確定哪些區域的畫素允許在伸縮時被複制。底部與右邊的線用來定義一個相對的區域,View的內容就放入其中。

圖片的使用與普通png圖片的使用方法一樣。

Button背景問題詳解和製作 帶圖分解

使用draw9patch.bat製作NinePatch圖

draw9patch.bat可以很容易的通過一個所見即所得(WYS WYG)的圖片編輯器來製作NinePatch圖。

Button背景問題詳解和製作 帶圖分解

下面是一個便捷指南。

a) sdk\tools\draw9patch.bat雙擊開啟。

b) 將PNG圖片拖放到這個工具的視窗中(或者通過File->Open 9-patch... 來選擇檔案)。

工作臺的左邊窗格是繪製區域,在裡面可以通過繪製邊界上的黑色線段確定可延伸的宮格和內容區域。右邊窗格是預覽區域,從中你可以預覽圖形的拉伸。

c) 在1個畫素寬的邊界裡點選,繪製線條來定義可延伸宮格以及(可選的)內容區域。點選右鍵(或者按住Shift並點選)取消之前畫的線。

d) 完成後,選擇File $amp;>amp;$nbsp;Save 9-patch...,圖片將以.9.png 檔名儲存。

注意: 開啟一個普通的PNG檔案(*.png) ,會額外新增一個1畫素寬的邊界。開啟一個九宮格檔案(*.9.png)將不會新增邊界,因為已經存在。

其他的一些功能:

Button背景問題詳解和製作 帶圖分解

注意事項

縮放Zoom: 調整圖片大小;

宮格比例Patch scale: 調整預覽檢視中影象的比例;

顯示宮格Show patches: 預覽這個繪圖區中的可延伸宮格(粉紅色代表一個可延伸宮格);

顯示壞宮格Show bad patches: 在宮格區域四周增加一個紅色邊界,這可能會在影象被延伸時產生人工痕跡。

問題, 圖片, 背景, 背景圖片, 縮放時,
相關問題答案