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

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

 

时间: 2024-12-28 06:26:57

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

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

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

图片不能显示-网站做完了 在局域网发布后发现除样式的图片外 其他图片都不能显示

问题描述 网站做完了 在局域网发布后发现除样式的图片外 其他图片都不能显示 如题 很奇怪 用vs2008开发的网站 在开发过程中很正常 今天代码完成 发布在局域网中 发现只要不是样式中的图片都不能显示,不管是动态的还是静态的 求指教 谢谢 解决方案 VS开发时写的路径有时候iis是不能显示的,多试几下,应该是路径的问题

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

SFRoundProgressCounterView 带有进度显示的倒计时视图   https://github.com/simpliflow/SFRoundProgressCounterView A custom UIView with a rounded progress bar and a counter in the center of the circle. Supports multiple time intervals (in milliseconds), start/stop/r

Android自定义多节点进度条显示的实现代码(附源码)

亲们里面的线段颜色和节点图标都是可以自定义的. 在没给大家分享实例代码之前,先给大家展示下效果图: main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rl_parent" xmlns:tools="http://schemas.android.com/tools" android:layou

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

原文:Android零基础入门第52节:自定义酷炫进度条    Android系统默认的ProgressBar往往都不能满足实际开发需要,一般都会开发者自定义ProgressBar.     在Android开发中,自定义ProgressBar一般有三种思路来完成.     一.在系统进度条基础上优化       首先来看一下style="@android:style/Widget.ProgressBar.Horizontal"的源码.鼠标移动到style属性值上,按住Ctrl键,鼠标

html5-如何做到微信公共号上那种“一句话+图片”在一行显示的效果?

问题描述 如何做到微信公共号上那种"一句话+图片"在一行显示的效果? 不知道怎么做到那种效果?我现在的做法是 在一行放 两个标签(input和img),然后在两个标签里都加入onclick. 但是这么做排版难度太大了,无法做到微信公共号的那种显示效果. 求助一下如何那样做? 解决方案 一个input标签只能有一个value,你自己可以测试一下.如果你需要实现你所说的效果,为什么非要用2个value?(df8888.com)你可以给这个input自定义一个属性,然后你这个值放这个属性里面

android 获取本地图片 并用遮罩显示成带有圆心边框的圆形图

问题描述 android 获取本地图片 并用遮罩显示成带有圆心边框的圆形图 有一个需求,获取本地图片或者拍照,然后将图片用遮罩效果做成圆形并且带有边框的样式如图所示,,获取本地图片和拍照会做,但是不知道怎么用遮罩效果做成那种效果,,,求解,,,谢谢....最好有具体代码实现 解决方案 用遮罩的方式已经解决,,,,,,,, 解决方案二: Picasso框架简单快速高效 解决方案三: 你最好了解一下最新的fresco框架,你说的需求,里面都可以实现,只要你引用就可以了! 解决方案四: android

Android 自定义view实现进度条加载效果实例代码

这个其实很简单,思路是这样的,就是拿view的宽度,除以点的点的宽度+二个点 之间的间距,就可以算出大概能画出几个点出来,然后就通过canvas画出点,再然后就是每隔多少时间把上面移动的点不断的去改变它的坐标就可以, 效果如下: 分析图: 代码如下: package com.example.dotloadview; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bit

基于jQuery实现网页进度显示插件

 这篇文章主要介绍了基于jQuery实现网页进度显示插件的实现方法以及源码下载,十分的详细,并自带2种皮肤,这里推荐给小伙伴们.     相信大家都见过类似的网站功能,这种形式的进度显示可以很方便的让用户去理解和操作, 以下是插件的测试截图 ,提供了两个皮肤 使用js编写 可以灵活的生成进度条 方便进对一些工作进度进行图形显示 1.简单的调用 //所有步骤的数据 var stepListJson=[{StepNum:1,StepText:"第一步"}, {StepNum:2,StepT