安卓開發入門指南--安卓手機自適應draw9patch不失真背景設定具體步驟

來源:互聯網
上載者:User

標籤:

一、【安卓手機自適應draw9patch不失真背景】實際問題

前一段時間,去長江玩了一趟,拍了很多照片,不過都是手機拍的,正常尺寸都是看不清楚老婆的臉蛋,就不自在的開始放大放小,可是一定程度圖片就失真了。不知道你們都遇見過這樣的情況嗎?其實作為一個程式開發人員,我很清楚這個手機自適應draw9patch不失真背景不怎麼好,今天不妨就實際問題給大家解決一下。

 首先背景自適應且不失真問題的存在已經給大家聚過例子了,希望大家多在生活中觀察,遇到任何安卓app問題,可加QQ群:175229978進行交流。製作自適應背景圖片是UI開發的一個廣泛問題,比如,列表的背景圖一定,但是列表的高度隨著列表資料項目會發生變化;標題列的背景,無論橫屏還是豎屏,高解析度還是低解析度,都能自動填滿滿,而且不失真等等背景問題。

潭州Android研發部針對這種情況,專門製作了一套方便的方式---.9.PNG格式來解決這個問題。在這裡就不討論PNG格式的定義問題。但是.9.PNG確實是標準的PNG格式,只是在最外面一圈額外增加1px的邊框,這個1px的邊框就是用來定義圖片中可擴充的和靜態不變的地區。特別說明,left和top邊框中交叉部分是可展開部分,未選中部分是靜態地區部分。right和bottom邊框中交叉部分則是內容部分(變相的相當於定義看一個內邊距,神似padding功能,後面會單獨介紹一下),這個參數是可選的。

在Android中以9.PNG格式的圖片未背景,則能夠自訂展開而不失真,比如系統的Button就是一個典型的例子。 
其實呢,無論是left和top,還是right和bottom都是把圖片分成9塊 (邊角四塊是不能縮放的,其他的四塊則是允許縮放的),所以叫做9.PNG。

 

二、【安卓手機自適應draw9patch不失真背景設定具體步驟】重點知識:

前面已經瞭解到9.PNG格式的工作方式,下面我們使用Google提供的Draw9Patch(運行android-sdk-windows\tools目錄下的Draw9Patch.bat)來製作.9.PNG圖片。
1:準備要展開的圖片。
非常小的一張圖片,我希望以此為背景,中間部分填充文章內容。
2:製作.9.PNG圖片。
開啟Draw9Patch,把圖片拖進去,如下:

預設的展開是整體展開,其實邊框部分我們並不想展開,好,我們自己來定義展開地區,如:

然後點擊File,匯出為content.9.png。
3:在layout檔案中使用製作的 .9.PNG圖片.
建立工程Draw9Patch,預設主Activity為Draw9PatchActivity.java:

?

123456 @Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main);}

我們把content.9.png檔案拷貝到/res/drawable檔案夾下,開啟/res/layout目錄下的main.xml,申明如下:

?

12345678910111213141516 <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#777"android:padding="8dip"><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="本文:A NinePatchDrawable graphic is a stretchable bitmap image."android:background="@drawable/content"android:textColor="#000"/></LinearLayout>



我們修改text,

?

12345678910111213141516 <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#777"android:padding="8dip"><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"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."android:background="@drawable/content"android:textColor="#000"/></LinearLayout>

可以看出,邊框非常的清晰。是未使用.9.PNG的對比圖,而且也不是我們要的效果:

到這裡為止,我們已經基本會製作.9.PNG圖片了。為了知識體系的全面性和深入性,我們繼續。

4.使用Draw9Patch.jar製作9.PNG圖片之定義內容地區。
是不是覺得文字和邊距挨的太近,好,我們使用right和bottom邊的線來定義內容地區,來達到增大內邊距的目的。

我們定義了一個很小的內容地區,其他的地方則自動充當邊框,從而使內邊距顯的很大,一開始為了增大內邊距,很容易慣性思維,在<TextView>中申明android:padding="10dip" 之類的,我在這裡勸告朋友們不要這麼做,一是你將無法預知你的顯示,二是這比較混淆,因為設定內容地區就是確定padding。(通過內容地區設定padding比在布局xml中定義padding更優雅,更簡潔!)

5.製作.9.PNG的進階技巧。
對於初學Draw9Patch的人來說,這可以算是進階技巧,那就是:展開地區,可以不是連續的,可以不止一塊,而且是和自訂的邊框線的長度成正比。
直接說明:

6.SDK中如何處理9.PNG圖片。
SDK專門針對9.PNG做了定義和處理,這裡我們只是做個簡單的流程分析,Bitmap在讀取映像流資料的時候,會把判斷圖片的NinePatchChunk(9Patch資料區塊),如果NinePatchChunk不為空白,則是NinePatchDrawable,NinePatchDrawable則又會交給NinePatch處理:

?

123 setNinePatchState(new NinePatchState(new NinePatch(bitmap, bitmap.getNinePatchChunk(), "XML 9-patch"),padding, dither), r);

NinePatch檢驗成功則調用本地方法,繪製出最終的圖片:

?

123 nativeDraw(canvas.mNativeCanvas, location,mBitmap.ni(), mChunk, paint != null ? paint.mNativePaint : 0,canvas.mDensity, mBitmap.mDensity);

7.android系統中大量應用了9.PNG圖片。
通過解壓隨便一個rom,找到裡面的framework_res.apk,裡面有大量的9.PNG格式檔案,被廣泛的應用起來,比如常見的有:
按鈕: 
解鎖: 
下拉框: 
標題列:
Toast:
還有搜尋,鍵盤,放大縮小控制項,時間加減等等,我就不一一列舉。

8.最後一些應用案例,希望大家以後看到不會太過陌生:
 下拉按鈕、文章頭部背景、系統頭部背景等都會用到的,其實安卓開發是很好的東西,我們經常看到的都會實現的,到時候找女朋友的時候也可以吹牛逼啊,哈哈。。。

其實潭州安卓開發入門有很多類似這樣的案例,希望大家可以加入學習,更多到QQ群:175229978下載學習。

安卓開發入門指南--安卓手機自適應draw9patch不失真背景設定具體步驟

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.