什么是9-Patch

• 安卓開(kāi)發(fā)里面的一種特殊的圖片糖儡，這種格式的圖片在 android 環(huán)境下具有自適應(yīng)調(diào)節(jié)大小的能力，文件名以.9.png結(jié)尾唯鸭。

如何制作 9-Patch 文件

• 創(chuàng)建：
  • 首先舱馅，將需要制作成 9-patch 的圖片放進(jìn)項(xiàng)目中
  • 點(diǎn)擊該圖片，右鍵調(diào)出菜單欄烧颖，選中 Create 9-Patch file
    • image
  • 指定9-Patch文件存儲(chǔ)位置（建議重新編輯下名稱弱左，后面引用才不會(huì)沖突）
    • image
  • 點(diǎn)擊確定后，我們就在目錄下得到了一張.9圖了炕淮，但是拆火，我們還需要對(duì)圖片進(jìn)行編輯，這樣圖片的拉伸效果才會(huì)是我們想要的涂圆。
• 編輯：
  • 編輯界面初始化完成時(shí)们镜，我們可以看到界面分為兩部分：
    • 左側(cè)部分為編輯區(qū)域，該區(qū)域的下方是控制欄润歉，靈活使用控制欄中的功能能讓我們操作更加簡(jiǎn)單模狭；
    • 右側(cè)部分為預(yù)覽區(qū)域，在編輯區(qū)域做的操作都會(huì)在預(yù)覽區(qū)域得到體現(xiàn)踩衩。
    • image
  • 在我們開(kāi)始編輯前嚼鹉，非常重要的一點(diǎn)！＞怕琛反砌！需要清楚我們編輯的圖片矩形區(qū)域?qū)?yīng)邊的作用！Ｃ戎臁！
    • 拉伸區(qū)域：
      • 在圖片矩形區(qū)域的左邊為縱向拉伸區(qū)域策菜，上邊為橫向拉伸區(qū)域晶疼；
      • 該區(qū)域，可以存在多段拉伸區(qū)域又憨。
    • 內(nèi)容區(qū)域：
      • 在圖片矩形區(qū)域的右邊為縱向內(nèi)容區(qū)域翠霍，下邊為橫向內(nèi)容區(qū)域；
      • 該區(qū)域蠢莺，拉伸區(qū)域應(yīng)該是連續(xù)的一段寒匙。
  • 我們回到左側(cè)的編輯區(qū)域，可以嘗試將鼠標(biāo)移至圖片區(qū)域，我們能看到圖片出現(xiàn)了一層蒙板锄弱，還出現(xiàn)了多條灰色的線條考蕾，將鼠標(biāo)移至任意一條線條上，鼠標(biāo)指針會(huì)變成可左右或上下拖動(dòng)的模式会宪，按住鼠標(biāo)左鍵就可以進(jìn)行拖動(dòng)了肖卧。
    • image
  • 拖動(dòng)后我們可以發(fā)現(xiàn)，圖片原本周圍有一圈白灰相間的區(qū)域掸鹅，發(fā)生了變化塞帐，一部分變成了黑色，該黑色部分就是我們?cè)O(shè)置的可拉伸區(qū)域巍沙。編輯中我們會(huì)發(fā)現(xiàn)葵姥，拉伸區(qū)域可以是一個(gè)范圍，也可以只有一個(gè)點(diǎn)句携，根據(jù)我們的需要去設(shè)置就可以了榔幸。
    • image
  • 接著我們繼續(xù)拖動(dòng)不同的線條，或直接點(diǎn)擊在圖片周圍的灰白相間區(qū)域务甥，獲得拉伸區(qū)域牡辽，在進(jìn)行拖動(dòng)擴(kuò)大拉伸范圍。
  • 在圖片矩形區(qū)域需要拉伸的邊上設(shè)置拉伸區(qū)域敞临，這時(shí)我們可以看預(yù)覽區(qū)域的效果态辛，在進(jìn)行微調(diào)，直到達(dá)到你想要的效果挺尿。
• 技巧：
  • 這部分我們將使用到前面提到的控制欄奏黑，現(xiàn)在我們來(lái)看看控制欄能幫我們做些什么。
  • Zoom
    • 在編輯可拉伸區(qū)域時(shí)编矾，我們可以利用控制欄中的 Zoom 放大編輯區(qū)域熟史，提高我們編輯的精度。
    • image
    • image
  • Patch scale
    • 當(dāng)我們編輯完成窄俏，預(yù)覽區(qū)域的效果無(wú)法讓我們看大更大的拉伸效果時(shí)蹂匹，我們可以利用控制欄中的 Patch scale 調(diào)整預(yù)覽區(qū)域顯示效果。
    • image
    • image
  • Show content
    • 但預(yù)覽圖達(dá)到了我們想要的效果時(shí)凹蜈，運(yùn)行起來(lái)限寞，內(nèi)容都顯示不完整，此時(shí)我們就需要使用 Show content 查看內(nèi)容顯示區(qū)域是否足夠大仰坦。
    • 開(kāi)啟后履植，預(yù)覽區(qū)域中紫色區(qū)域就是我們內(nèi)容顯示區(qū)域，該區(qū)域?yàn)閳D片矩形相鄰的右下兩邊區(qū)域的重疊部分悄晃，如果該區(qū)域偏小玫霎，我們需要再次編輯內(nèi)容區(qū)域，使重疊部分增大。
    • image
  • Show patches
    • 編輯拉伸區(qū)域時(shí)庶近，我們可以開(kāi)啟 Show parches 后翁脆，在編輯區(qū)域拉伸區(qū)域會(huì)呈現(xiàn)粉紅色，非拉伸區(qū)域會(huì)呈現(xiàn)綠色拦盹，這樣方便我們預(yù)覽到拉伸區(qū)域的變化鹃祖。
    • image
  • Show bad patches
    • 編輯完成后，我們可以開(kāi)啟 Show bad patches普舆，它會(huì)把非正常拉伸區(qū)域用紅色框圈起來(lái)恬口，我們可以根據(jù)提示進(jìn)行調(diào)整，消除非正常拉伸區(qū)域沼侣。

    • 錯(cuò)誤例子：
      image

    • 修正以后：
      image
• 控制欄功能說(shuō)明
  • Zoom
    • 調(diào)整繪圖區(qū)域中圖形的縮放級(jí)別
  • Patch scale
    • 調(diào)整預(yù)覽區(qū)域中圖像的比例
  • Show lock
    • 在鼠標(biāo)懸停時(shí)可視化圖形的不可繪制區(qū)域
  • Show content
    • 突出顯示預(yù)覽圖像中的內(nèi)容區(qū)域（紫色是允許內(nèi)容的區(qū)域）祖能。
  • Show patches
    • 在繪圖區(qū)域中預(yù)覽可伸展的修補(bǔ)程序（粉紅色是可伸縮的修補(bǔ)程序）
  • Show bad patches
    • 在補(bǔ)丁區(qū)域周圍添加紅色邊框，在拉伸時(shí)可能會(huì)在圖形中產(chǎn)生偽影蛾洛。如果消除所有不良補(bǔ)丁养铸，將保持拉伸圖像的視覺(jué)一致性。

遇到的問(wèn)題

• 問(wèn)題 1

  •   Android resource compilation failed
      error: too many padding sections on right border.
      
      Android資源編譯失敗
      錯(cuò)誤：右邊框上的填充部分太多轧膘。
    

    • 原因： 沒(méi)區(qū)分拉伸區(qū)域和內(nèi)容區(qū)域钞螟，簡(jiǎn)單來(lái)說(shuō)就是圖片矩形區(qū)域的右邊或下邊出現(xiàn)了多個(gè)或不連續(xù)的拉伸區(qū)域造成的。
• 問(wèn)題 2

  •   [drawable/img] ...\app\src\main\res\drawable\img.png    
      [drawable/img] ...\app\src\main\res\drawable\img.9.png: 
      Error: Duplicate resources
    

    • 原因：創(chuàng)建.9圖片時(shí)谎碍，和源文件命名沖突鳞滨，修改其中一個(gè)的名稱就可以了。
• 問(wèn)題 3
  • 設(shè)置背景后蟆淀，內(nèi)容無(wú)法居中
    • 原因：當(dāng)我們編輯內(nèi)容區(qū)域時(shí)拯啦，該區(qū)域與原圖片已經(jīng)不會(huì)重合了，因此產(chǎn)生了內(nèi)邊距熔任，當(dāng)然我們可以通過(guò)在代碼中設(shè)置內(nèi)邊距為0褒链，這樣一來(lái)就解決了無(wú)法居中問(wèn)題。
• 問(wèn)題 4
  • 拉伸區(qū)域?yàn)閳D片矩形的左邊和上邊疑苔，但如果我們需要拉伸的區(qū)域在圖片的右邊或者下邊時(shí)甫匹，我們應(yīng)該怎么處理？
    • 處理方法：前面我們說(shuō)過(guò)惦费，可拉伸區(qū)域是允許存在多段拉伸區(qū)域的赛惩，那么我們也就可以設(shè)置多個(gè)拉伸區(qū)域，讓其中一個(gè)區(qū)域?qū)?zhǔn)對(duì)邊需要拉伸的位置趁餐，這樣就實(shí)現(xiàn)了拉伸效果了。
    • image

參考

• AndroidDocs Draw 9-patch