[翻译] 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.

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

 

目录
相关文章
|
JavaScript
Fastadmin列表的多图预览(一行代码)
Fastadmin列表的多图预览(一行代码)
376 0
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
|
4月前
【wavesurfer.js实战范例】多区域音频标注(含区域实时切换显示)
【wavesurfer.js实战范例】多区域音频标注(含区域实时切换显示)
154 0
|
6月前
|
文字识别 测试技术 数据安全/隐私保护
案例:批量区域识别内容重命名,批量识别扫描PDF区域内容识别重命名,批量识别图片区域内容重命名图片修改图片名字,批量识别图片区域文字并重命名,批量图片部分识别内容重命文件,PDF区域内容提取重命名
该内容介绍了如何使用区域识别重命名软件高效整理图片,例如将图片按时间及内容重命名,适用于简历、单据等识别。文中提供了软件下载链接(百度云盘和腾讯网盘),并列出软件使用的几个关键条件,包括文字清晰、文件名长度限制等。示例展示了银行单据和公司工作单据的识别情况。文章还提及OCR技术在图片文字识别中的应用,强调了识别率、误识率和用户友好性等评估指标。如有类似需求,读者可留言或下载软件测试,并提供图片以获取定制的识别方案。
329 2
|
6月前
|
文字识别 JavaScript API
Vue实现:Ctrl+V粘贴文字图片截图,调用第三方API文字识别OCR内容并进行内容分割识别填充。
Vue实现:Ctrl+V粘贴文字图片截图,调用第三方API文字识别OCR内容并进行内容分割识别填充。
Vue实现:Ctrl+V粘贴文字图片截图,调用第三方API文字识别OCR内容并进行内容分割识别填充。
|
人工智能 文字识别 API
20行代码教你如何批量提取图片中文字
大家好,我是志斌~ 之前志斌在考研的时候遇到了一个问题,就是要将图片中的文字给提取出来,当时是J哥帮忙搞出来的,现在已经考完研了,也学会了提取方式,现在来给大家分享一下。
854 0
20行代码教你如何批量提取图片中文字
RPA 中批量备注特定的文字
RPA 中批量备注特定的文字
119 0
|
前端开发
A2021-A2022项目展示页面的内容。
A2021-A2022项目展示页面的内容。
98 0
A2021-A2022项目展示页面的内容。
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
176 0
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
|
小程序
小程序 - 详解下载功能加图片下载并显示进度
小程序 - 详解下载功能加图片下载并显示进度
249 0
小程序 - 详解下载功能加图片下载并显示进度
下一篇
无影云桌面