android 程序中使用.9图片

水深无声 2023-10-17 17:33 125阅读 0赞

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-layout:fixed; width:790px; color:rgb(68,68,68); font-family:Tahoma,'Microsoft Yahei',Simsun; font-size:12px; line-height:18px; text-align:start; background-color:rgb(245,245,245)"> 
 <tbody style="word-wrap:break-word"> 
  <tr style="word-wrap:break-word"> 
   <td style="word-wrap:break-word; font-size:14px"> <span style="font-size:18px; word-wrap:break-word"></span> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">一、什么是9.png：</span></span> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp;&nbsp; &nbsp; 9.png格式的图片是<a href="http://www.apkbus.com/" style="word-wrap:break-word; color:rgb(51,102,153); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">安卓</a>平台上新创的一种被拉伸却不失真的玩意（挺高级的吧）</span></span> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp;&nbsp; &nbsp;首先我们还是得介绍一下，9.png图片他的具体不同之处，它的四周与普通的png图片相比多了一个像素位的白色区域，</span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">该区域</span></span> 
     <span style="font-family:Arial; color:rgb(51,51,51)">只有在图片被还原和制造的时候才能看到，当打包后无法看见，并且图片的总像素会缩小2个像素，比如23x23像素的9.png图片被</span> 
     <span style="font-family:Arial; color:rgb(51,51,51)">打包后会变成21x21像素。所以我们在制作的时候要注意掌握尺寸。</span> 
     <span style="font-family:Arial; color:rgb(51,51,51)">当我们制作出9.png图片的时候你还有惊奇的发现一个几KB或者几十KB的图片，变得非常的小，一般只有几百个字节那么大，</span> 
     <span style="font-family:Arial; color:rgb(51,51,51)">系统加载起来当然会更加的流畅咯。</span> 
    </div> <br style="word-wrap:break-word"> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;.9图片的制作工具在解压的sdk目录下tools：draw9patch，双击即可打开。<span style="font-family:Arial; color:rgb(51,51,51)">将你用PS制作的图片素材，拖到该窗口中，出现如图：</span><br style="word-wrap:break-word"> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="color:rgb(51,51,51); word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word"><span style="font-size:18px; word-wrap:break-word">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;解释：中间黑红条纹部分表示不能编辑，边缘白色透明框就是上述介绍的增加的一像素边框</span></span></span> 
    </div> 。<br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<span style="font-size:18px; word-wrap:break-word">将鼠标放在白色边框，点住左键不放拖动，会出现黑色线条如图：</span></span></span> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:18px; word-wrap:break-word"><span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;解释：1号黑色条位置向下覆盖的区域表示图片横向拉伸时，只拉伸该区域&nbsp;</span></span><br style="word-wrap:break-word"> <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2号黑色条位置向右覆盖的区域表示图片纵向拉伸时，只拉伸该区域&nbsp; &nbsp;</span></span><br style="word-wrap:break-word"> <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 3号黑色条位置向左覆盖的区域表示图片纵向显示内容的区域&nbsp;</span></span><br style="word-wrap:break-word"> <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 4号黑色条位置向上覆盖的区域表示图片横向显示内容的区域</span></span><span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">没有黑</span></span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:18px; word-wrap:break-word"><span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 色条的位置覆盖的区域是图片拉伸时保持不变（比如，如果图片的</span></span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:18px; word-wrap:break-word"><span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 四角为弧形的时候，当图片被任意拉伸时，四角的弧形都不会发生</span></span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:18px; word-wrap:break-word"><span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 改变）</span></span><span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">如果失误多选了部分，可按住shift键，点击鼠标左键去掉黑</span></span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:18px; word-wrap:break-word"><span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 色条。</span></span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:18px; word-wrap:break-word"><span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word"><br> </span></span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<span style="font-size:18px; word-wrap:break-word">右边3个黑色图形区域为显示当前拉伸效果</span></span></span> 
    </div> <span style="font-size:18px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; 选择好区域后，点击左上file-》save 9-path，保存图片，后缀名为xxx.9.png</span></span> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="font-family:Arial; word-wrap:break-word"><span style="font-size:18px; word-wrap:break-word"><span style="color:#000000; word-wrap:break-word">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; 我们可以看见图片的周围多了4个黑色条，不要急这个图片还不能用，这就是</span></span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-family:Arial; word-wrap:break-word"><span style="font-size:18px; word-wrap:break-word"><span style="color:#000000; word-wrap:break-word">&nbsp; &nbsp; 原始的9.png图片，当我们进行下一步操作后，这个图片就变得正常了。</span></span></span> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="font-family:Arial; word-wrap:break-word"><span style="color:#000000; word-wrap:break-word">去黑边：</span><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word; color:rgb(46,139,87)"><span style="font-family:Arial; word-wrap:break-word">解压xUltimate-d9pc-x86.rar压缩包<br style="word-wrap:break-word"> 1.把预处理黑边的图片到目录example1\res\drawable-hdpi下<br style="word-wrap:break-word"> 2.双击xUltimate-d9pc.exe，听到电脑滴的一声，即可完成去黑边（此时的9.png图片内部加载了黑边信息）<br style="word-wrap:break-word"> 3.根目下会自动生成done文件，在done\example1\res\drawable-hdpi下，就是我们经过处理的9.PNG图片<br style="word-wrap:break-word"> 4.这个图片就是我们要美化替换的图片</span></span> 
    </div> <br style="word-wrap:break-word"> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word; color:rgb(46,139,87)"><span style="font-family:Arial; word-wrap:break-word">======================================</span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="color:red; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">反编辑出来的图片作黑边模版</span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word; color:rgb(46,139,87)"><span style="font-family:Arial; word-wrap:break-word">=====================================<br style="word-wrap:break-word"> </span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">解压</span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-family:Arial; word-wrap:break-word"><a href="http://www.miui.com/forum-attachment-aid-NTUxNTR8ZjZjYjM4YWZ8MTMwMzEzOTE1OXwzMjYyOQ%3D%3D.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow"><span style="color:#00ff; word-wrap:break-word">apktool.zip</span></a></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">压缩包</span></span> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">点安装.bat”，此时会在系统c盘生成几个文件。</span></span> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp;&nbsp; &nbsp; 3、将你要修改的framework-res.apk（当然也可以是其他系统程序apk文件，如music.apk）重命名为update.apk，并放到c：盘根目录</span></span> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">（必须放c：，因为后面执行的批处理文件编写的是在c：工作）</span></span> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">&nbsp; &nbsp;&nbsp; &nbsp; 4、执行c：根目录下unpack.bat，此时会在c：生成一个update的文件夹，里面的内容就是你要修改的APK文件，并且当你打开drawable-hdpi</span></span> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="color:#333333; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">文件夹时你会发现里面的9.png图片变得和我们上面制作的相像了，都有4条黑边，这就是该工具将其还原了。</span></span> 
    </div> <br style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word; color:rgb(46,139,87)"><span style="font-family:Arial; word-wrap:break-word">=======================</span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="color:red; word-wrap:break-word"><span style="font-family:Arial; word-wrap:break-word">按AIT+TAB键，转换窗口。对照黑边模版，画的黑边速度快，准</span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word; color:rgb(46,139,87)"><span style="font-family:Arial; word-wrap:break-word">===============================</span></span> 
    </div> <br style="word-wrap:break-word"> </td> 
  </tr> 
 </tbody> 
