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.

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

[翻译] MCProgressView 使用自定义图片做进度显示的更多相关文章

  1. android 自定义图片圆形进度条

    感觉话一个圆形进度条挺简单的 ,但是却偏偏给了几张图片让你话,说实话我没接触过,感觉好难,还好百度有大把的资源,一番努力下终于画出来了. 代码如下. package com.etong.cpms.wi ...

  2. easyui源码翻译1.32--Combo(自定义下拉框)

    前言 扩展自$.fn.validatebox.defaults.使用$.fn.combo.defaults重写默认值对象.下载该插件翻译源码 自定义下拉框显示一个可编辑的文本框和下拉面板在html页面 ...

  3. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  4. [翻译] SFRoundProgressCounterView 带有进度显示的倒计时视图

    SFRoundProgressCounterView 带有进度显示的倒计时视图 https://github.com/simpliflow/SFRoundProgressCounterView A c ...

  5. iOS View自定义窍门——UIButton实现上显示图片,下显示文字

    “UIButton实现上显示图片,下显示文字”这个需求相信大家在开发中都或多或少会遇见.比如自定义分享View的时候.当然,也可以封装一个item,上边imageView,下边一个label.但是既然 ...

  6. 解决“用PicGo-2.3.0-beta5 + GitHub做博客图床,github仓库图片文件不显示”的问题记录(备忘)

    解决"用PicGo-2.3.0-beta5 + GitHub做博客图床,github仓库图片文件不显示"的问题记录(备忘) 历时几个小时百度,终于靠自己理解解决了GitHub仓库图 ...

  7. [Android] 对自定义图片浏览器经常内存溢出的一些优化

    首先关于异步加载图片可以参见 夏安明 的博客:http://blog.csdn.net/xiaanming/article/details/9825113 这篇文章最近有了新的更改,大概看了一下,内容 ...

  8. 灵活、可高度自定义的——Progress进度圈、弹窗、加载进度、小菊花

    DDProgressHUD的介绍 提供了四种类型的展示: 显示无限旋转的加载图(比如小菊花,可以自定义),显示文字信息.网络刷新时经常用到. 显示加载进度的动画,也可以显示文字.网络下载时用的比较多, ...

  9. Android零基础入门第52节:自定义酷炫进度条

    原文:Android零基础入门第52节:自定义酷炫进度条 Android系统默认的ProgressBar往往都不能满足实际开发需要,一般都会开发者自定义ProgressBar. 在Android开发中 ...

随机推荐

  1. 《精通Python设计模式》学习之原型模式

    暂时在工作中,还没有用到呢~~~ 以后要留意一下,主要用于复制对象副本, 然后又有自定义属性的地方. import copy from collections import OrderedDict c ...

  2. sicily 1051. Biker's Trip Odomete

    DescriptionMost bicycle speedometers work by using a Hall Effect sensor fastened to the front fork o ...

  3. information that should help you find out what is causing the crash.

    091130 11:16:11 - mysqld got exception 0xc0000005 ; This could be because you hit a bug. It is also ...

  4. 站点的安全防范都是后端的职责?非也,Web前端安全同样不可忽视

    前言 随着网络的快速普及,网络安全问题的受害者不再只是政府.企业等集体,每一个接触网络的普通人都有可能成为网络攻击的受害者.随着网络的普及,黑客进行网络攻击的手段越来也多,越来越复杂.以网站的攻击为例 ...

  5. C语言:凯撒密码的实现

    凯撒密码的实现(10分)题目内容: 凯撒密码(caeser)是罗马扩张时期朱利斯?凯撒(Julius Caesar)创造的,用于加密通过信使传递的作战命令.它将字母表中的字母移动一定位置而实现加密. ...

  6. 【BZOJ】4894: 天赋

    题解 这道题是求一个有向图的外向生成树 入度矩阵对应着外向生成树,出度矩阵对应着内向生成树,知道了这个就可以求出基尔霍夫矩阵了,同时n - 1阶主子式一定要删掉根节点的一行一列 代码 #include ...

  7. mysql的第一个程序

    每次写java链接数据怎么写,这一次做一个总结,方便参考. 1.在mysql上下载mysql驱动jar包 2.下载的驱动包 3.程序目录 4.程序 package mysqlTest; import ...

  8. 在LINUX环境下定时执行php脚本

    1. 使用Crontab定时执行linux环境下的php脚本文件 Cron,它是一个linux下的定时执行工具.根用户以外的用户可以使用 crontab 工具来配置 cron 任务.所有用户定义的 c ...

  9. Wannafly挑战赛9 C - 列一列

    链接:https://www.nowcoder.com/acm/contest/71/C来源:牛客网 题目描述 小W在计算一个数列{An},其中A1=1,A2=2,An+2=An+1+An.尽管他计算 ...

  10. My blog in AI -- 梯度下降算法

    人工神经网络是对生物神经网络的模仿,神经网络对一个问题的学习,需要经历数据输入.网络参数的训练.超参数的调节等部分. 这次我们来详细讨论一下神经网络的学习过程. 假设我们要训练一个神经网络去识别一张图 ...