Styling

Display Options

TickarooOptionScoreboardImageMode

with the TickarooOptionScoreboardImageMode option you can control either or not the image of the liveblog owner should be displayed in the scoreboard. This will not change the layout, as we align the scoreboard labels with the content. You have to provide a value of type T2ScoreboardImageMode.

typedef enum : NSUInteger {
  T2ScoreboardImageModeOwner,
  T2ScoreboardImageModeNone,
} T2ScoreboardImageMode;

T2ScoreboardImageModeOwner

T2ScoreboardImageModeNone

TickarooOptionAlternativeIconLayout

you can configure the icon position of the event icon.

• TickarooOptionAlternativeIconLayout : @(NO)

• TickarooOptionAlternativeIconLayout : @(YES)

TickarooOptionDisplayShareInSlideshow

you can show the share icon in the slideshow, default is not visible.

• TickarooOptionDisplayShareInSlideshow : @(NO)
• TickarooOptionDisplayShareInSlideshow : @(YES)

TickarooOptionDisplayArrowAfterMilestone

you can display an arrow after a milestone item to indicate it is referring to an event. Default is no arrow.

• TickarooOptionDisplayArrowAfterMilestone : @(YES)

• TickarooOptionDisplayArrowAfterMilestone : @(NO)

Colors

You can configure the colors with the following styling keys

• TickarooStylingPrimaryColor
  • UIColor default is the Tickaroo-green
• TickarooStylingPrimaryColorDark
  • UIColor default is a dark variant of Tickaroo-green
• TickarooStylingAccentColor
  • UIColor default is light orange
• TickarooStylingAccentColorDark
  • UIColor default is dark orange

Background

• TickarooStylingMainBackgroundColor
  • UIColor The color of the background behind the whole content. Default is a light gray.
• TickarooStylingCellBackgroundColor
  • UIColor The color of the background of one single Cell/Row. Default is white.

Links and Highlight

• TickarooStylingLinkColor
  • UIColor default is PrimaryColor
• TickarooStylingHighlightColor
  • UIColor default is PrimaryColor

Buttons

• TickarooStylingButtonBackgroundColor
  • UIColor default is PrimaryColor
• TickarooStylingButtonTitleColor
  • UIColor default is white
• TickarooStylingHighlightButtonBackgroundColor
  • UIColor default is PrimaryColorDark
• TickarooStylingHighlightButtonTitleColor
  • UIColor default is white

Fonts

You can globally configure the Fonts being used with the following styling keys.

• TickarooStylingFontLight
• TickarooStylingFontRegular
• TickarooStylingFontMedium
• TickarooStylingFontBold
• TickarooStylingFontLive

each font configuration is a NSDictionary consisting following keys

• TickarooStylingFontName
  • NSString The name of the font
• TickarooStylingFontSizeSmall
  • NSNumber The size for small text
• TickarooStylingFontSizeBody
  • NSNumber The size for regular text
• TickarooStylingFontSizeHeadline
  • NSNumber The size for headlines

The values you provide are used as reference points and might be slightly altered in some UI-Elements e.g. TickarooStylingFontSizeSmall + 1

Cornerradii

• TickarooStylingBackgroundCornerRadius NSNumber Radius from the, default white, background behind the content.
• TickarooStylingImageCornerRadius NSNumber Radius of the images in an EventRow
• TickarooStylingButtonCornerRadius NSNumber Radius of the Buttons in a ButtonRow

Margins and Paddings

• TickarooStylingBackgroundContentInset
• TickarooStylingStateRatioMultiplier

TickarooStylingBackgroundContentInset

NSValue with UIEdgeInset. Controlls the left and right insets of the liveblog (gray color areas in the screenshot); top and bottom is ignored. On the iPad or landscape, the content will not become larger than 500px and the left and right insets will be set accordingly.

If you dont want the default left and right insets but also dont want the content that close to the edges, setting TickarooStylingMainBackgroundColor TickarooStylingMainBackgroundColor to the same value might be the better option for you.

TickarooStylingStateRatioMultiplier

NSNumber with a double value. Controlls the width of the left (state) column of, for example, the MilestoneRow. If Zero, the value will be ingored.

TickarooStylingStateRatioMultiplier with value 1.5

Styling individual Rows

For finer control over the appearance of individual rows you can use the TickarooSDKRowAppearance class. This class implements the UIAppearance protocol and is a proxy to the internal UICollectionViewCell subclasses we are using. You can add space and a line below an individual row-type and set the attributes of most of the used labels by using the same options as in the NSAttributedString class.

Bottom Space

There are three methods to configure the additional space below a row-type

