1 背景自适应且不失真问题的存在背景自适应且不失真问题的存在 制作自适应背景图片是 UI 开发的一个广泛问题 也是界面设计师渴望解决的问题 我 相信我们彼此都深有体会 比如 列表的背景图一定 但是列表的高度随着列表数据项会发生变化 标题栏的背景 无论横屏还是竖屏 高分辨率还是低分辨率 都能自动填充满 而且不失真等等背景问题 根据以往的经验 我们一般采用先切图后拼凑的做法 这种做法本来我想在这里和大 家介绍一下 其实有的时候还是很有用的 但是说起来会比较麻烦 就不说这个非重点了 略去 Android 针对这种情况 专门制作了一种 9 PNG 格式来解决这个问题 2 9 PNG 格式 格式 我不想在这里过多的讨论 PNG 格式的定义问题 但是 9 PNG 确实是标准的 PNG 格式 只是在最外面一圈额外增加 1px 的边框 这个 1px 的边框就是用来定义图片中可扩展的和 静态不变的区域 特别说明 left 和 top 边框中交叉部分是可拉伸部分 未选中部分是静态 区域部分 right 和 bottom 边框中交叉部分则是内容部分 变相的相当于定义看一个内边 距 神似 padding 功能 后面我会单独介绍一下 这个参数是可选的 如下图 在 Android 中 以 9 PNG 格式的图片未背景 则能够自定义拉伸而不失真 比如系统的 Button 就是一个 典型的例子 其实呢 无论是 left 和 top 还是 right 和 bottom 都是把图片分成 9 块 边角四块是不 能缩放的 其他的四块则是允许缩放的 所以叫做 9 PNG 3 使用使用 Draw9Patch jar 制作制作 9 PNG 图片之定义拉伸区域 图片之定义拉伸区域 前面已经了解到 9 PNG 格式的工作方式 下面我们使用谷歌提供的 Draw9Patch 运行 android sdk windows tools 目录下的 Draw9Patch bat 来制作 9 PNG 图片 第一步 准备要拉伸的图片 第一步 准备要拉伸的图片 非常小的一张图片 我希望以此为背景 中间部分填充文章内容 第二步 制作第二步 制作 9 PNG图片图片 打开 Draw9Patch 把图片拖进去 如下 默认的拉伸是整体拉伸 其实边框部分我们并不想拉伸 好 我们自己来定义拉伸区 域 如下图 然后点击 File 导出为 content 9 png 第三步 在第三步 在layout文件中使用制作的文件中使用制作的 9 PNG图片图片 新建工程 Draw9Patch 默认主 Activity 为 Draw9PatchActivity java 1 Override 2 public void onCreate Bundle savedInstanceState 3 4 super onCreate savedInstanceState 5 setContentView R layout main 6 我们把 content 9 png 文件拷贝到 res drawable 文件夹下 打开 res layout 目录下的 main xml 申明如下 01 02 09 16 如图 我们修改 text 01 02 09 16 如图 可以看出 边框非常的清晰 下图是未使用 9 PNG 的对比图 而且也不是我们要的效 果 到这里为止 我们已经基本会制作 9 PNG 图片了 为了知识体系的全面性和深入性 我们继续 4 使用使用 Draw9Patch jar 制作制作 9 PNG 图片之定义内容区域 图片之定义内容区域 是不是觉得文字和边距挨的太近 好 我们使用 right 和 bottom 边的线来定义内容区 域 来达到增大内边距的目的 我们定义了一个很小的内容区域 其他的地方则自动充当边框 从而使内边距显的很 大 如下图 在这里 我要特别说明 一开始为了增大内边距 很容易惯性思维 在中 申明 android padding 10dip 之类的 我在这里劝告朋友们不要这么做 一是你将无法 预知你的显示 二是这比较混淆 因为设置内容区域就是确定 padding 所以我在前面部 分说他们是神似 我个人认为通过内容区域设定 padding 比在布局 xml 中定义 padding 更 优雅 更简洁 关于 Draw9Patch 工具的其他使用说明 我在次不再累述 因为要说的话太多 为了 节省篇幅 请参考官方文档 5 制作制作 9 PNG 的高级技巧 的高级技巧 对于初学 Draw9Patch 的人来说 这可以算是高级技巧