点9图 Android设计中如何切图.9.png(点9图)
在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”。这种图片是用于Android开发的一种特殊的图片格式,它的好处在于可以用简单的方式把一张图片中哪些区域可以拉伸,哪些区域不可以拉伸设定好,同时可以把显示内容区域的位置标示清楚。
本文结合一些具体的例子来看下.9.png的具体用法。
首先看下普通的.png资源与.9.png的资源区别:
普通的png资源就不多介绍了,可以明显看到.9.png的外围是有一些黑色的线条的,那这些线条是用来做什么的呢?我们来看下放大的图像:
放大后可以比较明显的看到上下左右分别有一个像素的黑色线段,这里分别标注了序号。简单来说,序号1和2标识了可以拉伸的区域,序号3和4标识了内容区域。当设定了按钮实际应用的宽和高之后,横向会拉伸1区域的像素,纵向会拉伸2区域的像素。如下图:
拉伸的含义应该比较容易理解,但是内容区域的标注有什么意义呢?我们来看下图:
这里程序设置的文字垂直居中,水平居左的对齐方式。对齐方式是没有问题的,但是对于这种大圆角同时又有些不规则边框的的图形来说,错误的标注方式会让排版看起来很混乱。所以我们需要修正内容区域的线段位置和长度。
把横向的内容区域缩短到圆角以内,纵向的内容区域控制在输入框的高度以内,这样文字就可以正常显示了。
这里还有一种特殊情况,就是本身是.9.png的资源,但是在修改过程中你希望这张.9.png不能被拉伸(在做皮肤的情况中有可能会遇到),那怎么办呢?只要把拉伸区域的点点在透明像素的地方就可以了,这样拉伸的时候会拉伸透明部分的像素,而不会拉伸图像本身。如下图:
大家可以看到拉伸区域的黑点是可以不连续的。
说了半天.9.png的用法,那.9.png如何输出呢?有很多种方式可以输出.9.png,比如说用draw9patch.bat这个工具,或者简单一点,用photoshop直接输出。输出的方式是先输出普通的png资源,然后扩大画布大小,上下左右各空出一个像素,再用一个像素的铅笔工具(颜色选择纯黑色),上下左右分别画点就可以了,保存的时候注意把后缀修改为.9.png。
有两点需要特别注意下:
1.最外围的一圈像素必须要么是纯黑色,要么是透明,一点点的半透明的像素都不可以有,比如说99%的黑色或者是1%的投影都不可以有;
2.文件的后缀名必须是.9.png,不能是.png或者是.9.png.png,这样的命名都会导致编译失败。
点9图 Android设计中如何切图.9.png(点9图)相关推荐
- Android设计中如何切图.9.png(点9图)
原文地址: http://www.miued.com/2074/ 本文主要介绍如何制作 切图.9.png(点9图),另一篇姊妹篇文章 Android屏幕适配全攻略(最权威的官方适配指导)的 [使用自 ...
- 【转】Android设计中的.9.png
来源:http://isux.tencent.com/android-ui-9-png.html Android设计中的.9.png 注意:当使用9.png做TextView背景时,一定要设置内容区域 ...
- 图神经网络设计中的算子融合策略
©作者 | 刘曜齐 单位 | 北京邮电大学硕士生 来源 | 北邮GAMMA Lab 本文主要的描述基于消息传递机制的图神经网络设计中应用的算子融合策略,带领读者了解有关算子融合的相关问题以及方法. 引 ...
- 教我网页设计中的“切图”
"切图"是网页设计中的一个重要概念,它指的是将网页设计中的图片和其他图像分割成合适的尺寸和形状,以便在网页中使用. 切图的过程通常包括使用图像编辑软件(如 Adobe Photos ...
- android 继承类图,Android Studio中绘制UML类图介绍
Android Studio中绘制UML类图介绍 Android Studio中绘制UML类图介绍 动机 最近开始阅读项目源码,从其中一个模块开始看,奈何大项目中的一个模块,对于萌新而言,也太过于复杂 ...
- 【转载】Android设计中的.9.png
转载自:腾讯ISUX (http://isux.tencent.com/android-ui-9-png.html) 在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩, ...
- android 字符串折线图,Android + MPAndroidChart 实现折线、柱形和饼状图
本文讲讲怎么用 MPAndroidChart 框架实现折线图.柱形图.饼图,并且进行样式设置,达到和宣传图差不多的效果. 一开始看到 MPAndroidChart 的各种图表介绍图感觉很好看,但是直接 ...
- ui设计为什么要切图,切图是什么意思?
切图严格来说并不是Ui设计师的工作,而是前端工程师的工作,指的是将设计师的设计转化为网页,是一种将设计师的"理想"转化为"现实"的工作,将psd进行切片重组,利 ...
- 【游戏交互设计】古登堡图:视觉流在设计中的应用
更多秋招干货,上网易游戏学院app查看!https://game.academy.163.com/ssi/app/?referrer=csdn 一.什么是古登堡图 古登堡图(Gutenberg Dia ...
最新文章
- Leetcode 剑指 Offer 57 - II. 和为s的连续正数序列 (每日一题 20210809)
- python中的路径问题汇总
- Fatal error in launcher: Unable to create process using ‘“d:\python3.6\python.exe“ “D:\python3.6\Sc
- viper4android fxifi,ViPer4android. FX顶级音效!
- 二维码扫描和应用跳转
- python 批量查询网页导出结果_python批量查询网页的HTTP状态码
- java中的包装类和基本类型_java中基本类型和包装类型实践经验
- 阿里这份Java程序性能优化指南,让你的程序快上200%
- 科学道德与学风-2021雨课堂答案-第1章
- rpo流程图模板_Visio Pro 2019下载-Microsoft Visio Pro(流程图制作软件)下载2019x64 简体中文版-西西软件下载...
- arcmap中图斑面积代表_arcmap计算面积_ArcMap怎么重计算图斑面积?arcmap使用手册_arcmap计算面积...
- 3位格雷码的顺序编码_格雷码编码规则_格雷码有什么规律
- 达观数据助力浙江大华构建企业级知识搜索共享平台,盘活沉淀数据
- excel根据html生成表头c,excel表头的制作 怎样在Excel里面制作表头?
- hp 服务器 修复,Hp服务器 raid 磁盘故障数据库数据恢复过程
- mac删除的文件还能找回吗
- 【雪野实训记录】Oracle数据库 T4作业——事务和数据库对象
- 58同城 反爬虫机制及处理
- C语言 —— 嵌套语句的使用
- 4核cpu云服务器性能,4核cpu云服务器性能测试
热门文章
- java二方包Maven脚本
- 基于深度学习的端到端通信系统模型
- 核心银行系统 相关文章 已搬家至微信公众号
- 如何阅读英文文献,有哪些高效的方法或者辅助工具?
- matlab里面求线性方程组,利用matlab求线性方程组.doc
- Cognex - DS925B3D相机取像参数配置
- 关于java的参考文献英文_java英文参考文献
- PMP(Project Management Professional)证在哪个行业比较有用?
- teamspeak搭建_搭建linux下teamspeak3多人语音服务器
- HBase的rowkey设计原则、HBase避免热点 11