Я новичок в разработке iOS, и я пытаюсь создать игру, которая показывает выигрыши и проигрыши пользователя на горизонтальной панели, например: введите описание изображения здесь

Нужно ли мне для этого использовать два UIImageView? Кроме того, как настроить шкалу в зависимости от выигрышей и проигрышей? Буду признателен за любую помощь в том, как это сделать. Спасибо.

0
OSU222 5 Мар 2015 в 22:49

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);
}
0
picciano 5 Мар 2015 в 21:31

Создайте собственный класс WinLoseView.

Он будет состоять из

1) настраиваемая иерархия представлений

2) код брендинга (цвета, округление)

3) очень простой публичный интерфейс с двумя свойствами

  • выигрывает
  • потери

Иерархия представлений будет иметь

  • два UIViews
  • два UIlabels

Основное представление нужно немного округлить, используйте для этого свойство слоя UIview.

0
Earl Grey 5 Мар 2015 в 20:26