具有多个彩色边框的圆形UIView像饼图一样工作

Question

我试图在化身的圆形边界上设置一个游戏玩家的圆形化身，并带有饼图表示。

玩家1 - 赢得25％失去70％吸引5％

cell.selectedPhoto.frame = CGRectMake(cell.selectedPhoto.frame.origin.x, cell.selectedPhoto.frame.origin.y, 75, 75);
cell.selectedPhoto.clipsToBounds = YES;
cell.selectedPhoto.layer.cornerRadius = 75/2.0f;

cell.selectedPhoto.layer.borderColor=[UIColor orangeColor].CGColor;
cell.selectedPhoto.layer.borderWidth=2.5f;
cell.selectedBadge.layer.cornerRadius = 15;

我将UIImageView作为一个已经有单边框颜色的圆圈。

首先猜测也许我需要清除我的UIImageView的边框，而是坐在我的UIImageView后面的UIView，这是一个标准的饼图，但是有更聪明的方法吗？

先感谢您。

Answer 1

我建议你为此创建一个自定义的UIView子类，它管理各种CALayer对象来创建这种效果。我打算在Core Graphics中做这个，但如果你想为此添加一些不错的动画，你会想要坚持使用Core Animation。

所以让我们首先定义我们的界面。

/// Provides a simple interface for creating an avatar icon, with a pie-chart style border.
@interface AvatarView : UIView

/// The avatar image, to be displayed in the center.
@property (nonatomic) UIImage* avatarImage;

/// An array of float values to define the values of each portion of the border.
@property (nonatomic) NSArray* borderValues;

/// An array of UIColors to define the colors of the border portions.
@property (nonatomic) NSArray* borderColors;

/// The width of the outer border.
@property (nonatomic) CGFloat borderWidth;

/// Animates the border values from their current values to a new set of values.
-(void) animateToBorderValues:(NSArray*)borderValues duration:(CGFloat)duration;

@end

在这里，我们可以设置头像图像，边框宽度，并提供颜色和值的数组。接下来，让我们来实现这个。首先，我们要定义一些我们想要跟踪的变量。

@implementation AvatarView {
    CALayer* avatarImageLayer; // the avatar image layer
    NSMutableArray* borderLayers; // the array containing the portion border layers
    UIBezierPath* borderLayerPath; // the path used to stroke the border layers
    CGFloat radius; // the radius of the view
}

接下来，让我们在avatarImageLayer方法中设置我们的initWithFrame以及其他几个变量：

-(instancetype) initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {

        radius = frame.size.width*0.5;

        // create border layer array
        borderLayers = [NSMutableArray array];

        // create avatar image layer
        avatarImageLayer = [CALayer layer];
        avatarImageLayer.frame = frame;
        avatarImageLayer.contentsScale = [UIScreen mainScreen].nativeScale; // scales the layer to the screen scale
        [self.layer addSublayer:avatarImageLayer];
    }
    return self;
}

接下来让我们定义我们的方法，当borderValues属性更新时，它将填充边框图层，允许视图具有动态数量的边框图层。

-(void) populateBorderLayers {

    while (borderLayers.count > _borderValues.count) { // remove layers if the number of border layers got reduced
        [(CAShapeLayer*)[borderLayers lastObject] removeFromSuperlayer];
        [borderLayers removeLastObject];
    }

    NSUInteger colorCount = _borderColors.count;
    NSUInteger borderLayerCount = borderLayers.count;

    while (borderLayerCount < _borderValues.count) { // add layers if the number of border layers got increased

        CAShapeLayer* borderLayer = [CAShapeLayer layer];

        borderLayer.path = borderLayerPath.CGPath;
        borderLayer.fillColor = [UIColor clearColor].CGColor;
        borderLayer.lineWidth = _borderWidth;
        borderLayer.strokeColor = (borderLayerCount < colorCount)? ((UIColor*)_borderColors[borderLayerCount]).CGColor : [UIColor clearColor].CGColor;

        if (borderLayerCount != 0) { // set pre-animation border stroke positions.

            CAShapeLayer* previousLayer = borderLayers[borderLayerCount-1];
            borderLayer.strokeStart = previousLayer.strokeEnd;
            borderLayer.strokeEnd = previousLayer.strokeEnd;

        } else borderLayer.strokeEnd = 0.0; // default value for first layer.

        [self.layer insertSublayer:borderLayer atIndex:0]; // not strictly necessary, should work fine with `addSublayer`, but nice to have to ensure the layers don't unexpectedly overlap.
        [borderLayers addObject:borderLayer];

        borderLayerCount++;
    }
}

