个性缩放图片NinePatchDrawable

kanwoerzi

浏览: 1645088 次

最近访客更多访客>>

u012363178

lynnlysh

zyysal

aaron198

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1724)

社区版块

存档分类

2011-12 ( 292)
2011-11 ( 349)
2011-10 ( 284)
更多存档...

NinePatchDrawable ANinePatchDrawablegraphicisastretchablebitmapimage, whichAndroidwillautomaticallyresizetoaccommodatethecontentsoftheViewinwhichyouhaveplaceditasthebackground. AnexampleuseofaNinePatchisthebackgroundsusedbystandardAndroidbuttons— buttonsmuststretchtoaccommodatestringsofvariouslengths. ANinePatchdrawableisastandardPNGimagethatincl?sanextra1-pixel-wideborder. Itmustbesavedwiththeextension.9.png,andsavedintotheres/drawable/directoryofyourproject. Theborderisusedtodefinethestretchableandstaticareasoftheimage. Youindicateastretchablesectionbydrawingone(ormore)1-pixel-wideblackline(s)intheleftandtoppartoftheborder. (Youcanhaveasmanystretchablesectionsasyouwant.)Therelativesizeofthestretchablesectionsstaysthesame, sothelargestsectionsalwaysremainthelargest. Youcanalsodefineanoptionaldrawablesectionoftheimage(effectively,thepaddinglines) bydrawingalineontherightandbottomlines.IfaViewobjectsetstheNinePatchasitsbackground andthenspecifiestheView'stext,itwillstretchitselfsothatallthetextfitsinsideonly theareadesignatedbytherightandbottomlines(ifincl?d).Ifthepaddinglinesarenotincl?d, Androidusestheleftandtoplinestodefinethisdrawablearea. Toclarifythedifferencebetweenthedifferentlines, theleftandtoplinesdefinewhichpixelsoftheimageareallowedtobereplicatedinordertostretchtheimage. ThebottomandrightlinesdefinetherelativeareawithintheimagethatthecontentsoftheViewareallowedtoliewithin. ANinePatchDrawable相对于Bitmap Drawable主要有增加了两个属性。他主要定义了图片的两类可区域。 一类是一般的可扩展（放大）区域区域，他主要用来填充控件的空白区域。 另一类区域主要用于填充内容区域（比如对于button来说内容区域就是其文本区域）。 注意： ThisNinePatchdefinesonestretchableareawiththeleft andtoplinesandthedrawableareawiththebottomandrightlines. Inthetopimage,thedottedgreylinesidentifytheregionsoftheimagethatwillbereplicatedinordertostretchtheimage. ThepinkrectangleinthebottomimageidentifiestheregioninwhichthecontentsoftheViewareallowed. Ifthecontentsdon'tfitinthisregion,thentheimagewillbestretchedsothattheydo. 使用Draw9-patch创建NinePatchDrawable形式的图（.9.png） theDraw9-patchtoolallowsyoutoeasilycreateaNinePatchgraphicusingaWYSIWYGeditor. Foranintrod tiontoNine-patchgraphicsandhowtheywork, pleasereadthesectiononNine-patchintheNinepatchImagestopic. Here'saquickguidetocreateaNine-patchgraphicusingtheDraw9-patchtool.You'llneedthePNGimagewithwhichyou'dliketocreateaNinePatch. 1.Fromaterminal,launchthedraw9patchapplicationfromyourSDK/toolsdirectory. 2.DragyourPNGimageintotheDraw9-patchwindow(orFile>Open9-patch...tolocatethefile).Yourworkspacewillnowopen. Theleftpaneisyourdrawingarea,inwhichyoucaneditthelinesforthestretchablepatchesandcontentarea. Therightpaneisthepreviewarea,whereyoucanpreviewyourgraphicwhenstretched. 3.Clickwithinthe1-pixelperimetertodrawthelinesthatdefinethestretchablepatchesand(optional)contentarea. Right-click(orholdShiftandclick,onMac)toerasepreviouslydrawnlines. 可以在图片的框的四边上，按下鼠标左键并拖动可以画黑线，按下shift键的同时按鼠标左键并拖动可清除画的黑线。 A,左边那条黑色线代表图片垂直拉伸的区域，上边的那条黑色线代表水平拉伸区域。 他们的交集就区域代表就垂直拉伸和水平拉伸都可以进行的区域。 注意：我开始因为它是表达的只是他们的交集区域。 其实不是，它要表达的垂直拉伸和水平拉伸区域，不能只是交集区域。 因为如果只是交集区域的话，图片一放大，就不是长方形了。 B,右边的黑色线代表内容绘制的垂直区域，下边的黑色线代表内容绘制的水平区域 他们交集的区域就是内容所要绘制到的区域。 对于button来说就是文本的区域，这样就可以控制文本显示的区域。 如果下边和右边的黑线不是连续的，那它按最左端（上端）和最右端（下端）组成的线段来算内容区域。 注意：右边和下边的线是可选的，左边和上边的线不能省略。 4.Whendone,selectFile>Save9-patch... Yourimagewillbesavedwiththe.9.pngfilename. Draw9-patch的使用， NinePatchDrawable的使用和一般的Drawable一样，也是放在目录drawable下， xml中引用如android:background="@drawable/test"的形式，其中"test"为文件名 参考资料：<a target="_blank" rel="nofollow" href="http://www.coolapk.com/docs/guide/developing/tools/draw9patch.html" style="color:rgb(207,121,28); line-height:25px; text-decoration:none">http://www.coolapk.com/docs/guide/developing/tools/draw9patch.html</a> NinePatch TheNinePatchclasspermitsdrawingabitmapinninesections. Thefourcornersareunscaled;thefouredgesarescaledinoneaxis, andthemiddleisscaledinbothaxes.Normally, themiddleistransparentsothatthepatchcanprovideaselectionaboutarectangle. Essentially,itallowsthecreationofcustomgraphicsthatwillscalethewaythatyoudefine, whencontentaddedwithintheimageexceedsthenormalboundsofthegraphic. ForathoroughexplanationofaNinePatchimage,readthediscussioninthe2DGraphicsdocument. TheDraw9-PatchtooloffersanextremelyhandywaytocreateyourNinePatchimages,usingaWYSIWYGgraphicseditor. 他可以让我们在运行时定制stretchable的区域和区域的填充方式。 它的构造函数只有一个。 <table id="pubctors" style="line-height:21px; margin-top:0px; margin-right:0px; margin-bottom:1em; margin-left:1em; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; font-size:0.9em; border-collapse:collapse; empty-cells:show; width:933px"><tbody style="line-height:21px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial"> <tr style="line-height:21px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial"> <th colspan="12" style="line-height:21px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:12px; padding-bottom:6px; padding-left:12px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-style:initial; border-color:initial; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-color:rgb(204,204,204); border-right-color:rgb(204,204,204); border-bottom-color:rgb(204,204,204); border-left-color:rgb(204,204,204); text-align:left; vertical-align:top; background-color:rgb(222,232,241)"> Public Constructors</th> </tr> <tr style="line-height:21px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; background-color:rgb(246,246,246)"> <td style="line-height:21px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:12px; padding-bottom:6px; padding-left:12px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-style:initial; border-color:initial; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-color:rgb(204,204,204); border-right-color:rgb(204,204,204); border-bottom-color:rgb(204,204,204); border-left-color:rgb(204,204,204); text-align:right; vertical-align:top; background-color:inherit"> </td> <td width="100%" style="line-height:21px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:6px; padding-right:12px; padding-bottom:6px; padding-left:12px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-style:initial; border-color:initial; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-color:rgb(204,204,204); border-right-color:rgb(204,204,204); border-bottom-color:rgb(204,204,204); border-left-color:rgb(204,204,204); text-align:left; vertical-align:top; background-color:inherit"> <a rel="nofollow" href="http://developer.android.com/reference/android/graphics/NinePatch.html#NinePatch(android.graphics.Bitmap,%20byte%5B%5D,%20java.lang.String)" style="color:rgb(0,102,153); line-height:21px; text-decoration:none">NinePatch</a>(<a rel="nofollow" href="http://developer.android.com/reference/android/graphics/Bitmap.html" style="color:rgb(0,102,153); line-height:21px; text-decoration:none">Bitmap</a>bitmap, byte[] chunk,<a rel="nofollow" href="http://developer.android.com/reference/java/lang/String.html" style="color:rgb(0,102,153); line-height:21px; text-decoration:none">String</a>srcName)<div style="line-height:25px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:3px; padding-right:1em; padding-bottom:0px; padding-left:1em; border-top-width:0px; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-style:initial; border-color:initial; border-style:initial; border-color:initial"> Create a drawable projection from a bitmap to nine patches.</div> </td> </tr> </tbody></table>它的jni函数在frameworks\base\core\jni\android\graphics\NinePatch.cpp中
这里的byte[]chunk数据的格式一直不明白。
最后参看Android源码总算明白了。
chunk在jni（NinePatch.cpp）中主要用来构造Res_png_9patch这个结构体
chunk的至少有个sizeof(Res_png_9patch)大，即32个字节
Res_png_9patch的申明在
frameworks\base\incl?\utils\ResourceTypes.h
网上地址：http://android.git.kernel.org/?p=platform/frameworks/base.git;a=blob;f=incl?/utils/ResourceTypes.h
Res_png_9patch的定义在frameworks\base\libs\utils\ResourceTypes.cpp中。
/**
44*Thischunkspecifieshowtosplitanimageintosegmentsfor
45*scaling.
46*
47*ThereareJhorizontalandKverticalsegments.Thesesegmentsdivide
48*theimageintoJ*Kregionsasfollows(whereJ=4andK=3):
49*
50*F0S0F1S1
51*+-----+----+------+-------+
52*S2|0|1|2|3|
53*+-----+----+------+-------+
54*|||||
55*|||||
56*F2|4|5|6|7|
57*|||||
58*|||||
59*+-----+----+------+-------+
60*S3|8|9|10|11|
61*+-----+----+------+-------+
62*
63*Eachhorizontalandverticalsegmentisconsideredtobyeither
64*stretchable(markedbytheSxlabels)orfixed(markedbytheFy
65*labels),inthehorizontalorverticalaxis,respectively.Inthe
66*aboveexample,thefirstishorizontalsegment(F0)isfixed,the
67*nextisstretchableandthentheycontintoalternate.Notethat
68*thesegmentlistforeachaxiscanbeginorendwithastretchable
69*orfixedsegment.
70*
71*Therelativesizesofthestretchysegmentsindicatestherelative
72*amountofstretchinessoftheregionsborderedbythesegments.For
73*example,regions3,7and11abovewilltakeupmorehorizontalspace
74*thanregions1,5and9sincethehorizontalsegmentassociatedwith
75*thefirstsetofregionsislargerthantheothersetofregions.The
76*ratiosoftheamountofhorizontal(orvertical)spacetakenbyany
77*twostretchableslicesisexactlytheratiooftheircorresponding
78*segmentlengths.
79*
80*xDivsandyDivspointtoarraysofhorizontalandverticalpixel
81*indices.ThefirstpairofDivs(ineitherarray)indicatethe
82*startingandendingpointsofthefirststretchablesegmentinthat
83*axis.Thenextpairspecifiesthenextstretchablesegment,etc.So
84*intheaboveexamplexDiv[0]andxDiv[1]specifythehorizontal
85*coordinatesfortheregionslabeled1,5and9.xDiv[2]and
86*xDiv[3]specifythecoordinatesforregions3,7and11.Notethat
87*theleftmostslicesalwaysstartatx=0andtherightmostslices
88*alwaysendattheendoftheimage.So,forexample,theregions0,
89*4and8(whicharefixedalongtheXaxis)startatxval0and
90*gotoxDiv[0]andslices2,6and10startatxDiv[1]andendat
91*xDiv[2].
92*
93*Thearraypointedtobythecolorsfieldlistscontainshintsfor
94*eachoftheregions.Theyareorderedaccordingleft-to-rightand
95*top-to-bottomasindicatedabove.Foreachsegmentthatisasolid
96*colorthearrayentrywillcontainthatcolorval;otherwiseit
97*willcontainNO_COLOR.Segmentsthatarecompletelytransparent
98*willalwayshavethevalTRANSPARENT_COLOR.
99*
100*ThePNGchunktypeis"npTc".
101*/
102str tRes_png_9patch
103{
104Res_png_9patch():wasDeserialized(false),xDivs(NULL),
105yDivs(NULL),colors(NULL){}
106
107int8_twasDeserialized;
108int8_tnumXDivs;
109int8_tnumYDivs;
110int8_tnumColors;
111
112//Thesetellwherethenextsectionofapatchstarts.
113//Forexample,thefirstpatchincl?sthepixelsfrom
114//0toxDivs[0]-1andthesecondpatchincl?sthepixels
115//fromxDivs[0]toxDivs[1]-1.
116//Note:allocation/freeofthesepointersislefttothecaller.
117int32_t*xDivs;
118int32_t*yDivs;
119
120int32_tpaddingLeft,paddingRight;
121int32_tpaddingTop,paddingBottom;
122
123enum{
124//The9patchsegmentisnotasolidcolor.
125NO_COLOR=0x00000001, 126127//The9patchsegmentiscompletelytransparent. 128TRANSPARENT_COLOR=0x00000000 129}; 130//Note:allocation/freeofthispointerislefttothecaller. 131uint32_t*colors; 132 133//ConvertdatafromdevicerepresentationtoPNGfilerepresentation. 134voiddeviceToFile(); 135//ConvertdatafromPNGfilerepresentationtodevicerepresentation. 136voidfileToDevice(); 137//Serialize/Marshallthepatchdataintoanewlymalloc-edblock 138void*serialize(); 139//Serialize/Marshallthepatchdata 140voidserialize(void*outData); 141//Deserialize/Unmarshallthepatchdata 142staticRes_png_9patch*deserialize(constvoid*data); 143//Computethesizeoftheserializeddatastr ture 144size_tserializedSize(); 145}; 注意1：Res_png_9patch的大小为32 //Thesizeofthisstr tis32bytesonthe32-bittargetsystem //4*int8_t //4*int32_t //3*pointer 注意2:xDivs和yDivs用于确定可stretchable区域。 比如： xDivs[0]和xDivs[1]确定一块可stretchable区域， 然后xDivs[2]和xDivs[3]又确定一块可stretchable区域 yDivs和xDivs一样。 注意2：colors指明了每个区域的填充颜色。 这里的区域并不区分非stretchable区域和stretchable区域 其中NO_COLOR=0x00000001，表示用图片的填充 TRANSPARENT_COLOR=0x00000000表示完全透明。 区域的顺序是从左到右，再从下到下。 下面详细说明byte[]chunk的和Res_png_9patch中变量的对应关系。 第0个字节wasDeserialized备注 第1个字节numXDivsX方向可stretchable的区域数量 第2个字节numYDivsY方向可stretchable的区域数量 第3个字节numColorscolor数（每个区域对应一个color） 第4,5,6,7字节xDivsz指针在chunk中没意义 第8,9,10,11字节yDivsz指针在chunk中没意义 第12,13,14,15字节paddingLeft没发现有什么用 第16,17,18,19字节paddingRight没发现有什么用 第20,21,22,23字节paddingTop没发现有什么用 第24,25,26,27字节paddingBottom没发现有什么用 第28,29,30,31字节colors指针在chunk中没意义 从sizeof(Res_png_9patch)开始的数据（即第32个字节开始）： 首先是xDivsz指针指向的内容，其大小为numXDivs个int32_t 然后是yDivs指针指向的内容，其大小为numYDivs个int32_t 最后是colors指针指向的内容，其大小为numColors个int32_t（ARGB格式） 注意：对于int32_t这种多字节的类型是高字节在内存的高位 示例1： 代码1 BitmapDrawablebitmapDrawable=(BitmapDrawable)context.getResources().getDrawable(R.drawable.icon); Bitmapbitmap=bitmapDrawable.getBitmap(); intwidth=bitmap.getWidth(); System.out.println("width:"+width); bytenumXDivs=4; bytenumYDivs=4; bytenumColors=numXDivs; intpaddingLeft=10; intoffset=0; numColors=(byte)((numColors+1)*(numYDivs+1)); intsize=32+(numXDivs+numYDivs+numColors)*4; bytechunk[]=newbyte[size]; chunk[0]=0; chunk[1]=numXDivs; chunk[2]=numYDivs; chunk[3]=numColors; bytepVal=0; chunk[4]=pVal; chunk[5]=pVal; chunk[6]=pVal; chunk[7]=pVal; chunk[8]=pVal; chunk[9]=pVal; chunk[10]=pVal; chunk[11]=pVal; offset=12; putInt(chunk,offset,paddingLeft); offset+=4; offset=32; putInt(chunk,offset,10); offset+=4; putInt(chunk,offset,30); offset+=4; putInt(chunk,offset,40); offset+=4; putInt(chunk,offset,width); offset+=4; putInt(chunk,offset,11); offset+=4; putInt(chunk,offset,18); offset+=4; putInt(chunk,offset,30); offset+=4; putInt(chunk,offset,56); offset+=4; intcolor=0x00000F; intcolor2=0xFFFFF0; intcolorInc=(color2-color)/numColors; for(inti=0;i<numColors;i++) { putInt(chunk,offset,0x2F000000|color); offset+=4; color+=colorInc; } img9Patch=newNinePatch(bitmap,chunk,null); 代码2： staticvoidputInt(bytearray[],intoffset,intval) { array[offset]=(byte)(val&0xFF); val=val>>8; array[offset+1]=(byte)(val&0xFF); val=val>>8; array[offset+2]=(byte)(val&0xFF); val=val>>8; array[offset+3]=(byte)(val&0xFF); } 代码3: RectFrect=newRectF(0,0,Game.width,Game.height); img9Patch.draw(canvas,rect); 注意1:rect是要把img9Patch画到的区域。

分享到：