使用图像创建自定义进度条答案

【问题标题】：Creating a custom progress bar with images使用图像创建自定义进度条
【发布时间】：2011-08-24 11:45:27
【问题描述】：

我要做的几乎就是创建以下图像：

所以这是一个进度条，它将显示客户在该选项中获得了多少票。我怎样才能做到这一点？我想知道我是否可以使用掩码（就像我在 flex 中那样），但是我在网上找到的所有掩码实现都是为UIImages 做掩码，而不是为UIImageView 做掩码。我不能在UIImage 中做蒙版，因为这两个图像具有相同的尺寸。我必须使用图像的 X 和 Y 来裁剪它们？！那么，有什么建议吗？

这是我必须创建该进度条的两个图像：

干杯。

【问题讨论】：

标签： ios uiimageview custom-controls progress-bar mask

【解决方案1】：

您想去掉每张图片中间的所有相同位。然后做类似的事情：

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self addProgressBarInFrame:CGRectMake(20.f, 20.f, 280.f, 50.f) withProgress:.9f];
    [self addProgressBarInFrame:CGRectMake(20.f, 100.f, 200.f, 25.f) withProgress:.1f];
}

-(void)addProgressBarInFrame:(CGRect)frame withProgress:(CGFloat)progress
{
    float widthOfJaggedBit = 4.0f;
    UIImage * imageA= [[UIImage imageNamed:@"imageA"] stretchableImageWithLeftCapWidth:widthOfJaggedBit topCapHeight:0.0f];
    UIImage * imageB= [[UIImage imageNamed:@"imageB"] stretchableImageWithLeftCapWidth:widthOfJaggedBit topCapHeight:0.0f];
    UIView * progressBar = [[UIView alloc] initWithFrame:frame];
    progressBar.backgroundColor = [UIColor whiteColor];
    UIImageView * imageViewA = [[UIImageView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, frame.size.width*progress, frame.size.height)];
    UIImageView * imageViewB = [[UIImageView alloc] initWithFrame:CGRectMake(frame.size.width*progress, 0.f, frame.size.width - (frame.size.width*progress), frame.size.height)];
    imageViewA.image = imageA;
    imageViewB.image = imageB;
   // imageViewA.contentStretch = CGRectMake(widthOfJaggedBit, 0, imageA.size.width - 2*widthOfJaggedBit, imageA.size.height) ;
   // imageViewB.contentStretch = CGRectMake(widthOfJaggedBit, 0, imageB.size.width - 2*widthOfJaggedBit, imageB.size.height) ;
    [self.view addSubview:progressBar];
    [progressBar addSubview:imageViewA];
    [progressBar addSubview:imageViewB];
}

【讨论】：

请注意，可拉伸图像会拉伸中间部分并单独留下端盖，只需将它们固定在末尾即可。
好的，LeftCapWidth 是我边缘的大小吗？因为我这样做： UIImage * imageA= [[UIImage imageNamed:@"02_voting_status.png"] stretchableImageWithLeftCapWidth:20 topCapHeight:0.0f]; ans好像没有！
我的问题是......我的两个图像都是最终尺寸......所以我不想拉伸一个，我想做相反的事情：收缩！
尝试使用 20.f，有时整数会被视为 0.0f
是的，刚刚进行了测试，您必须摆脱中间位。否则它只会缩小整个范围，现在编辑代码。

【解决方案2】：

Grady Player 的回答很棒。只是一个小提示，对于任何使用它的人。我试图更新两个 UIImageView 的框架以更新“进度”。我试图用“setNeedsDisplay”强制更新，但无济于事。（sizeToFit 也会引起问题）。

无论如何，我想出如何更新现有进度条进度的唯一方法是使用我的新尺寸调用“setFrame:CGRectMake”。

【讨论】：