使用图像创建自定义进度条 [英] Creating a custom progress bar with images

问题描述

我正在尝试做的是创建以下图像：

Pretty much what I am trying to do, is create the following image:

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

So this is a progress bar, which will show how many votes the client get in that option. How can I do that? I was wondering if I can use a mask (as I would in flex), but all the masking implementations that I found on the web are doing masks for UIImages, and not for UIImageView. I cannot do the mask in the UIImage, because the two images have the same dimensions. I have to use the X and Y of the images to crop them?! So, any suggestions?

以下是我必须创建进度条的两张图片：

Here are the two images that I have to create that progress bar:

< img src =https://i.stack.imgur.com/5Ocv5.pngalt =在此处输入图像说明>

干杯。

推荐答案

你想要摆脱每个图像中间的所有相同位。
然后执行以下操作：

you want to get rid of all of the same bit in the middle of each image. then do something like:

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

这篇关于使用图像创建自定义进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！