创建一个带有圆角的自定义加载条

Question

我想创建一个简单的自定义加载条，由两个图片组成：一个用于实心背景，另一个用于对角线。我刚接触iOS不久，我的方法是创建一个自定义UIView，使用两个UIImageViews，一个用于每个图片，并使用动画块将对角线图像从左到右移动。

我选择这种方法是因为我已经熟悉UIImageView和动画块。我的问题是...

1. 您是否建议更好的方法？我完全不熟悉层，由于时间限制，我不想现在阅读它们，但如果它提供了大大优越的实现，我愿意学习它们。 2. 如何使加载条的端点“圆形”？使用我的当前方法，这是我将得到的内容...

谢谢您的智慧！

- BeachRunnerFred

---

要不您试着在像Photoshop这样的另一个编辑器中创建图像，然后只使用一个UIImageView，而不是在运行时尝试将两个图像合并？ - Martol1ni

我需要两张图片来制作对角线动画。 - BeachRunnerFred

Answer 1

可以看一下WNProgressView，它可能符合你的需求。

- combinatorial

Answer 2

您可以通过以下两种方式实现这一点：

1- 将此类导入您的代码中 #import <QuartzCore/QuartzCore.h> 然后将以下两行添加到-(void)viewDidLoad方法中，这样当视图加载时，栏将被圆角化，或者您可以在希望栏开始变圆的位置添加它。

barImageView.layer.cornerRadius = 10.0f;
barImageView.layer.masksToBounds = YES;

2- 另一种方法是使用以下代码:

-(void)roundCorners:(UIRectCorner)rectCorner forView:(UIView*)view
{
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds 
                                                   byRoundingCorners:rectCorner
                                                         cornerRadii:CGSizeMake(20.0, 20.0)];
    // Create the shape layer and set its path
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = view.bounds;
    maskLayer.path = maskPath.CGPath;
    
    // Set the newly created shape layer as the mask for the image view's layer
    view.layer.mask = maskLayer;
}

在viewDidLoad或您想要开始圆形化栏的位置添加以下行：

[self roundCorners:UIRectCornerTopRight|UIRectCornerTopLeft|UIRectCornerBottomRight|UIRectCornerBottomLeft forView:[self.view.subviews objectAtIndex:0] withAngle:10];

- Ahmed Hammad

Answer 3

将您的“纯色背景”视图设置为“对角线”imageView的容器视图。 （对角线是背景的子视图）

然后在对角线子视图上设置'clipsToBounds'= YES，并根据需要重新调整框架。（假设您的对角线imageView表示100％的进度）

如果您的加载栏imageView没有圆角，则可以使用CALayer的cornerRadius属性。

imageView.layer.cornerRadius = 6.0f;

- hundreth

Answer 4

如果你是iOS新手，最好使用UIProgressView。它可能看起来不太好看，但它具有相同的目的，并且会更容易使用。还有UIActivityIndicatorView，它是像齿轮一样旋转的圆圈。这两个都比自定义解决方案更容易使用。

参考资料：http://developer.apple.com/library/ios/#documentation/uikit/reference/UIProgressView_Class/Reference/Reference.html

http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIActivityIndicatorView_Class/Reference/UIActivityIndicatorView.html

- PaulPerry

---

不幸的是，自定义外观是必需的。 - BeachRunnerFred