接下来，我们想要创建一个方法，可以在borderValues更新时更新图层的笔触开始值和结束值。这可以合并到以前的方法，但如果你想设置动画，你会想要将它分开。

-(void) updateBorderStrokeValues {
    NSUInteger i = 0;
    CGFloat cumulativeValue = 0;
    for (CAShapeLayer* s in borderLayers) {

        s.strokeStart = cumulativeValue;
        cumulativeValue += [_borderValues[i] floatValue];
        s.strokeEnd = cumulativeValue;

        i++;
    }
}

接下来，我们只需要覆盖setter，以便在值更改时更新边框和头像图像的某些方面：

-(void) setAvatarImage:(UIImage *)avatarImage {
    _avatarImage = avatarImage;
    avatarImageLayer.contents = (id)avatarImage.CGImage; // update contents if image changed
}

-(void) setBorderWidth:(CGFloat)borderWidth {
    _borderWidth = borderWidth;

    CGFloat halfBorderWidth = borderWidth*0.5; // we're gonna use this a bunch, so might as well pre-calculate

    // set the new border layer path
    borderLayerPath = [UIBezierPath bezierPathWithArcCenter:(CGPoint){radius, radius} radius:radius-halfBorderWidth startAngle:-M_PI*0.5 endAngle:M_PI*1.5 clockwise:YES];

    for (CAShapeLayer* s in borderLayers) { // apply the new border layer path
        s.path = borderLayerPath.CGPath;
        s.lineWidth = borderWidth;
    }

    // update avatar masking
    CAShapeLayer* s = [CAShapeLayer layer];
    avatarImageLayer.frame = CGRectMake(halfBorderWidth, halfBorderWidth, self.frame.size.width-borderWidth, self.frame.size.height-borderWidth); // update avatar image frame
    s.path = [UIBezierPath bezierPathWithArcCenter:(CGPoint){radius-halfBorderWidth, radius-halfBorderWidth} radius:radius-borderWidth startAngle:0 endAngle:M_PI*2.0 clockwise:YES].CGPath;
    avatarImageLayer.mask = s;
}

-(void) setBorderColors:(NSArray *)borderColors {
    _borderColors = borderColors;

    NSUInteger i = 0;
    for (CAShapeLayer* s in borderLayers) {
        s.strokeColor = ((UIColor*)borderColors[i]).CGColor;
        i++;
    }
}

-(void) setBorderValues:(NSArray *)borderValues {
    _borderValues = borderValues;
    [self populateBorderLayers];
    [self updateBorderStrokeValues];
}

最后，我们甚至可以通过动画层来更进一步！让我们添加一个可以为我们处理这个问题的方法。

-(void) animateToBorderValues:(NSArray *)borderValues duration:(CGFloat)duration {

    _borderValues = borderValues; // update border values

    [self populateBorderLayers]; // do a 'soft' layer update, making sure that the correct number of layers are generated pre-animation. Pre-sets stroke positions to a pre-animation state.

    // define stroke animation
    CABasicAnimation* strokeAnim = [CABasicAnimation animation];
    strokeAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    strokeAnim.duration = duration;

    CGFloat cumulativeValue = 0;
    for (int i = 0; i < borderLayers.count; i++) {

        cumulativeValue += [borderValues[i] floatValue];

        CAShapeLayer* s = borderLayers[i];

        if (i != 0) [s addAnimation:strokeAnim forKey:@"startStrokeAnim"];

        // define stroke end animation
        strokeAnim.keyPath = @"strokeEnd";
        strokeAnim.fromValue = @(s.strokeEnd);
        strokeAnim.toValue = @(cumulativeValue);
        [s addAnimation:strokeAnim forKey:@"endStrokeAnim"];

        strokeAnim.keyPath = @"strokeStart"; // re-use the previous animation, as the values are the same (in the next iteration).
    }

    // update presentation layer values
    [CATransaction begin];
    [CATransaction setDisableActions:YES];
    [self updateBorderStrokeValues]; // sets stroke positions.
    [CATransaction commit];
}

