自定义UIProgressView与圆角图像 [英] Customized UIProgressView with rounded corner images

问题描述

我无法使用两张图片自定义 UIProgressView 。我在网上找到了很多有用的问题，但我的问题有点不同。也许在某种程度上，我使用的图像是圆形的，没有走投无边的矩形;因此， stretchableImageWithLeftCapWidth 方法似乎对我的情况没有帮助。当我拉伸图像时，由于图像的圆角，存在一些空间，在此上发布了一个问题链接

I am having difficulties customizing UIProgressView with two images. I have found plenty of helpful questions on the internet, but my problem is a little different. Maybe in a way that images I am using are rounded on not cornered rectangles; therefore, stretchableImageWithLeftCapWidth method doesn't seem to help in my case. When I stretch the images, there is some space because of rounded corners of the images, there is one question posted on this link

推荐答案

您必须实施自定义 UiProgressView 并使用以下代码作为进度视图，并为填充和后台进度视图添加图像，在我的情况下，它们是 loaderBar.png 用于填充和 timeLineBig.png 作为背景。

You will have to Implement Custom UiProgressView and use the following code for your progress view and add your images for filling and background progress view, in my case they are loaderBar.png for filling and timeLineBig.png for background.

CustomProgressView.h

#import <UIKit/UIKit.h>

@interface CustomProgressView : UIProgressView

@end

CustomProgressView.m

#define fillOffsetX 2
#define fillOffsetTopY 2
#define fillOffsetBottomY 2

#import "CustomProgressView.h"

@implementation CustomProgressView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
 - (void)drawRect:(CGRect)rect {

 CGSize backgroundStretchPoints = {10, 10}, fillStretchPoints = {7, 7};

 // Initialize the stretchable images.
 UIImage *background = [[UIImage imageNamed:@"timelineBig.png"] stretchableImageWithLeftCapWidth:backgroundStretchPoints.width
 topCapHeight:backgroundStretchPoints.height];

 UIImage *fill = [[UIImage imageNamed:@"loaderBar.png"] stretchableImageWithLeftCapWidth:fillStretchPoints.width
 topCapHeight:fillStretchPoints.height];

 // Draw the background in the current rect
 [background drawInRect:rect];

 // Compute the max width in pixels for the fill.  Max width being how
 // wide the fill should be at 100% progress.
 NSInteger maxWidth = rect.size.width - (2 * fillOffsetX);

 // Compute the width for the current progress value, 0.0 - 1.0 corresponding
 // to 0% and 100% respectively.
 NSInteger curWidth = floor([self progress] * maxWidth);

 // Create the rectangle for our fill image accounting for the position offsets,
 // 1 in the X direction and 1, 3 on the top and bottom for the Y.
 CGRect fillRect = CGRectMake(rect.origin.x + fillOffsetX,
 rect.origin.y + fillOffsetTopY,
 curWidth,
 rect.size.height - fillOffsetBottomY);

 // Draw the fill
 [fill drawInRect:fillRect];
 }



@end

最后当你想使用自定义进度视图然后调用这样的东西...

finally when you want to use the custom progress view then call something like this...

self.customProgressView=[[CustomProgressView alloc] initWithFrame:CGRectMake(xValue, yValue, widthofProgressView, heightofProgressView)];

确保为 xValue，yValue，widthofProgressView& heightofProgressView 根据您的要求

这篇关于自定义UIProgressView与圆角图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！