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. 宝塔Linux常用命令

    https://www.bt.cn/bbs/thread-1186-1-1.html 2017年3月8日发布全新架构的宝塔Linux 面板3.1Beta版,到现在的5.2.0正式版,历经100多天打磨 ...

  2. #Git 详细中文安装教程

    Step 1 Information 信息 Please read the following important information before continuing 继续之前,请阅读以下重要 ...

  3. 多线程-TaskExecutor-使用Demo

    BasicExecute.java package com.jef.executeTest; public abstract class BasicExecute extends Thread { @ ...

  4. C11多线程

    参考: http://www.oschina.net/translate/cplusplus-11-threading-make-your-multitasking-life http://blog. ...

  5. USACO 6.5 The Clocks

    The ClocksIOI'94 - Day 2 Consider nine clocks arranged in a 3x3 array thusly: |-------| |-------| |- ...

  6. lr参数化取值与连接数据库

    TXT文本,EXCEL表格以及数据库中的表都可以作为参数的数据集载体,LR都是支持的. 特别提醒: 1.在形成数据池之后,数据库中的数据变化不会影响数据池中的数据. 2.数据文件一定要以一个空行结束, ...

  7. 学习Nodejs的第一步

    最近看了几本关于Node.js的书,本来个人技术分享网站http://yuanbo88.com/是打算用Node.js作为服务器端语言来处理后台的,后来又改成了PHP(也是自己研究,毕竟网上DEMO多 ...

  8. File.separator与 \分隔符

    在Windows下的路径分隔符和Linux下的路径分隔符是不一样的,当直接使用绝对路径时,跨平台会暴出“No such file or diretory”的异常. 比如说要在temp目录下建立一个te ...

  9. 回文树练习 Part1

    URAL - 1960   Palindromes and Super Abilities 回文树水题,每次插入时统计数量即可. #include<bits/stdc++.h> using ...

  10. 解问 lambda表达式

    目录 1.0 何为Lambda 1.1 Lambda语法特征 1.2 Lambda实例 1.3 Lambda中的stream 1.4 Lambda 中的 stream 效率 1.0 何为Lambda ...