- (void)setBottomSpacerInsets:(UIEdgeInsets)insets forRow:(Class<TApiAbstractRowClass>)rowClass

with the BottomSpacerInsets you define the dimensions of the additional space. The optional line is BottomSpacerInsets.top below the row and BottomSpacerInsets.bottom above the following row.

- (void)setBottomLineHeight:(CGFloat)height forRow:(Class<TApiAbstractRowClass>)rowClass

with the BottomLineHeight you define the height of the line. If zero, no line is drawn.

- (void)setBottomLineColor:(UIColor *)color forRow:(Class<TApiAbstractRowClass>)rowClass

with the BottomLineColor you define the color of the line.

Code for the example above

Objective-C

[[TickarooSDKRowAppearance appearance] setBottomSpacerInsets:UIEdgeInsetsMake(15, 2, 15, 2) forRow:[TApiMilestoneRow tikModelClass]];
[[TickarooSDKRowAppearance appearance] setBottomLineHeight:2 forRow:[TApiMilestoneRow tikModelClass]];
[[TickarooSDKRowAppearance appearance] setBottomLineColor:[UIColor greenColor] forRow:[TApiMilestoneRow tikModelClass]];

Swift

TickarooSDKRowAppearance.appearance().setBottomSpacerInsets(.init(top: 15, left: 2, bottom: 15, right: 2), forRow: TApiMilestoneRow.tik())
TickarooSDKRowAppearance.appearance().setBottomLineHeight(2, forRow: TApiMilestoneRow.tik())
TickarooSDKRowAppearance.appearance().setBottomLineColor(.green, forRow: TApiMilestoneRow.tik())

Text Attributes

To define the text attributes of a specific row-type you can use this method:

- (void)setTextAttributes:(NSDictionary *)attributes
                   forRow:(Class<TApiAbstractRowClass>)rowClass
             styleElement:(T2StyleElement)styleElement

The attributes parameter is similar to the attributes used by the NSAttributedString class. There is no specific limitation, but some combinations might break the layout. Also some labels are single-lined, so altering paragraph attributes might not show any effects.

The rowClass parameter is the tikModelClass of the row-type you want to alter. You get this value by calling [RowClass tikModelClass] for example [TApiMilestoneRow tikModelClass]

The styleElement parameter specifies which text element you want to alter. Possible values are defined in the following Enum:

typedef enum : NSUInteger {
  T2StyleElementTitle,
  T2StyleElementSubTitle,
  T2StyleElementText,
  T2StyleElementTimeState,
  T2StyleElementLiveState,
} T2StyleElement;

Note: Not all rows support all styleElements.

Note: There are two possible states an Event or the Liveblog can have, LiveState or TimeState. For text indicating the LiveState the TickarooStylingFontLive font is used by default. For normal rows the LiveState or TimeState element is the text in the left state-column

EventRow

The most important row is the EventRow. The location of the header is <TickarooSDK/TApiEventRow.h> you can configure the text attributes Title, Text, TimeState and LiveState. Additional options influencing the appearance of the EventRow are:

• TickarooStylingLinkColor
• TickarooStylingHighlightColor
• TickarooOptionAlternativeIconLayout
• TickarooStylingStateRatioMultiplier
• TickarooStylingImageCornerRadius

Row Settings

• T2StyleElementTitle Green in the example.
• T2StyleElementTimeState Blue in the example.
• T2StyleElementText Red in the example.

Global Colors

• TickarooStylingLinkColor Purple in the example.
• TickarooStylingHighlightColor Brown in the example.

Global Settings

• TickarooStylingStateRatioMultiplier 1.5 in the example.
• TickarooStylingImageCornerRadius 0 in the example.

Code for the example above

Objective-C

NSMutableParagraphStyle *paragraphStyle = NSMutableParagraphStyle.new;
paragraphStyle.alignment = NSTextAlignmentLeft;
[[TickarooSDKRowAppearance appearance] setTextAttributes: @{NSParagraphStyleAttributeName : paragraphStyle, NSForegroundColorAttributeName : [UIColor blueColor]}
                                              forRow:[TApiEventRow tikModelClass] styleElement:T2StyleElementTimeState];

NSMutableParagraphStyle *paragraphStyleLineSpacing = NSMutableParagraphStyle.new;
paragraphStyleLineSpacing.lineSpacing = 4;
[[TickarooSDKRowAppearance appearance] setTextAttributes:@{NSParagraphStyleAttributeName : paragraphStyleLineSpacing, NSForegroundColorAttributeName : [UIColor greenColor]}
                                              forRow:[TApiEventRow tikModelClass]
                                        styleElement:T2StyleElementTitle];
