2011-05-12 39 views
3
自定義進度欄

差不多就是我想要做的,就是創建以下圖片: enter image description here創建具有圖像

所以這是一個進度條,它會顯示客戶在選擇多少票獲得。我怎樣才能做到這一點?我想知道是否可以使用蒙版(就像我在flex中那樣),但是我在網絡上發現的所有蒙版實現都是爲UIImage s製作蒙版,而不是用於UIImageView。我無法做到UIImage中的蒙版,因爲這兩個圖片具有相同的尺寸。我必須使用圖像的X和Y來裁剪它們?!那麼,有什麼建議?

這裏是我必須創建一個進度條將兩個圖像:

enter image description here enter image description here

乾杯。

回答

11

你想擺脫每個圖像中間的所有相同的位。 那麼這樣做:

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

imageAimageB

+0

請注意,可拉伸的圖像,拉伸中間和離開端帽,只是釘在他們的最後。 – 2011-05-12 21:54:01

+1

確定左邊的寬度是我的邊緣的大小?因爲我這樣做:UIImage * imageA = [[UIImage imageNamed:@「02_voting_status.png」] stretchableImageWithLeftCapWidth:20 topCapHeight:0.0f];這似乎是一樣的沒有! – 2011-05-12 22:23:27

+0

我的問題是...我在最終大小都有圖像..所以我不想拉伸一個,我想做相反的事情:收縮! – 2011-05-12 22:27:08

0

格雷迪玩家的答案是偉大的。只是一個小記錄,任何人使用這個。我試圖更新兩個UIImageView的幀來更新「進度」。我試圖強制更新「setNeedsDisplay」,但無濟於事。 (sizeToFit也造成了問題)。

無論如何,我想出瞭如何更新現有進度條的進度的唯一方法是用我的新維度調用「setFrame:CGRectMake」。