</table>

[4b26d01d-c056-3b85-9fe7-4f56209009d9.jpg][] (174.82 KB, 下载次数: 4)

![4b26d01d-c056-3b85-9fe7-4f56209009d9.jpg][4b26d01d-c056-3b85-9fe7-4f56209009d9.jpg 1]

[3e9b5a41-c532-3e6b-b4e9-7fe07e6dba99.jpg][] (170.78 KB, 下载次数: 0)

![3e9b5a41-c532-3e6b-b4e9-7fe07e6dba99.jpg][3e9b5a41-c532-3e6b-b4e9-7fe07e6dba99.jpg 1]

[4b26d01d-c056-3b85-9fe7-4f56209009d9.jpg]: http://www.apkbus.com/forum.php?mod=attachment&aid=MjY3OTJ8ZDMzYWIwNzZ8MTM0NTUxMjExOHwwfDU2ODQ5&nothumb=yes
[4b26d01d-c056-3b85-9fe7-4f56209009d9.jpg 1]: http://www.apkbus.com/data/attachment/forum/201206/27/1157406cainn6bvicbugwg.jpg
[3e9b5a41-c532-3e6b-b4e9-7fe07e6dba99.jpg]: http://www.apkbus.com/forum.php?mod=attachment&aid=MjY3OTN8NDkyNWU5NGR8MTM0NTUxMjExOHwwfDU2ODQ5&nothumb=yes
[3e9b5a41-c532-3e6b-b4e9-7fe07e6dba99.jpg 1]: http://www.apkbus.com/data/attachment/forum/201206/27/115951t9mctzovlrcggcdd.jpg