• 热门专题

Android开发之点九图的制作说明

作者:  发布日期:2014-10-29 18:40:59
  • 总结: 左边的点代表垂直拉伸的区域,
    上边的点代表水平拉伸的区域。


    右边的点代表文字等的垂直可可显示区域,

    下边的点代表文字等的水平可显示区域。


    左上重合的区域就是拉伸区域。

    右下重合的区域就是显示区域。


    以下是转载:

    “点九”是andriod平台的应用软件开发里的一种特殊的图片形式,文件扩展名为:.9.png

    智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。

    我们都知道android平台有多种不同的分辨率,很多控件的切图文件在被放大拉伸后,边角会模糊失真。

    OK,在android平台下使用点九Z喎"http://www.it165.net/pro/pkqt/" target="_blank" class="keylink">QTke8vMr1o6y/ydLUvavNvMasuuHP8rrN193P8s2syrG9+NDQwK3J7KOs0tTKtc/W1Nq24LfWsebCys/CtcTN6sPAz9TKvtCnufuhozwvcD4KPHA+CqG+xtXNqMCtyey6zbXjvsXArcns0Ke5+7bUscihvzwvcD4KPHA+CjxpbWcgc3JjPQ=="http://www.it165.net/uploadfile/files/2014/1029/20141029173424323.jpg" alt="">

    对比很明显,使用点九后,仍能保留图像的渐变质感,和圆角的精细度。

    从中我们也可以理解为什么叫“点九Z喎"http://www.it165.net/pro/pkqt/" target="_blank" class="keylink">QTkehsaOsxuTKtc/gtbHT2rDR0rvVxXBuZ828t9azycHLObj2sr+31qOovsW5rCYjMjY2ODQ7o6mjrLfWsfDOqjS49r3Ho6w0zPWx36Os0tS8sNK7uPbW0Lzkx/jT8qOsNLj2vcfKx7K71/bArcn9tcSjrMv50tS7ucTc0rvWsbGjs9bUsr3HtcTH5c7617TMrKOstvgyzPXLriDGvbHfus20udaxsd+31rHw1rvX9suuxr26zbS51rHArcnso6zL+dLUsru74bP2z9ax37vhsbvArbTWtcTH6b/2o6zWu9PQ1tC85NPDutrP39a4tqi1xMf40/LX9sCtyeyho73hufvKx828xqyyu7vh19/R+TwvcD4KPHA+Crb+LqGwteO+xaGxtcTWxtf3t723qDwvcD4KPHA+Cre9t6gxo7rKudPDIKGwZHJhdzlwYXRjaKGxuaS+37vm1sajrMH3s8zI58/CPGJyPgo8aW1nIHNyYz0="http://www.it165.net/uploadfile/files/2014/1029/20141029173424324.jpg" alt="">

    1. 安装工具

    首先你需要给自己的电脑安装上java于系统的默认目录下。没有安装java的同学可以在百度搜索:jdk-6u20-windows-i586,安装包大小80M左右。

    然后使用andriod模拟器—android-sdk-windows,打开SDK/tools目录下的“draw9patch.bat”文件,出现载入窗口:

    2.导入并编辑

    将png图片拖拽到该窗口中

    如下图,自动进入编辑界面。图中介绍了每个区域的内容及功能注释。

    预览右侧的视图发现,图片的边缘处于普通拉伸状态。

    现在我们在图片边缘点击左键,绘制出黑线,即图片需要被拉伸的部分。如下图,对4条黑线做了注释。

    如果失误多绘的部分,可按住shift键的同时点击鼠标左键擦除)。

    如图所见,三种拉伸结果均已完美显示,已实现我们想要的拉伸效果,假设这是一个有显示文字的窗体,那么文字显示的区域,程序也会控制在黑线对应范围。

    以下这些图片,包括异性(非规则图形)图片,也可以通过点九PNG实现横纵向的自然拉伸。

    qqGwKi45LnBuZ6GxJiMyNjY4NDvKvbXEzbzGrKOszbzGrMnPz8LX89PSuPfU9rzTwcsxcHi1xLraz9+hozwvcD4KPHA+CjwvcD4KPHA+Cre9t6gyo7rWsb3TyrnTwyBQU7XIxr3D5rmkvt+75tbGo6zB97PMzbzI58/CPGJyPgo8aW1nIHNyYz0="http://www.it165.net/uploadfile/files/2014/1029/20141029173425332.jpg" alt=""http://www.it165.net/qq/" target="_blank" class="keylink">qqO6PC9wPgo8cD4KMS4gIMi3tqjH0M28uvPWsb3TuMSx5M28xqy1xLutsry089Cho6w8L3A+CjxwPgoyLiAgyta2r72ryc/Pwtfz09K499T2vNMxcHg8L3A+CjxwPgozLiAgyrnTw8emscq5pL7fo6zK1ravu+bWxsCtyezH+NPyo6zJqyYjMjA1NDA7sdjQ686qutrJq6OoIzAwMDAwMKOpoaM8L3A+CjxwPgo0LiAgtOa0os6qd2Viy/nTwyYjMjY2ODQ7yr2jrNGh1PFwbmctMjSjrLSitObKscrWtq+9q7rz17rD+7jEzqouOS5wbmc8L3A+CjxwPgqyu7n91eLW1re9t6i1xMixtePKx7K7xNzKtcqx1KTAwKOsxdC2z7KisuLK1MCtyezH+NPytcTXvMi30NShozwvcD4KPHA+Csq508O0y7e9t6jQ6NKq16LS4tLUz8IyteM6PC9wPgo8cD4KMS4gyta75rXEutrP38CtyezH+LHY0OvKxyMwMDAwMDCjrM24w/e2yDEwMCWjrLKix9LNvM/xy8Sx37K7xNyz9s/WsOvNuMP3z/HL2KO7PC9wPgo8cD4KMi4gxOO1xC45LnBuZ7HY0Ou75tPQwK3J7Mf40/K1xLraz9+juzwvcD4KPHA+Crfx1PKjrM28xqyyu7vhzai5/WFuZHJvaWTPtc2zseDS66OstbzWwrPM0PKxqLTtoaO7udPQo6zT0M2s0afSybvzveLRucv1YXBrzsS8/rrzo6wuOS5wbmfNvMaswO+1xLraz9/U9cO0w7vBy6O/PC9wPgo8cD4KxMfKx9LyzqphbmRyaW9ks8zQ8tTasNHOxLz+tPKw/LPJYXBrtcTKsbryo6yzzNDyu+HX1LavsNEqLjkucG5nzbzGrLHf1LW1xLraz9/IpbX0o6zL+dLUveLRucv1YXBruvO/tLW9tcQuOS5wbmfOxLz+ysfDu9PQutrP37XEoaM8L3A+CjxwPgrI/S7KudPDobC1477FobG1xNLi0uU8L3A+CjxwPgq52NPaz8LNvKOsvq25/bLiytS3os/WyrnTw8bVzahwbme1xM/Uyr7Qp7n7s/bP1sP3z9S1xLHkyau64c7GoaO2+C45LnBuZ828xqy1xM/Uyr7Qp7n7w/fP1NPF09rG1c2ocG5noaM8YnI+CjxpbWcgc3JjPQ=="http://www.it165.net/uploadfile/files/2014/1029/20141029173425333.jpg" alt="">

    使用.9.png格式后,横纹问题基本已解决。因为对于.9.png图片,android系统程序有对其优化的算法。

    由于android手机屏幕的材质质量差距大。很多屏幕不支持16位以上的颜色显示。

    所以渲染后结果出现丢失颜色,故造成横纹显示。

    经与多款android手机对比后发现,屏幕越次的手机横纹越明显。

    而使用了*.9.png图片技术后,只需要采用一套界面切图去适配不同的分辨率,而且大幅减少安装包的大小。而且这样程序不需要专门做处理的就可以实现其拉伸,也减少了代码量和开发工作量。

延伸阅读:

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规