一分钟学会使用9-patch

简介: 背景之前项目开发一般都是写逻辑,UI方面的操作用的比较少。图片也是直接使用设计师提供的。因此一般情况下不需要用到9-patch图。然而,最近项目中分配给我的功能用到了。

背景

之前项目开发一般都是写逻辑,UI方面的操作用的比较少。

图片也是直接使用设计师提供的。

因此一般情况下不需要用到9-patch图。

然而,最近项目中分配给我的功能用到了。

因此,记录一下以便给其他没有接触过的开发者参考。

什么是9-patch

引用官方的一段描述

Draw 9-patch 工具是 Android Studio 中包含的一种 WYSIWYG(所见即所得)编辑器,利用此工具,您可以创建能够自动调整大小以适应视图内容和屏幕尺寸的位图图像。图像的选定部分可以根据图像内绘制的指示器在水平或竖直方向上调整比例。

根据上面的描述我们可以知道,当我们要求我们的图片能够自动调整大小以适应视图内容时,我们才需要用到9-patch图。

如何绘制9-patch

这边以Android Studio为例,进行实际说明如何绘制9-patch图。

  1. 确定要创建9-patch的图片,这里以下面图片中的chat_bg.png为例。


  2. 右键点击您想要用来创建 NinePatch 图像的 PNG 图像,然后点击 Create 9-patch file。


  3. 点击之后会弹框,如果名字保持不变,结果如下。


  4. 这个时候如果运行,会提示资源重复。所以我们要删除非9patch的原图。


好了,到这里前期准备就结束了。

接下来就需要做两个操作:
1.确定横向和纵向拉伸。
2.确定横向和纵向显示内容。

我们看下官网的一张图片说明


从图中可以得出如下结论:

左边控制纵向拉伸伸展区域。
上边控制横向拉伸伸展区域。
下边控制横向内容padding(可选)
右边控制纵向内容padding(可选)

具体操作通过下面的gif图来说明:


gif图的操作可以归结如下:

  1. 点击Show patches,进行拉伸处理。
  2. 左边选取一块作为纵向拉伸伸展区域。
  3. 上边选取一块作为横向拉伸伸展区域。
  4. 点击Show content。
  5. 右边选取纵向内容区域。
  6. 下边选取横向内容区域。

通过gif图可以很方便的看到所谓的画线操作其实是拖拉操作。

并不是说要像画笔那样去画出来。

相关文章
|
JavaScript CDN
js:spark-md5分片计算文件的md5值
js:spark-md5分片计算文件的md5值
1823 0
|
移动开发 前端开发 物联网
分享139个HTML公司企业模板,总有一款适合您
分享139个HTML公司企业模板,总有一款适合您
268 0
|
2月前
|
XML 人工智能 监控
SpringBoot实战:七种统计方法耗时的实现方式
在Spring Boot开发中,统计方法执行时间是性能优化的重要手段。本文介绍了七种实现方法耗时统计的技巧,包括手动使用StopWatch、AOP全局监控、自定义注解+切面、拦截器、Filter、Actuator+Micrometer集成以及事件监听等方式。每种方法适用于不同场景,开发者可根据需求选择合适的方案,从而更高效地定位性能瓶颈并提升系统响应速度。
459 5
|
9月前
【HarmonyOS Next开发】:ListItemGroup使用
通过使用ListItemGroup和AlphabetIndexer两种类型组件,实现带标题分类和右侧导航栏的页面
194 61
【HarmonyOS Next开发】:ListItemGroup使用
|
12月前
|
编解码 流计算
直播推流的工作原理是什么
直播推流将视频和音频数据从设备实时传输到服务器并分发给观众,涉及采集、编码、推流、传输、拉流和显示六个关键步骤。首先通过摄像机或麦克风采集音视频,再利用编码器如OBS压缩数据,采用H.264等格式编码,接着通过RTMP等协议推流至服务器,服务器调整格式后通过HLS等协议分发给不同设备,观众即可实时观看。此流程确保了低延迟的全球内容传递。
|
9月前
|
容器
【HarmonyOS】HMRouter使用详解(一)环境配置
在项目中使用官方推荐的Navigation时,需要在所有的页面上都添加一层NavDestination,在代码阅读上会增加多个层级,而且还要在主页面设置对应名字的跳转等问题,配置起来比较繁琐。看到大佬开发的HMRouter使用起来方便简洁,因此,写下这篇文章记录HMRouter的使用。
458 8
【HarmonyOS】HMRouter使用详解(一)环境配置
|
11月前
|
移动开发 API UED
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
508 0
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
|
JavaScript Windows 内存技术
node版本管理神器nvm安装使用教程(Windows11版本)
node版本管理神器nvm安装使用教程(Windows11版本)
|
Shell Linux Python
关于Python安装Scrapy库的常见报错解决
关于Python安装Scrapy库的常见报错解决
1052 0