android .9.png ”點九” 圖片制作方法

“點九”是andriod平臺的應用軟件開發里的一種特殊的圖片形式,文件擴展名為:.9.png

智能手機中有自動橫屏的功能,同一幅界面會在隨著手機(或平板電腦)中的方向傳感器的參數不同而改變顯示的方向,在界面改變方向后,界面上的圖形會因為長寬的變化而產生拉伸,造成圖形的失真變形。

我們都知道android平臺有多種不同的分辨率,很多控件的切圖文件在被放大拉伸后,邊角會模糊失真。

OK,在android平臺下使用點九PNG技術,可以將圖片橫向和縱向同時進行拉伸,以實現在多分辨率下的完美顯示效果。

【普通拉伸和點九拉伸效果對比】

對比很明顯,使用點九后,仍能保留圖像的漸變質感,和圓角的精細度。

從中我們也可以理解為什么叫“點九PNG”,其實相當于把一張png圖分成了9個部分(九宮格),分別為4個角,4條邊,以及一個中間區域,4個角是不做拉升的,所以還能一直保持圓角的清晰狀態,而2條水 平邊和垂直邊分別只做水平和垂直拉伸,所以不會出現邊會被拉粗的情況,只有中間用黑線指定的區域做拉伸。結果是圖片不會走樣

二.“點九”的制作方法

方法1:使用 “draw9patch”工具繪制,流程如下

1.? 安裝工具

首先你需要給自己的電腦安裝上java于系統的默認目錄下。沒有安裝java的同學可以在百度搜索:jdk-6u20-windows-i586,安裝包大小80M左右。

然后使用andriod模擬器—android-sdk-windows,打開SDK/tools目錄下的“draw9patch.bat”文件,出現載入窗口:

2.導入并編輯

將png圖片拖拽到該窗口中

如下圖,自動進入編輯界面。圖中介紹了每個區域的內容及功能注釋。

預覽右側的視圖發現,圖片的邊緣處于普通拉伸狀態。

現在我們在圖片邊緣點擊左鍵,繪制出黑線,即圖片需要被拉伸的部分。如下圖,對4條黑線做了注釋。

如果失誤多繪的部分,可按住shift鍵的同時點擊鼠標左鍵擦除)。

如圖所見,三種拉伸結果均已完美顯示,已實現我們想要的拉伸效果,假設這是一個有顯示文字的窗體,那么文字顯示的區域,程序也會控制在黑線對應范圍。

以下這些圖片,包括異性(非規則圖形)圖片,也可以通過點九PNG實現橫縱向的自然拉伸。

【draw9patch.bat其他功能說明】

②? ?Show lock:顯示不可繪區域

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

③ Show patches:預覽視圖中的高亮區域(紫色區域)

④ Show bad patches:在宮格區域四周增加一個紅色邊界,這可能會在圖像被延伸時產生人工痕跡。如果你消除所有的壞宮格,延伸視圖的視覺一致性將得到維護。

3.保存和輸出

點擊左上file- save,保存文件,自動生成一張后綴名為“*.9.png”格式的圖片,圖片上下左右各增加了1px的黑線。

方法2:直接使用 PS等平面工具繪制,流程圖如下

如流程圖所示,相對與方法1,只需2個步驟就可得到.9.png圖片,具體步驟為:

1.? 確定切圖后直接改變圖片的畫布大小,

2.? 手動將上下左右各增加1px

3.? 使用鉛筆工具,手動繪制拉伸區域,色值必須為黑色(#000000)。

4.? 存儲為web所用格式,選擇png-24,儲存時手動將后綴名改為.9.png

不過這種方法的缺點是不能實時預覽,判斷并測試拉伸區域的準確性。

使用此方法需要注意以下2點:

1.?手繪的黑線拉伸區必須是#000000,透明度100%,并且圖像四邊不能出現半透明像素;

2.?你的.9.png必須繪有拉伸區域的黑線;

否則,圖片不會通過android系統編譯,導致程序報錯。還有,有同學疑惑解壓縮apk文件后,.9.png圖片里的黑線怎么沒了?

那是因為andriod程序在把文件打包成apk的時候,程序會自動把*.9.png圖片邊緣的黑線去掉,所以解壓縮apk后看到的.9.png文件是沒有黑線的。

三.使用“點九”的意義

關于下圖,經過測試發現使用普通png的顯示效果出現明顯的變色橫紋。而.9.png圖片的顯示效果明顯優于普通png。

使用.9.png格式后,橫紋問題基本已解決。因為對于.9.png圖片,android系統程序有對其優化的算法。

由于android手機屏幕的材質質量差距大。很多屏幕不支持16位以上的顏色顯示。

所以渲染后結果出現丟失顏色,故造成橫紋顯示。

經與多款android手機對比后發現,屏幕越次的手機橫紋越明顯。

而使用了*.9.png圖片技術后,只需要采用一套界面切圖去適配不同的分辨率,而且大幅減少安裝包的大小。而且這樣程序不需要專門做處理的就可以實現其拉伸,也減少了代碼量和開發工作量。

相信每個人android平臺的切圖工作,會有不同的技巧和心得,非常歡迎大家能在評論中留下自己的個人經驗及心得。相互交流會讓我們的工作模式更靈活,更高效,同時帶給大家更多優質的移動端應用:)

