基于App自適應(yīng)draw9patch不失真背景的方法詳解
這篇文章是android開發(fā)人員的必備知識(shí),是我特別為大家整理和總結(jié)的,不求完美,但是有用。
1.背景自適應(yīng)且不失真問題的存在
制作自適應(yīng)背景圖片是UI開發(fā)的一個(gè)廣泛?jiǎn)栴},也是界面設(shè)計(jì)師渴望解決的問題,我相信我們彼此都深有體會(huì)。
比如,列表的背景圖一定,但是列表的高度隨著列表數(shù)據(jù)項(xiàng)會(huì)發(fā)生變化;標(biāo)題欄的背景,無(wú)論橫屏還是豎屏,高分辨率還是低分辨率,都能自動(dòng)填充滿,而且不失真等等背景問題。
根據(jù)以往的經(jīng)驗(yàn),我們一般采用先切圖后拼湊的做法,這種做法本來(lái)我想在這里和大家介紹一下,其實(shí)有的時(shí)候還是很有用的,但是說(shuō)起來(lái)會(huì)比較麻煩,就不說(shuō)這個(gè)非重點(diǎn)了,略去,如果大家真的要介紹,在回復(fù)中說(shuō)明,我再考慮一下。
Android針對(duì)這種情況,專門制作了一種.9.PNG格式來(lái)解決這個(gè)問題。
2.9.PNG格式。
我不想在這里過多的討論P(yáng)NG格式的定義問題。但是.9.PNG確實(shí)是標(biāo)準(zhǔn)的PNG格式,只是在最外面一圈額外增加1px的邊框,這個(gè)1px的邊框就是用來(lái)定義圖片中可擴(kuò)展的和靜態(tài)不變的區(qū)域。特別說(shuō)明,left和top邊框中交叉部分是可拉伸部分,未選中部分是靜態(tài)區(qū)域部分。right和bottom邊框中交叉部分則是內(nèi)容部分(變相的相當(dāng)于定義看一個(gè)內(nèi)邊距,神似padding功能,后面我會(huì)單獨(dú)介紹一下),這個(gè)參數(shù)是可選的, 如下圖。
在Android中以9.PNG格式的圖片未背景,則能夠自定義拉伸而不失真,比如系統(tǒng)的Button就是一個(gè)典型的例子。
其實(shí)呢,無(wú)論是left和top,還是right和bottom都是把圖片分成9塊 (邊角四塊是不能縮放的,其他的四塊則是允許縮放的),所以叫做9.PNG。
3. 使用Draw9Patch.jar制作9.PNG圖片之定義拉伸區(qū)域。
前面已經(jīng)了解到9.PNG格式的工作方式,下面我們使用谷歌提供的Draw9Patch(運(yùn)行android-sdk-windows\tools目錄下的Draw9Patch.bat)來(lái)制作.9.PNG圖片。
第一步:準(zhǔn)備要拉伸的圖片。
非常小的一張圖片,我希望以此為背景,中間部分填充文章內(nèi)容。
第二步:制作.9.PNG圖片。
打開Draw9Patch,把圖片拖進(jìn)去,如下:
默認(rèn)的拉伸是整體拉伸,其實(shí)邊框部分我們并不想拉伸,好,我們自己來(lái)定義拉伸區(qū)域,如下圖:
然后點(diǎn)擊File,導(dǎo)出為content.9.png。
第三步:在layout文件中使用制作的 .9.PNG圖片.
新建工程Draw9Patch,默認(rèn)主Activity為Draw9PatchActivity.java:
1 @Override
2 public void onCreate(Bundle savedInstanceState)
3 {
4 super.onCreate(savedInstanceState);
5 setContentView(R.layout.main);
6 }
我們把content.9.png文件拷貝到/res/drawable文件夾下,打開/res/layout目錄下的main.xml,申明如下:
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:orientation="vertical"
4 android:layout_width="fill_parent"
5 android:layout_height="fill_parent"
6 android:background="#777"
7 android:padding="8dip"
8 >
9 <TextView android:layout_width="fill_parent"
10 android:layout_height="wrap_content"
11 android:text="正文:A NinePatchDrawable graphic is a stretchable bitmap image."
12 android:background="@drawable/content"
13 android:textColor="#000"
14 />
15 </LinearLayout>
如圖,
我們修改text,
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:orientation="vertical"
4 android:layout_width="fill_parent"
5 android:layout_height="fill_parent"
6 android:background="#777"
7 android:padding="8dip"
8 >
9 <TextView android:layout_width="fill_parent"
10 android:layout_height="wrap_content"
11 android:text="正文:A NinePatchDrawable graphic is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the View in which you have placed it as the background. A NinePatch drawable is a standard PNG image that includes an extra 1-pixel-wide border."
12 android:background="@drawable/content"
13 android:textColor="#000"
14 />
15 </LinearLayout>
如圖,
可以看出,邊框非常的清晰。下圖是未使用.9.PNG的對(duì)比圖,而且也不是我們要的效果:
到這里為止,我們已經(jīng)基本會(huì)制作.9.PNG圖片了。為了知識(shí)體系的全面性和深入性,我們繼續(xù)。
4.使用Draw9Patch.jar制作9.PNG圖片之定義內(nèi)容區(qū)域。
是不是覺得文字和邊距挨的太近,好,我們使用right和bottom邊的線來(lái)定義內(nèi)容區(qū)域,來(lái)達(dá)到增大內(nèi)邊距的目的。
我們定義了一個(gè)很小的內(nèi)容區(qū)域,其他的地方則自動(dòng)充當(dāng)邊框,從而使內(nèi)邊距顯的很大,如下圖,
在這里,我要特別說(shuō)明,一開始為了增大內(nèi)邊距,很容易慣性思維,在<TextView>中申明android:padding="10dip" 之類的,我在這里勸告朋友們不要這么做,一是你將無(wú)法預(yù)知你的顯示,二是這比較混淆,因?yàn)樵O(shè)置內(nèi)容區(qū)域就是確定padding,所以我在前面部分說(shuō)他們是神似。我個(gè)人認(rèn)為通過內(nèi)容區(qū)域設(shè)定padding比在布局xml中定義padding更優(yōu)雅,更簡(jiǎn)潔!
關(guān)于Draw9Patch工具的其他使用說(shuō)明,我在次不再累述,因?yàn)橐f(shuō)的話太多,為了節(jié)省篇幅,請(qǐng)參考官方文檔。
5.制作.9.PNG的高級(jí)技巧。
對(duì)于初學(xué)Draw9Patch的人來(lái)說(shuō),這可以算是高級(jí)技巧,那就是:拉伸區(qū)域,可以不是連續(xù)的,可以不止一塊,而且是和自定義的邊框線的長(zhǎng)度成正比。
直接上圖說(shuō)明:
6.SDK中如何處理9.PNG圖片。
SDK專門針對(duì)9.PNG做了定義和處理,這里我們只是做個(gè)簡(jiǎn)單的流程分析,Bitmap在讀取圖像流數(shù)據(jù)的時(shí)候,會(huì)把判斷圖片的NinePatchChunk(9Patch數(shù)據(jù)塊),如果NinePatchChunk不為空,則是NinePatchDrawable,NinePatchDrawable則又會(huì)交給NinePatch處理:
1 setNinePatchState(new NinePatchState(
2 new NinePatch(bitmap, bitmap.getNinePatchChunk(), "XML 9-patch"),
3 padding, dither), r);
NinePatch檢驗(yàn)成功則調(diào)用本地方法,繪制出最終的圖片:
1 nativeDraw(canvas.mNativeCanvas, location,
2 mBitmap.ni(), mChunk, paint != null ? paint.mNativePaint : 0,
3 canvas.mDensity, mBitmap.mDensity);
7.android系統(tǒng)中大量應(yīng)用了9.PNG圖片。
通過解壓隨便一個(gè)rom,找到里面的framework_res.apk,里面有大量的9.PNG格式文件,被廣泛的應(yīng)用起來(lái),比如常見的有:
按鈕:
解鎖:
下拉框:
標(biāo)題欄:
Toast:
還有搜索,鍵盤,放大縮小控件,時(shí)間加減等等,我就不一一列舉。
8.最后送上一些圖例,以饗讀者,以做后鑒:
相關(guān)文章
Android編程實(shí)現(xiàn)啟動(dòng)界面的方法分析
這篇文章主要介紹了Android編程實(shí)現(xiàn)啟動(dòng)界面的方法,結(jié)合實(shí)例形式分析了Android啟動(dòng)界面的實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2017-03-03Android實(shí)現(xiàn)socket通信統(tǒng)一接口的方法
這篇文章主要介紹了Android實(shí)現(xiàn)socket通信統(tǒng)一接口?,實(shí)現(xiàn)了統(tǒng)一接口之后確實(shí)可以使后續(xù)修改實(shí)現(xiàn)更加方便,程序結(jié)構(gòu)也更加工程化,需要的朋友可以參考下2021-12-12Android 適配器模式應(yīng)用及設(shè)計(jì)原理
這篇文章主要介紹了Android 適配器模式應(yīng)用及設(shè)計(jì)原理的相關(guān)資料,Android開發(fā)者應(yīng)該都知道適配器會(huì)用,但是不是多清楚原理,這里幫大家分析下原理,需要的朋友可以參考下2016-10-10Android開發(fā)實(shí)現(xiàn)的標(biāo)準(zhǔn)體重計(jì)算器功能示例
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)的標(biāo)準(zhǔn)體重計(jì)算器功能,結(jié)合實(shí)例形式分析了Android體重計(jì)算器的界面布局與功能實(shí)現(xiàn)相關(guān)操作技巧,需要的朋友可以參考下2017-12-12android studio2.3如何編譯動(dòng)態(tài)庫(kù)的過程詳解
這篇文章主要給大家介紹了關(guān)于android studio 2.3如何編譯動(dòng)態(tài)庫(kù)的過程,文中通過示例代碼介紹的非常詳細(xì),對(duì)各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08Android懸浮對(duì)話框(即點(diǎn)即關(guān)對(duì)話框)實(shí)現(xiàn)代碼
本文給大家介紹android懸浮對(duì)話框和即點(diǎn)即關(guān)閉對(duì)話框,本文介紹非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-03-03