使用图片创建自定义进度条

Question

基本上，我想做的是创建如下图所示的进度条： 这是一个显示客户端在该选项中获得了多少票的进度条。我该怎么做呢？我想知道是否可以使用掩模(就像在flex中一样)，但我在网络上找到的所有掩模实现都是对UIImage而不是对UIImageView进行掩模。我不能在UIImage中进行掩模，因为两个图像具有相同的尺寸。我必须使用图像的X和Y来裁剪它们！那么，有什么建议吗？

这里是我需要创建进度条的两个图像： 谢谢。

- Arthur Neves

Answer 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];
}

- Grady Player

---

请注意，可拉伸的图像会拉伸中间部分并保留端点，只是将它们附加在末尾。 - Grady Player

好的，那么 LeftCapWidth 是我的边缘大小吗？因为我正在做这个：UIImage * imageA= [[UIImage imageNamed:@"02_voting_status.png"] stretchableImageWithLeftCapWidth:20 topCapHeight:0.0f]; 然后似乎没有变化！ - Arthur Neves

我的问题是...我已经有了最终尺寸的两张图片..所以我不想拉伸其中一张，我想要相反的操作：缩小！ - Arthur Neves

尝试使用20.0f，有时整数会被视为0.0f。 - Grady Player

是的，我刚刚运行了一个测试，你必须去掉中间部分。否则它会将整个东西缩小，现在正在编辑代码。 - Grady Player

Answer 2

Grady Player的回答非常好。只是一个小提示，对于任何使用这个的人。我试图更新两个UIImageView的框架来更新“进度”。我试图通过“setNeedsDisplay”强制更新，但没有成功。（sizeToFit也会引起问题）。

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

- user2719303