如何用UIImage来表示用户的输赢？

Question

我是 iOS 开发的新手，我正在尝试制作一款在单杠上显示用户输赢的游戏，如下所示：

我是否需要使用两个 UIImageView 来执行此操作？另外，如何让bar根据输赢进行调整？对于如何执行此操作，我将不胜感激。谢谢。

Answer 1

创建一个名为 WinLoseView 的自定义 class。

它将包括

1) 自定义视图层次结构

2) 品牌代码（颜色，四舍五入）

3) 非常简单的 public 界面有两个属性

胜
损失

视图层次结构将有一个

两个 UIView
两个 UIlabels

主视图需要一点舍入，为此使用 UIview 的图层属性。

Answer 2

这个自动生成的代码应该非常接近您的需要。做@rmaddy 所说的并创建一个 UIView 子类。您将要公开两个属性以表示输赢。 drawRect 方法应该调用下面的方法，将视图的边界作为 myFrame 值传入。您将不得不尝试使用颜色和字体，但在其他方面应该非常接近您想要的。而且，就像@earlgray 说的，它应该根据输赢次数动态绘制自己，不需要图像。

- (void)drawPerformanceBarWithWins: (CGFloat)wins losses: (CGFloat)losses myFrame: (CGRect)myFrame
{
    //// General Declarations
    CGContextRef context = UIGraphicsGetCurrentContext();

    //// Color Declarations
    UIColor* winColor = [UIColor colorWithRed: 0.13 green: 0.78 blue: 0.13 alpha: 1];
    UIColor* loseColor = [UIColor colorWithRed: 0.805 green: 0.055 blue: 0.055 alpha: 1];

    //// Variable Declarations
    NSString* winsText = [NSString stringWithFormat: @"%ld", (NSInteger)round(wins)];
    NSString* lossesText = [NSString stringWithFormat: @"%ld", (NSInteger)round(losses)];
    CGFloat endCapX = myFrame.size.width - 15;
    CGFloat redBoxWidth = (myFrame.size.width - 30) * losses / (wins + losses);
    CGRect redBox = CGRectMake(myFrame.size.width - redBoxWidth - 15, 0, redBoxWidth, myFrame.size.height);
    CGFloat endCapHeightScale = myFrame.size.height / 60.0;

    //// Background Rectangle Drawing
    UIBezierPath* backgroundRectanglePath = [UIBezierPath bezierPathWithRoundedRect: myFrame cornerRadius: 10];
    [winColor setFill];
    [backgroundRectanglePath fill];


    //// End Cap
    {
        CGContextSaveGState(context);
        CGContextTranslateCTM(context, endCapX, 0);
        CGContextScaleCTM(context, 1, endCapHeightScale);



        //// End Cap Bezier Drawing
        UIBezierPath* endCapBezierPath = UIBezierPath.bezierPath;
        [endCapBezierPath moveToPoint: CGPointMake(0, 0)];
        [endCapBezierPath addCurveToPoint: CGPointMake(8.59, 0.65) controlPoint1: CGPointMake(4.4, 0) controlPoint2: CGPointMake(6.6, -0)];
        [endCapBezierPath addLineToPoint: CGPointMake(8.97, 0.75)];
        [endCapBezierPath addCurveToPoint: CGPointMake(14.54, 6.31) controlPoint1: CGPointMake(11.56, 1.69) controlPoint2: CGPointMake(13.6, 3.73)];
        [endCapBezierPath addCurveToPoint: CGPointMake(15.29, 15.29) controlPoint1: CGPointMake(15.29, 8.68) controlPoint2: CGPointMake(15.29, 10.88)];
        [endCapBezierPath addLineToPoint: CGPointMake(15.29, 44.71)];
        [endCapBezierPath addCurveToPoint: CGPointMake(14.63, 53.3) controlPoint1: CGPointMake(15.29, 49.12) controlPoint2: CGPointMake(15.29, 51.32)];
        [endCapBezierPath addLineToPoint: CGPointMake(14.54, 53.69)];
        [endCapBezierPath addCurveToPoint: CGPointMake(8.97, 59.25) controlPoint1: CGPointMake(13.6, 56.27) controlPoint2: CGPointMake(11.56, 58.31)];
        [endCapBezierPath addCurveToPoint: CGPointMake(0, 60) controlPoint1: CGPointMake(6.6, 60) controlPoint2: CGPointMake(4.4, 60)];
        [endCapBezierPath addLineToPoint: CGPointMake(0, 0)];
        [endCapBezierPath closePath];
        [loseColor setFill];
        [endCapBezierPath fill];



        CGContextRestoreGState(context);
    }


    //// Variable Sized Rectangle Drawing
    UIBezierPath* variableSizedRectanglePath = [UIBezierPath bezierPathWithRect: redBox];
    [loseColor setFill];
    [variableSizedRectanglePath fill];


    //// Winning Label Drawing
    CGRect winningLabelRect = CGRectMake(myFrame.origin.x, myFrame.origin.y, myFrame.size.width, myFrame.size.height);
    CGRect winningLabelInset = CGRectInset(winningLabelRect, 5, 0);
    NSMutableParagraphStyle* winningLabelStyle = NSMutableParagraphStyle.defaultParagraphStyle.mutableCopy;
    winningLabelStyle.alignment = NSTextAlignmentLeft;

    NSDictionary* winningLabelFontAttributes = @{NSFontAttributeName: [UIFont boldSystemFontOfSize: 36], NSForegroundColorAttributeName: UIColor.whiteColor, NSParagraphStyleAttributeName: winningLabelStyle};

    CGFloat winningLabelTextHeight = [winsText boundingRectWithSize: CGSizeMake(winningLabelInset.size.width, INFINITY)  options: NSStringDrawingUsesLineFragmentOrigin attributes: winningLabelFontAttributes context: nil].size.height;
    CGContextSaveGState(context);
    CGContextClipToRect(context, winningLabelInset);
    [winsText drawInRect: CGRectMake(CGRectGetMinX(winningLabelInset), CGRectGetMinY(winningLabelInset) + (CGRectGetHeight(winningLabelInset) - winningLabelTextHeight) / 2, CGRectGetWidth(winningLabelInset), winningLabelTextHeight) withAttributes: winningLabelFontAttributes];
    CGContextRestoreGState(context);


    //// Losing Label Drawing
    CGRect losingLabelRect = CGRectMake(myFrame.origin.x, myFrame.origin.y, myFrame.size.width, myFrame.size.height);
    CGRect losingLabelInset = CGRectInset(losingLabelRect, 5, 0);
    NSMutableParagraphStyle* losingLabelStyle = NSMutableParagraphStyle.defaultParagraphStyle.mutableCopy;
    losingLabelStyle.alignment = NSTextAlignmentRight;

    NSDictionary* losingLabelFontAttributes = @{NSFontAttributeName: [UIFont boldSystemFontOfSize: 36], NSForegroundColorAttributeName: UIColor.whiteColor, NSParagraphStyleAttributeName: losingLabelStyle};

    CGFloat losingLabelTextHeight = [lossesText boundingRectWithSize: CGSizeMake(losingLabelInset.size.width, INFINITY)  options: NSStringDrawingUsesLineFragmentOrigin attributes: losingLabelFontAttributes context: nil].size.height;
    CGContextSaveGState(context);
    CGContextClipToRect(context, losingLabelInset);
    [lossesText drawInRect: CGRectMake(CGRectGetMinX(losingLabelInset), CGRectGetMinY(losingLabelInset) + (CGRectGetHeight(losingLabelInset) - losingLabelTextHeight) / 2, CGRectGetWidth(losingLabelInset), losingLabelTextHeight) withAttributes: losingLabelFontAttributes];
    CGContextRestoreGState(context);
}

如何用UIImage来表示用户的输赢？

How to use UIImage to represent user's wins and losses?

ios

objective-c

uiimageview

uiimage