Question

我是iOS开发的新手，我正在尝试制作一个游戏，在这样的横条上显示用户的输赢： enter image description here

我是否需要使用两个UIImageView来执行此操作？另外，如何根据输赢来调整栏？我将不胜感激如何做到这一点。谢谢。

Answer 1

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

它将由

组成

1）自定义视图层次结构

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

3）非常简单的公共接口，有两个属性

胜
损失

视图层次结构将具有

两个UIViews
两个UIlabels

主视图需要进行一些舍入，使用UIview的图层属性。

Answer 2

这个自动生成的代码应该非常接近您的需求。做@rmaddy所说的并创建一个UIView子类。您将希望公布两个属性以获得胜负。 drawRect方法应调用下面的方法将视图的边界作为myFrame值传递。你必须使用颜色和字体，但应该非常接近你想要的。而且，就像@earlgray所说，它应该根据胜负的数量动态绘制自己，不需要图像。

enter image description here

- (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来表示用户的输赢？

2 个答案: