最近在改版公司的UI,最終效果是這樣的:
看到效果有點崩,倒不是有多難實作,主要是這個側滑UI幾乎兩三周一換,真的是疲勞.這篇先簡單普及一下mac系統下的.9png圖檔制作.廢話不多說,下面開始一步步做起來:
1.首先要準備一個目标圖檔,最好是png格式,将其複制到android studio的drawable目錄下;
2.選中該圖檔,右擊選擇create 9-patch-file,選擇生成.9png圖檔所在目錄,一般選擇mimap目錄下,并将drawable下的目标圖檔删除;
3.輕按兩下mimap目錄下生成的.9圖檔,進入編輯模式,,如下圖所示:
4.編輯規則如下:
上邊黑線：橫向拉伸區域，必須要畫的，拉伸是橫向拉伸，如右邊的區域第二個拉伸的就是橫向拉伸的效果
左邊黑線：縱向拉伸區域，必須要畫的，拉伸是縱向拉伸，如右邊的區域第一個拉伸的就是縱向拉伸的效果
下邊黑線：可選，橫向内容顯示區域
右邊黑線：可選，縱向内容顯示區域
拖動四周的邊界線即可生成黑線,隻有上邊和左邊是拉伸區域,右邊和下面則是裡面内容的顯示區域
5.畫錯了想取消重新畫怎麼辦?
很簡單,由于mac與windows的差異,快捷鍵也存在差異,如果想取消某一塊的邊界線,隻需要按住control鍵,同時選中取消區域的起點,開始劃線即可,如圖,取消部分的邊界線顯示為紅色
,這樣就成功完成了.9圖檔的制作,接下來自己引用就ok了
補充:本文僅做記錄和供大家參考,下篇将會記錄上圖側滑欄的實作,有不足之處和意見請大家提出,謝謝.