美文网首页终端研发部Android知识
适配不同尺寸屏幕之自动拉伸位图9.图片的使用

适配不同尺寸屏幕之自动拉伸位图9.图片的使用

作者: goodgleCoder | 来源:发表于2018-03-05 08:58 被阅读70次

最近实在是太忙了,不过临近过年,我还是坚持了那颗平静的心情,尽管技术博客现在很少人看了,洗脑文鸡汤文总是那么的惹人喜爱,我深信仍有一部分人和于哥一样,坚守在第一岗位,今天技术文继续撸起!

前言

前几节讲了关于适配屏幕尺寸一些常用的方法,除了weight和相对布局之外,关于图片的话,我们还应该学会图片的自动拉缩——.9图片的使用

什么四.9.png格式图片

.9.png格式的图片本身就是.png格式图片,不过该图片以.9作为文件名的后缀。我们可以将一个.png图片转换成.9.png图片,.9.png图片比正常的.png图片在图片最外围的四边多了1px边框,我们可以在这最外层的1px边框上定义图片的可拉伸区域以及图片的内容区域。

.9的制作,实际上就是在原图片上添加1px的边界,然后按照我们的需求,把对应的位置设置成黑色线,系统就会根据我们的实际需求进行拉伸。

为什么要使用.9图片

支持各种屏幕尺寸通常意味着图片资源还必须能适应各种尺寸。例如,无论要应用到什么形状的按钮上,按钮背景都必须能适应。

如果在可以更改尺寸的组件上使用了简单的图片,您很快就会发现显示效果多少有些不太理想,因为系统会在运行时平均地拉伸或收缩您的图片。解决方法为使用自动拉伸位图,这是一种格式特殊的 PNG 文件,其中会指明可以拉伸以及不可以拉伸的区域。

举个例子

下图是对.9图的四边的含义的解释,左上边代表拉伸区域,右下边代表paddingbox,就是间隔区域,在下面,我们给出一个例子,方便大家理解。

.9patch 使用额语法规则

1、上面黑线或者点表示纵向可拉伸的区域 一般一个点即可

2、左边黑线或者点表示横向可拉伸的区域 一般一个点即可

3、下面表示纵向填放内容的区域 一般是一条黑线

4、右边表示横向填放内容的区域 一般是一条黑线

即:左上边代表拉伸区域,右下边代表paddingbox

使用Draw9patch工具,打开一张图片,在不做任何伸缩处理的情况下其在分别在宽、高、以及宽高同时缩放时的显示效果,如图一:

1、未作处理

2、使高拉伸,我们现在左边边框箭头上半部分点一点

3、拉伸指定部分区域的高度

4、横向。属性都拉伸

工具

1、如果使用的Eclipse,则可以在sdk中找到Draw9patch文件,位置存在:tools 文件夹下

2、如果使用的是AndroidStudio,则直接可以重命名一下,双击进入到编辑界面可进行patch

使用Android Studio进行.9图片的操作

关于更多

屏幕适配之尺寸的相关概论《一》

什么是dp,dip,sp和px及他们之间的的关系《二》

适配不同尺寸屏幕几个关键点分享<三>

给程序员,这几条建议你中招了吗

NDK项目实战—高仿360手机助手之卸载监听

最新2017(Android)面试题级答案(精选版)

相信自己,没有做不到的,只有想不到的

微信公众号:终端研发部

技术+职场

相关文章

  • 适配不同尺寸屏幕之自动拉伸位图9.图片的使用

    最近实在是太忙了,不过临近过年,我还是坚持了那颗平静的心情,尽管技术博客现在很少人看了,洗脑文鸡汤文总是那么的惹人...

  • Dessert Lan's Information

    屏幕适配 关键词: 屏幕尺寸:灵活布局、备用布局、可拉伸图片(九宫位图) 像素密度:不受密度制约、备用位图、矢量图...

  • iOS屏幕尺寸适配

    屏幕适配方法 针对不同屏幕尺寸的适配,主要有3种方式:1.不同屏幕尺寸下,元素的尺寸是固定的;2.不同屏幕尺寸下,...

  • Android屏幕适配的几种方式

    1.图片适配,根据不同的屏幕尺寸,选取不同尺寸的图片,这里建议将图片资源放在xxhdpi文件夹下面,这是比较合适的...

  • iOS图片指定部位拉伸,类似Android 9patch(.9格

    关于图片拉伸,搞过Android开发屏幕适配的人应该都听说过9patch,是为了解决不同屏幕下,图片拉伸不失真的一...

  • 屏幕适配经验(二)

    屏幕适配问题的本质: 使得“布局”、“布局组件”、“图片资源”、“用户界面流程”匹配不同的屏幕尺寸 使得布局、布局...

  • Unity UGUI九宫格切图

    在配置背景图片时候,适配不同屏幕,图片会被拉伸变形。 1.选中图片资源,点击 SpriteEditor 按钮 2....

  • Flutter:适配学习

    flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局! Flutter的适配可以使用flu...

  • 屏幕适配

    基本概念 适配 概念:适合兼容各种不同的情况系统适配:针对不同系统版本进行适配屏幕适配:针对不同大小的屏幕尺寸进行...

  • Android屏幕适配

    Android屏幕适配 概述 屏幕适配的主要目标有两个,不同屏幕尺寸的适配和不同像素密度的适配。随着手机行业发展异...

网友评论

    本文标题:适配不同尺寸屏幕之自动拉伸位图9.图片的使用

    本文链接:https://www.haomeiwen.com/subject/pgucfftx.html