[[TickarooSDKRowAppearance appearance] setTextAttributes:@{NSParagraphStyleAttributeName : paragraphStyleLineSpacing, NSForegroundColorAttributeName : [UIColor redColor]}
                                              forRow:[TApiEventRow tikModelClass]
                                        styleElement:T2StyleElementText];

Swift

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .left
TickarooSDKRowAppearance.appearance().setTextAttributes([
        NSAttributedString.Key.paragraphStyle: paragraphStyle,
        NSAttributedString.Key.foregroundColor: UIColor.blue
    ], forRow: TApiEventRow.tik(), 
 styleElement: T2StyleElementTimeState)

let paragraphStyleLineSpacing = NSMutableParagraphStyle()
paragraphStyleLineSpacing.lineSpacing = 4
TickarooSDKRowAppearance.appearance().setTextAttributes([
        NSAttributedString.Key.paragraphStyle: paragraphStyleLineSpacing,
        NSAttributedString.Key.foregroundColor: UIColor.green
    ], forRow: TApiEventRow.tik(), 
 styleElement: T2StyleElementTitle)

TickarooSDKRowAppearance.appearance().setTextAttributes([
        NSAttributedString.Key.paragraphStyle: paragraphStyleLineSpacing,
        NSAttributedString.Key.foregroundColor: UIColor.red
    ], forRow: TApiEventRow.tik(), 
 styleElement: T2StyleElementText)

MilestoneRow

For the MilestoneRow (TApiMilestoneRow) you can configure the text attributes Title, TimeState and LiveState. Additional options influencing the appearance of the MilestoneRow are:

• TickarooStylingStateRatioMultiplier

Row Settings

• T2StyleElementTitle Green in the example.
• T2StyleElementTimeState Blue in the example.

Global Settings

• TickarooStylingStateRatioMultiplier 1.5 in the example.

Code for the example above

Objective-C

[[TickarooSDKRowAppearance appearance] setTextAttributes: @{NSForegroundColorAttributeName : [UIColor blueColor]}
                          forRow:[TApiMilestoneRow tikModelClass]
                    styleElement:T2StyleElementTimeState];

[[TickarooSDKRowAppearance appearance] setTextAttributes:@{NSForegroundColorAttributeName : [UIColor greenColor]}
                          forRow:[TApiMilestoneRow tikModelClass]
                    styleElement:T2StyleElementTitle];

Swift

TickarooSDKRowAppearance.appearance().setTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.blue],
                               forRow: TApiMilestoneRow.tik(),
                         styleElement: T2StyleElementTimeState)

TickarooSDKRowAppearance.appearance().setTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.green],
                               forRow: TApiMilestoneRow.tik(),
                         styleElement: T2StyleElementTitle)

ButtonRow

For the ButtonRow (TApiButtonRow) you can configure the text attributes for Title. Additional options influencing the appearance of the MilestoneRow are:

• TickarooStylingButtonCornerRadius
• TickarooStylingButtonBackgroundColor
• TickarooStylingButtonTitleColor
• TickarooStylingHighlightButtonBackgroundColor
• TickarooStylingHighlightButtonTitleColor

As the text attributes override the global options, you should consider only using the global attributes for the title-color as you lose the highlight feature by overriding the text attributes.

Global Settings

• TickarooStylingButtonCornerRadius 0 in the example.
• TickarooStylingButtonBackgroundColor Yellow in the example.
• TickarooStylingButtonTitleColor Magenta in the example.

LineupRow

you can configure the text stylings of the LineupRow (TApiLineupRow).

• T2StyleElementTitle The name of the Team. Green in the example.
• T2StyleElementSubTitle The positon of the following players. Blue in the example.
• T2StyleElementText The name of the player. Red in the example.

Code for the example above

[[TickarooSDKRowAppearance appearance] setTextAttributes:@{NSForegroundColorAttributeName : [UIColor redColor]}
                                              forRow:[TApiLineupRow tikModelClass]
                                        styleElement:T2StyleElementText];
[[TickarooSDKRowAppearance appearance] setTextAttributes:@{NSForegroundColorAttributeName : [UIColor greenColor]}
                                              forRow:[TApiLineupRow tikModelClass]
                                        styleElement:T2StyleElementTitle];
[[TickarooSDKRowAppearance appearance] setTextAttributes:@{NSForegroundColorAttributeName : [UIColor blueColor]}
                                              forRow:[TApiLineupRow tikModelClass]
                                        styleElement:T2StyleElementSubTitle];

The NavigationBar

Styling of the NavigationBar is completely in the hands of the application.