3分钟学习点九图的制作和使用(聊天气泡的实现)

我们都知道Android平台有多种不同的分辨率,很多控件的切图文件在被放大拉伸后,边角会模糊失真,有的甚至会变形。那么如何去避免这种情况呢?

答案是:使用 点九图(xxx.9.png) 代替那些随着分辨率需要拉伸改变、或者随着程序运行需要改变的图片,可以避免变形、模糊失真等不良效果!

使用点九图的优势:

  • 拉伸效果:在Android平台下使用点九PNG技术,可以将图片横向和纵向同时进行拉伸,以实现在多分辨率下的完美显示效果

在这里插入图片描述

  • 显示效果:使用点九图可以减少由于屏幕素质差而导致的横纹,如下,点九图的横纹明显少于PNG格式(仔细观察)
    在这里插入图片描述
  • 减少工程量&安装包大小:使用点九图,可以用一套界面去适配各种分辨率的屏幕,并且可以减少安装包的大小

制作(两种方法):

这里不讲SDK下的工具draw9patch,因为我觉得AndroidStudio里面自带的更方便

工具:PS(或者其他可以编辑图片的工具)、AndroidStudio

准备工作:

  1. 把你想要制作成点九图的图片 四周都加上一个像素(px)的空白区域

    PS打开画布大小,快捷键:Ctrl+Alt+C,把相对取消勾选,然后把单位改成像素,宽度和高度都在原有的基础上**+2**,然后点击确定,PS就会自动帮你在你图片的上下左右加上1像素的空白位置
    在这里插入图片描述

全程PS制作:(无预览图)

首先要知道,点九图肯定是想让那些纯色(或者渐变色),不会被拉伸变形的地方作为可拉伸区域,那些有图像的地方不让他去拉伸。

上下的黑边:黑边所在区域的 纵向 作为可拉伸区域(如下图)

左右的黑边:黑边所在区域的 横向 作为可拉伸区域

填充好了黑色以后,直接保存图片为xxx.9.png的格式复制到你项目的 res/Drawable 就可以了!(也可以先保存为PNG格式,然后重命名修改)

注意:手绘的黑线拉伸区必须是#000000,透明度100%,并且图像四边不能出现半透明像素

在这里插入图片描述

PS+AndroidStudio制作:(可视化操作,有预览图)

  1. 保存图片,文件拓展名改成 xxx.9.png ,把这张点九图复制到你项目的res/Drawable文件夹中

  2. 点开图片:点开图片,左下角切换成点九图的编辑模式,然后四个CheckBox是一些区域的显示(比如你设置的可拉伸区域)
    在这里插入图片描述

  3. 然后就可以开始设置这张点九图的拉伸区域了(边缘1像素的位置是你的操作区

    你需要用鼠标在图片最边缘那1像素的空白位置拖出一根线来(如图,横向区域也一样拖),黄色的区域就代表可拉伸区域,并且可以设置多个可拉伸区域,这样可以保证图像的布局不发生变化,比如这张图片上面中间部分,可以让无论图片怎么拉伸,都处于图片的上面中间(如果图片比较大建议把视图放大一些再拖)

在这里插入图片描述

大功告成!我是纵向设置了两个区域,横向设置了一个区域,可以看到右边的拉伸预览图,图片上图像的布局和原图一样,并且没有被图片的拉伸所影响!

在这里插入图片描述
注意:由于点九图的特性是在拉伸图片的时候保证图片的效果,而不包括缩,所以点九图一般是越小越好

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章