就是这样！以下是用法示例：

AvatarView* v = [[AvatarView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
v.avatarImage = [UIImage imageNamed:@"photo.png"];
v.borderWidth = 10;
v.borderColors = @[[UIColor colorWithRed:122.0/255.0 green:108.0/255.0 blue:255.0/255.0 alpha:1],
                   [UIColor colorWithRed:100.0/255.0 green:241.0/255.0 blue:183.0/255.0 alpha:1],
                   [UIColor colorWithRed:0 green:222.0/255.0 blue:255.0/255.0 alpha:1]];

// because the border values default to 0, you can add this without even setting the border values initially!
[v animateToBorderValues:@[@(0.4), @(0.35), @(0.25)] duration:2];

---

结果

---

完整项目：https://github.com/hamishknight/Pie-Chart-Avatar

Answer 2

实际上，您可以直接从CALayer创建自己的图层。这是我自己项目中的动画图层示例。

AnimationLayer.h

#import <QuartzCore/QuartzCore.h>

@interface AnimationLayer : CALayer
@property (nonatomic,assign ) float percent;
@property (nonatomic, strong) NSArray *percentValues;
@property (nonatomic, strong) NSArray *percentColours;
@end

percentValues是你得到的部分的价值观。它应该是@[@(35),@(75),@(100)]的胜率：％35，宽松：％40和平局：％25。 percentColors是UIColor对象的胜利，松散和平局。

in `AnimationLayer.m`

#import "AnimationLayer.h"
#import <UIKit/UIKit.h>
@implementation AnimationLayer
@dynamic percent,percentValues,percentColours;

+ (BOOL)needsDisplayForKey:(NSString *)key{
    if([key isEqualToString:@"percent"]){
        return YES;
    }else
        return [super needsDisplayForKey:key];
}
- (void)drawInContext:(CGContextRef)ctx
{

    CGFloat arcStep = (M_PI *2) / 100 * (1.0-self.percent); // M_PI*2 is equivalent of full cirle
    BOOL clockwise = NO;
    CGFloat x = CGRectGetWidth(self.bounds) / 2; // circle's center
    CGFloat y = CGRectGetHeight(self.bounds) / 2; // circle's center
    CGFloat radius = MIN(x, y);
    UIGraphicsPushContext(ctx);
    // draw colorful circle
    CGContextSetLineWidth(ctx, 12);//12 is the width of circle.

    CGFloat toDraw = (1-self.percent)*100.0f;
    for (CGFloat i = 0; i < toDraw; i++)
    {
        UIColor *c;
        for (int j = 0; j<[self.percentValues count]; j++)
        {
            if (i <= [self.percentValues[j] intValue]) {
                c = self.percentColours[j];
                break;
            }
        }

        CGContextSetStrokeColorWithColor(ctx, c.CGColor);

        CGFloat startAngle = i * arcStep;
        CGFloat endAngle = startAngle + arcStep+0.02;

        CGContextAddArc(ctx, x, y, radius-6, startAngle, endAngle, clockwise);//set the radius as radius-(half of your line width.)

        CGContextStrokePath(ctx);

    }
    UIGraphicsPopContext();
}
@end

在某些你将使用这种效果的地方，你应该这样称呼它

+(void)addAnimationLayerToView:(UIView *)imageOfPlayer withColors:(NSArray *)colors andValues:(NSArray *)values
{
    AnimationLayer *animLayer = [AnimationLayer layer];
    animLayer.frame = imageOfPlayer.bounds;
    animLayer.percentColours = colors;
    animLayer.percentValues = values;
    [imageOfPlayer.layer insertSublayer:animLayer atIndex:0];

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"percent"];
    [animation setFromValue:@1];
    [animation setToValue:@0];

    [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    [animation setDuration:6];
    [animLayer addAnimation:animation forKey:@"imageAnimation"];
}