教你快速使用AndroidStudio制作出一张合格.9图片

前言

在实际的Android开发项目中,为了适配不同分辨率的Android设备,经常会碰到制作.9图片的情况,由于这种格式的图片可以设定一张图片中哪些区域可以拉伸,哪些区域不可以拉伸,同时可以把内容显示区域的位置设置清楚。.9图片制作的工具有很多,但是AndroidStudio就自带.9图片制作的工具,但是网上关于如何具体用AndroidStudio制作.9图片的过程却非常少。


.9图片介绍

F0745CC0-9403-491D-A0E3-FABDB5650482.png

.9图片和一般的png图片相比,会多出四条黑线,如果所示共有
上(区域1)、左(标识2)、 右(标识3)、 下(标识4)四个区域,其中

(1)标识1和标识2 :表示图片可以拉伸的区域

标识1: 图片水平方向可以拉伸的区域,非黑色区域是不会进行拉伸的
标识2: 图片竖直方向可以拉伸的区域,非黑色区域是不会进行拉伸的

如图:图片水平方向拉伸时,只有标识1的图片区域可以进行拉伸,其它区域将保持原来的像素而不会由于拉伸而变形;

图片竖直方向进行拉伸时,只有标识2图片区域会进行像素拉伸,其它竖直方向的图片区域将保持原来的像素而不会由于拉伸而变形。

(2) 标识3和标识4:表示内容可以拉伸的区域

标识3:表示竖直方向内容可以显示的区域
标识4:表示水平方向内容可以显示的区域

如图:竖直方向上,标识3所表示的区域(图片的整个高度)都可以展示内容。
水平方向上,标识4所标识的区域,可以展示内容,水平方向其它位置中内容将不会展示出来。


使用AndroidStudio制作.9图片

m_time_default_16_9_icon.png

介绍完了.9图片后,那么我们就来制作一张.9图片吧

我们最近项目中要制作一张.9的占位图,该占位图的尺寸是16:9,要求在图片URL无效的时候展示,任何16:9的图片都能使用该占位图,要求是中间的小圆圈icon和“暂无图片”4个文字不能进行拉伸。

(1)把该图片放置在Drawable目录下,右击该图片,点击create 9-patch file

36D472C1-28EE-48B5-8213-7FF676D13BF8.png

(2) 然后将出现一个.9图片编辑的页面,左边是我们制作的.9图片样式,右边是.9图片的拉伸效果。如图所示,如果我们不做任何操作,图片中的小圆圈icon和文字将会在拉伸后而变形。

304F3D95-AA5B-40B7-90B8-926D060E029D.png

(3)当鼠标放在.9图片上时,在.9图片的边界将会出现4条直线,要绘制水平方向的黑线时,会出现竖直的两条直线,要绘制竖直方向的黑线时,会出现水平方向的两条直线。我们可以拖动直线来给图片设置黑线。

(4)另外当我们要绘制两条不连续的黑线时,我们可以点击图片以外的区域,再次出现两条直线,并通过拖动直线,再次绘制第二条黑线。

(5)掌握了上面两个技巧后,下面就剩下如何来绘制符合我们要求的.9图片了,
要保证中间的小圆圈icon和“暂无图片”4个文字不能进行拉伸,内容区域这里没有限制,内容可以在整个图片区域展示,如下图所示,那么我们只要给红线表示的区域绘制成黑色线条就行行了。

FFC42D1C-6D0D-491D-A7C5-DE8EB285604D.png

(6)最后来看看效果吧,怎么拉伸icon和文案都不会进行拉伸,是不是很简单呢?

Gif_20170521_164330.gif

            <link rel="stylesheet" href="http://static.blog.csdn.net/public/res-min/markdown_views.css?v=2.0">
                </div>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值