专栏首页程序员叨叨叨5分钟教你制作.9图片

5分钟教你制作.9图片

前情提要

.9图片

之前项目中有用到.9图片,因精力有限,一直没有去尝试着弄过。如今因公司发展问题集体裁员,赋闲在家,便抽空简单地了解了一下.9图片的使用,作文如下,以做积累。

需求概要

在Android Studio环境下将PNG图片制作成.9图片,使之实现纯色背景自适应拉伸,图案内容保持原始比例。

准备素材及工具

  • PNG图片一张
  • Android Studio

.9.png认知

PNG是一种非失真性压缩位图图形文件格式。而.9.png是基于PNG图片,对其进行进行特殊处理,使之实现局部拉伸的图片格式。.9.png可实现两种效果:

效果1

效果2

  • 作为资源图片纯色部分进行局部拉伸,使图案部分保持原始比例
  • 作为输入框的背景图片,使图片部分区域拉伸,部分区域实现文本内容的填充

.9图片制作

  • 修改图片格式 首先找一张普通的png图片,将其导入到Android Studio的drawable目录下。

普通png图片 修改其后缀名,由.png改为.9.png。

.9.png图片 双击指定.9格式的png图片,Android Studio右侧显示板会显示如下图编辑面板。

.9.png编辑面板

  • 编辑规则

图片编辑规则 由上图可知,一张图片可分为四条边,其中是负责编辑图片拉伸区域的,是负责编辑图片内容填充区域的。那怎么理解呢?首先我们来看看文章一开始的图片《.9图片》,可以看到图片的上边界的左右两端有不太明显的黑线,放大后如下图所示。

图片上边界-放大 上边界黑线表示水平方向上,黑线覆盖的区域可以拉伸,同理左边界黑线表示垂直方向上黑线覆盖的区域可以拉伸;对应而言,右边界和下边界分别表示垂直方向上和水平方向上黑线覆盖的区域可以填充内容。那么填充内容是什么意思呢?我们先来看一张图。

图片来自手机QQ 可以从图中看到“嗯,差不多了”所占据的区域即填充内容的区域,其对应在背景图右边界下边界的区域就是.9图片制作时需要画下的黑线,此黑线用作标记图片文本内容的填充。在水平和竖直方向上,黑线覆盖的区域用于填充文本。

  • 绘制操作 那么如何绘制出黑线呢?在Android Studio的.9.png绘制面板中可以看到图片的上下左右区域,如下图红色框框区域。

绘制操作 点击任意红色框框区域,按住鼠标进行拖动,可实现黑线绘制。若绘制黑线后需要对黑线覆盖的区域进行调整,可将鼠标移至黑线两段的竖直方向的线,按住鼠标进行拖动可调整黑线的长度(覆盖区域)。

绘制操作 点击除黑线的其他区域,如下图红色框框中的区域,可添加新的黑线,对多个区域进行拉伸。

绘制操作 绘制完毕后,可实现图片纯色部分拉伸,图案部分保持原始比例。

绘制操作 其效果图如下:

纵向适应

横向适应 按如上操作,亦可完成之前所述效果2的实现,即:作为文本输入框的背景图片,实现填充内容区域不拉伸,其他区域适应文本内容大小。

.9.png实现QQ气泡效果

写在最后

实际开发中,美工裁剪好切图后发给开发者的往往是普通图片,如果开发中有使用到.9图片的需求,而读者们若对此不熟悉,此文会是很好的帮助!感谢阅读!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 私人订制Android本地图片选择器

    史上最强的安卓图片选择器——GalleryFinal; 简书博客地址——http://www.jianshu.com/p/48ddd6756b7a

    代码咖啡
  • 1.1 Programmable Graphics Processing Unit 发展历程

    面纱掩盖了过去、现在和将来,历史学家的使命是发现它现在是什么,而不是过去是什么。 ——Henry David Thoreau

    代码咖啡
  • win10下MarkdownPad 2的html渲染出错解决

    今天下载了MarkdownPad 2,打开后发现预览效果出错了,本来以为自己下载了破解版的缘故导致软件不稳定,后来查找了网上,发现这是一个普遍的问题,根据软件的...

    代码咖啡
  • Android-.9图详解

    Android设备适配,图片方面很重要的一部分就是.9图的使用了,我们今天就来记录一下。

    android_薛之涛
  • Unity精灵动画 2D碰撞

    将包含多个小图的一张大图SpriteMode设置为Multiple,在SpriteEditor中将素材进行切割,得到小的图片资源

    祝你万事顺利
  • Java工具类-数学(四边形工具类)

    cwl_java
  • 最近点对问题

    AI那点小事
  • 解决WordPress4.4.1不支持图片暗箱问题,Begin主题适用

    前几天更新 WordPress 最新 4.41 版本之后,发现文章之前的图片暗箱弹出功能没了,而且之前设置好是缩略图尺寸也没了,直接就是最大尺寸。 看了下当前页...

    张戈
  • macOS 恶意软件分析过程

    Hacker 取得了我们系统权限后通常会做那些事情?植入 shell、恶意软件、留持久化的后门。在当下的 APT 事件中,远控木马扮演着一个重要的角色,这些木马...

    信安之路
  • OpenGL自制游戏引擎-GreateWindow

    自制游戏引擎,学习OpenGL相关知识并进行实践,学习引擎底层知识,提高对游戏引擎的认识。

    祝你万事顺利

扫码关注云+社区

领取腾讯云代金券