轉載請注明出自”百度MUX”

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/539921.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/539921.shtml
英文地址,請注明出處:http://en.pswp.cn/news/539921.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

servlet3.0異步處理

Servlet3是Tomcat7出現的新特性,所以需要先安裝tomcat7 微信企業號使用回調模式時: 假如企業無法保證在五秒內處理并回復,可以直接回復空串,企業號不會對此作任何處理,并且不會發起重試。這種情況下,可以…

使用svn diff的-r參數的來比較任意兩個版本的差異

1 svn diff的用法1.1 對比當前本地的工作拷貝文件(working copy)和緩存在.svn下的版本庫文件的區別[plain] view plaincopyprint? svn diff 1.2 對比當前本地的工作拷貝文件(working copy)和任意版本A的差異[plain] view plaincopyprint? svn diff -rA 比如,以下…

深入理解HTTP Session

session在web開發中是一個非常重要的概念,這個概念很抽象,很難定義,也是最讓人迷惑的一個名詞,也是最多被濫用的名字之一,在不同的場合,session一次的含義也很不相同。這里只探討HTTP Session。為了說明問題…

Hibernate的懶加載session丟失解決方法

在web.xml加入spring提供的過濾器&#xff0c;延長session的生命周期 <!--Hibernate的懶加載session丟失解決方法 --><filter><filter-name>openSessionInView</filter-name><filter-class>org.springframework.orm.hibernate4.support.OpenSess…

Linux訪問其他進程空間,Linux環境進程間通信系列(五):共享內存

共享內存可以說是最有用的進程間通信方式&#xff0c;也是最快的IPC形式。兩個不同進程A、B共享內存的意思是&#xff0c;同一塊物理內存被映射到進程A、B各自的進程地址空間。進程A可以即時看到進程B對共享內存中數據的更新&#xff0c;反之亦然。由于多個進程共享同一塊內存區…

沖刺NO.8

Alpha沖刺第八天 站立式會議 項目進展 項目穩步進行&#xff0c;項目的基礎部分如基本信息管理&#xff0c;信用信息管理等部分已相對比較完善。 問題困難 技術困難在短期內很難發生質的變化&#xff0c;而本項目由于選擇了隊員不太熟悉的程序框架&#xff0c;所以所以項目的交…

linux由眾多微內核組成,什么是linux

大家對Linux這個詞比較陌生吧&#xff0c;那么Linux是什么呢&#xff1f;Linux是什么Linux是一種自由和開放源碼的類Unix操作系統。目前存在著許多不同的Linux&#xff0c;但它們都使用了Linux內核。Linux可安裝在各種計算機硬件設備中&#xff0c;從手機、平板電腦、路由器和視…

淺析jQuery中常用的元素查找方法總結

$("#myELement") 選擇id值等于myElement的元素&#xff0c;id值不能重復在文檔中只能有一個id值是myElement所以得到的是唯一的元素 $("div") 選擇所有的div標簽元素&#xff0c;返回div元素數組 $(".myClass") 選擇使用myClass類的css的所有…

右擊菜單一鍵優化(增加新建office2003、新建reg和bat,刪除新建公文包、新建wps、新建rar)...

右擊菜單一鍵優化&#xff08;增加新建office2003、新建reg和bat&#xff0c;刪除新建公文包、新建wps、新建rar&#xff09; Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.doc]"Word.Document.8""Content Type""application/msword&qu…

jquery獲取select選擇的顯示值

