[翻译] MCProgressView 使用自定义图片做进度显示

简介:

MCProgressView 使用自定义图片做进度显示

https://github.com/Baglan/MCProgressView

Progress bar view with custom images.

使用自定义图片来显示进度条。

Installation(安装

  1. Add the QuartzCore framework to your project;添加QuartzCore框架
  2. Copy files from the 'Classes' folder into your project.将‘Classes’文件夹拷贝到你的工程当中

Usage(使用

You will first need to create custom images for background and foreground or copy the ones coming with this project to your project.

你需要创建两张图片,一张背景图一张最前面显示的图,或者直接从我的工程中拷贝出来。

#import "MCProgressBarView.h"

Initialize the images:

初始化图片:

UIImage * backgroundImage = [[UIImage imageNamed:@"progress-bg"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)];
UIImage * foregroundImage = [[UIImage imageNamed:@"progress-fg"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)];

Notice the [UIImage -resizableImageWithCapInsets:] call. You can read more about it in the documnetation for this method. Essentiually, it defines which parts of the image will not be stretched when image is resized. Here, it's used to mark the left and the right edges.

注意这个方法[UIImage -resizableImageWithCapInsets:]的调用。你可以读读关于它的文档。实际上,它定义了图片中的哪些部分不会被拉伸。在这里我用来确保最左侧和最右侧不会被拉伸。

Create the view and add it to the view hierarchy:

直接创建这个view并添加进来:

MCProgressBarView * _progressBarView = [[MCProgressBarView alloc] initWithFrame:CGRectMake(25, 100, 270, 20)
    backgroundImage:backgroundImage
    foregroundImage:foregroundImage];

[self.view addSubview:_progressBarView];

Now, the progress you set (in the range of 0.0 to 1.0), will be reflected in the component:

现在,就会按照你设置的方式来显示进度了:

_progressBarView.progress = 0.25;

offsetForZero(0处的偏移量

Matt Curtis pointed out that when progress is 0.0, there is still some initial progress indicator shown (see the image above). After some consideration, I've decided that there are situations when that is desirable and some situations when no progress should be shown. To address this, a new property has been added:

Matt Curtis 指出,当进度为0.0时,还是有一些进度显示出来了(看上面的图片)。之后我决定,某些特定的情况下不显示进度条而有时候显示,为了标志这个,我添加了一个新的属性:

@property (nonatomic, assign) CGFloat offsetForZero;

The default value of this property is the sum of the left and the right cap inset for the foreground image. To "taper off" the initial size of the progress indicator, you can set it to a lower value. For the images in the sample project, that value can be set to 10.0:

progressBarView.offsetForZero = 10.0;

See the sample image above to see the effect. That value can vary depending on the images you use in your project.

这个值会严重依赖于你所使用的图片。

 

目录
相关文章
|
Web App开发 JavaScript 前端开发
微信分享自定义图片和摘要
参考:  微信分享实现   微信现在是众多公司营销的重点。遍布朋友圈和消息群组里的html5各位可能也是天天见了,不过自从微信更新了官方api后,对整个微信内的页面管控都严格了不少。而官方的分享卡片,是众多在微信生态中传播的html5静态页面的一个重点。
1530 0
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
|
4月前
|
文字识别 测试技术 数据安全/隐私保护
案例:批量区域识别内容重命名,批量识别扫描PDF区域内容识别重命名,批量识别图片区域内容重命名图片修改图片名字,批量识别图片区域文字并重命名,批量图片部分识别内容重命文件,PDF区域内容提取重命名
该内容介绍了如何使用区域识别重命名软件高效整理图片,例如将图片按时间及内容重命名,适用于简历、单据等识别。文中提供了软件下载链接(百度云盘和腾讯网盘),并列出软件使用的几个关键条件,包括文字清晰、文件名长度限制等。示例展示了银行单据和公司工作单据的识别情况。文章还提及OCR技术在图片文字识别中的应用,强调了识别率、误识率和用户友好性等评估指标。如有类似需求,读者可留言或下载软件测试,并提供图片以获取定制的识别方案。
|
4月前
|
搜索推荐
【sgUploadTray_v2】自定义组件:升级版上传托盘自定义组件,可实时查看上传列表进度,可以通过选项卡切换上传中、成功、失败的队列,支持翻页,解决了列表内容太多导致卡顿的情况。(一)
【sgUploadTray_v2】自定义组件:升级版上传托盘自定义组件,可实时查看上传列表进度,可以通过选项卡切换上传中、成功、失败的队列,支持翻页,解决了列表内容太多导致卡顿的情况。
【sgUploadTray_v2】自定义组件:升级版上传托盘自定义组件,可实时查看上传列表进度,可以通过选项卡切换上传中、成功、失败的队列,支持翻页,解决了列表内容太多导致卡顿的情况。(一)
|
人工智能 文字识别 API
20行代码教你如何批量提取图片中文字
大家好,我是志斌~ 之前志斌在考研的时候遇到了一个问题,就是要将图片中的文字给提取出来,当时是J哥帮忙搞出来的,现在已经考完研了,也学会了提取方式,现在来给大家分享一下。
794 0
20行代码教你如何批量提取图片中文字
|
Web App开发 文字识别 JavaScript
强大的实况文本功能,直接复制图片上的文字(macOS)
用OCR软件,是很多人的选择。我曾经也给大家推荐过“天若OCR”软件,还有朋友在用吗?
326 0
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
166 0
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
UGUI系列-文字实现进度等待、进度加载、进程等待演示动画
今天分享一下UGUI 文字实现进度等待、进度加载、进程等待演示动画,实现思路比较简单,效果也比较简单,仅供大家参考,谢谢
|
小程序
小程序 - 详解下载功能加图片下载并显示进度
小程序 - 详解下载功能加图片下载并显示进度
235 0
小程序 - 详解下载功能加图片下载并显示进度
|
安全 Java 数据安全/隐私保护
图片内容管家 (把文字隐藏到图片里)
最近学习 javafx 自己编写了一款软件 (网上虽然也有类似功能的软件,但是界面不够美观,功能比较单一,或者操作比较复杂)
159 0
图片内容管家 (把文字隐藏到图片里)