轉載自&#xff1a;http://blog.csdn.net/a5489888/article/details/8611703 本來以為jQuery("#select1").val();是取得選中的值&#xff0c; 那么jQuery("#select1").text();就是取得的文本。 這是不正確的&#xff0c;正確做法是&#xff1a; jQuery(&qu…

克隆整個linux系統環境的軟件,開源的系統克隆工具 Clonezilla(再生龍)linux、UBUNTU備份不用愁...

Clonezilla是一個很好的系統克隆工具,它基于Partimage,吸取了Norton Ghost和Partition Image的優點。即不僅支持對整個系統進行克隆,而且也可以克隆單個的分區,這種靈活性可能更能適應備份者的需要。支持GNU/Linux的文件系統 ext2、ext3、reiserfs、xfs、jfs和Windows的FAT、FA…

SqlServer2008備份與還原(完整圖示版)

一、備份 1、在需要備份的數據庫上&#xff0c;右鍵——任務——備份&#xff0c;如下&#xff1a; 2、選擇備份到哪個路徑和備份名字&#xff1a; 點擊“添加”&#xff0c;如下&#xff0c; 3、上面點擊“確定”后&#xff0c;回到第一個頁面&#xff0c;選中剛才添加的路徑和…

Jquery mobile問題總匯

轉載&#xff1a;http://www.wglong.com/main/artical!details?id4#q6 1頁面縮放顯示問題 問題描述&#xff1a; 頁面似乎被縮小了&#xff0c;屏幕太寬了。 解決辦法&#xff1a; 在head標簽內加入&#xff1a; <meta name"viewport" content"widthdevice…

Linux通過文件大小查找,linux 根據文件大小查找文件

linux下的find命令用來查找文件&#xff0c;通過man find就知道它是無所不能的。所以按照文件大小來查找文件就不在話下。從man find搜索size&#xff0c;可以看到如下信息&#xff1a;-size n[cwbkMG]File uses n units of space. The following suffixes can be used:b for 5…

DBCP連接池介紹

DBCP連接池介紹 ----------------------------- 目前 DBCP 有兩個版本分別是 1.3 和 1.4。 DBCP 1.3 版本需要運行于 JDK 1.4-1.5 &#xff0c;支持 JDBC 3。 DBCP 1.4 版本需要運行于 JDK 1.6 &#xff0c;支持 JDBC 4。 1.3和1.4基于同一套源代碼&#xff0c;含有所有的bug修…

linux解釋名詞shell環境,Linux 定時任務

實現linux定時任務有:cron、anacron、at等&#xff0c;這里主要介紹cron服務。名詞解釋&#xff1a;cron是服務名稱&#xff0c;crond是后臺進程&#xff0c;crontab則是定制好的計劃任務表。軟件包安裝&#xff1a;要使用cron服務&#xff0c;先要安裝vixie-cron軟件包和cront…

Python3 實現用戶登陸,輸入三次密碼

不加注釋版 #/usr/bin/python3 import readline user "seven" passwd "123" username input("please the enter user:") for i in range(3):password input("please the enter password:")if password.isdigit():password int(pa…

linux pcre靜態編譯,Linux下,Nginx部署靜態網站

1、準備工作選首先安裝這幾個軟件&#xff1a;GCC&#xff0c;PCRE(Perl Compatible Regular Expression)&#xff0c;zlib&#xff0c;OpenSSL。Nginx是C寫的&#xff0c;需要用GCC編譯&#xff1b;Nginx的Rewrite和HTTP模塊會用到PCRE&#xff1b;Nginx中的Gzip用到zlib&…

【HTML5初探之本地存儲】如果沒有數據庫。。。

導航【初探HTML5之使用新標簽布局】用html5布局我的博客頁&#xff01;【HTML5初探之form標簽】解放表單驗證、增加文件上傳、集成拖放【HTML5初探之繪制圖像&#xff08;上&#xff09;】看我canvas元素引領下一代web頁面【HTML5初探之繪制圖像&#xff08;下&#xff09;】看…

FragmentActivity和Activity的具體區別

fragment是3.0以后的東西&#xff0c;為了在低版本中使用fragment就要用到android-support-v4.jar兼容包,而fragmentActivity就是這個兼容包里面的&#xff0c;它提供了操作fragment的一些方法&#xff0c;其功能跟3.0及以后的版本的Activity的功能一樣。 下面是API中的原話&am…