Set Up Storyly Bar
UI Customizations
This guide shows you how to customize the story experience of your users. These customizations apply to both storyly bar and story view.
Before you begin
It is advised to apply these customizations after
StorylyInit
if you are planning to do the customizations programmatically.
Storyly Bar Customizations
This section shows supported customizations on the storyly bar.
Story Group Text Styling
This styling changes the visibility, font, text size, color and number of lines of story group text. Each of the properties except font and text size can be specified from the the attributes inspector of design view one by one:
- For visibility, change the value of the
Story Group Text Is Visible
under the Storyly View section. - For color, change the color of the
Story Group Text Color
under the Storyly View section. - For lines, change the value of the
Story Group Text Lines
under the Storyly View section.
If you want to specify programmatically, you can set the attributes one by one:
storylyView.storyGroupTextIsVisible = Bool
storylyView.storyGroupTextColorSeen = UIColor
storylyView.storyGroupTextColorNotSeen = UIColor
storylyView.storyGroupTextSize = Int
// If you want to change the text size, change it from UIFont
storylyView.storyGroupTextFont = UIFont
storylyView.storyGroupTextLines = Int
Another way is to set storyGroupTextStyling
property of the StorylyView
. Please check API Reference for StoryGroupTextStyling.
storylyView.storyGroupTextStyling = StoryGroupTextStyling
storylyView.storyGroupTextStyling = StoryGroupTextStyling *
Warning
If you are planning to do ui customization, do not mix programmatical approach with attributes inspector of design view. Prefer to use programmatical approach if you want incremental updates on story group text.
Story Group Icon Background Color
This attribute changes the background color of the story group icon that is shown to the user as skeleton view till the stories are loaded. This attribute can be specified programmatically or from the attributes inspector of design view.
In order to set this attribute, use one of the following methods:
storylyView.storyGroupIconBackgroundColor = UIColor
storylyView.storyGroupIconBackgroundColor = UIColor *
In order to set this attribute from the design view, change the color of the Story Group Icon Background Color
under the Storyly View section in the attributes inspector.
Story Group Icon Border Seen State Color
This attribute changes the border color of the story group icons that are seen by the user. The border consists of color gradients. This attribute can only be specified programmatically.
Warning
At least 2 colors must be defined in order to use this attribute. If a single color is requested, a same color code can be used twice.
In order to set this attribute, use one of the following methods:
storylyView.storyGroupIconBorderColorNotSeen = [UIColor]
storylyView.storyGroupIconBorderColorNotSeen = NSArray<UIColor *> *
Story Group Icon Border Not Seen State Color
This attribute changes the border color of the story group icons that are unseen by the user. The border consists of color gradients. This attribute can only be specified programmatically.
Warning
At least 2 colors must be defined in order to use this attribute. If a single color is requested, a same color code can be used twice.
In order to set this attribute, use one of the following methods:
storylyView.storyGroupIconBorderColorNotSeen = [UIColor]
storylyView.storyGroupIconBorderColorNotSeen = NSArray<UIColor *> *
Story Group Pin Icon Color
If any of the story groups are selected as pinned groups from the dashboard, a little star icon will appear along with the story group icon. This attribute changes the background color of this pin icon. This attribute can be specified programmatically or from the attributes inspector of design view.
In order to set this attribute, use one of the following methods:
storylyView.storyGroupPinIconColor = UIColor
storylyView.storyGroupPinIconColor = UIColor *
In order to set this attribute from the design view, change the color of the Story Group Pin Icon Color
under the Storyly View section in the attributes inspector.
Story Group Ivod Icon Color
If any of the story groups are selected as the IVod group type from the dashboard, a little camera icon will appear along with the story group icon. This attribute changes the background color of this Ivod icon. This attribute can be specified programmatically or from the attributes inspector of design view.
In order to set this attribute, use one of the following methods:
storylyView.storyGroupIVodIconColor = UIColor
storylyView.storyGroupIVodIconColor = UIColor *
In order to set this attribute from the design view, change the color of the Story Group Ivod Icon Color
under the Storyly View section in the attributes inspector.
Story Group Size
This attribute changes the size of the story group. This attribute can be specified programmatically or from the attributes inspector of design view. Currently, supported sizes are small
, large
and custom
sizes. The default story group size is large
.
In order to set this attribute, use one of the following methods:
storylyView.storyGroupSize = String
storylyView.storyGroupSize = String *
In order to set this attribute from the design view, change the value of the Story Group Size
under the Storyly View section in the attributes inspector.
Tip
If you set your story group size as
custom
, you can change a few measures of the story groups such as icon height, icon width, icon corner radius. Check the Custom Size Story Group Icon Styling.
Custom Size Story Group Icon Styling
This styling changes the shape of the story group icons, their corners, and the distance between each other. You can create square, circle, and oval-shaped icons using these attributes. This styling can be specified programmatically or from the attributes inspector of design view. You should set a StoryGroupIconStyling
instance, which consists of the following variables: height, width, cornerRadius.
Warning
This section is effective if you set your story group size as
custom
. If you set any other size and use this attribute, your changes will not take effect.
In order to set this attribute, use one of the following methods:
storylyView.storyGroupIconStyling = StoryGroupIconStyling
storylyView.storyGroupIconStyling = StoryGroupIconStyling *
In order to set this attribute from the design view, change the values of the Story Group Icon Height
, Story Group Icon Width
, and Story Group Icon Corner Radius
under the Storyly View section in the attributes inspector.
Story Group List Styling
This styling changes the orientation of Story Groups, number of rows/columns (sections), horizontal and vertical distance between the Story Groups and edge paddings of the first and last Story Groups.
In order to set these attributes, use one of the following methods:
storlyView.storyGroupListOrientation = "horizontal" | "vertical"
storlyView.storyGroupListSections = Int
storlyView.storyGroupListHorizontalEdgePadding = CGFloat
storlyView.storyGroupListVerticalEdgePadding = CGFloat
storlyView.storyGroupListHorizontalPaddingBetweenItems = CGFloat
storlyView.storyGroupListVerticalPaddingBetweenItems = CGFloat
Tip
Orientation: This is set as "horizontal" by default, if you'd like to have a vertical, grid-like view of Story Groups, you can set it as "vertical".
Sections: Based on the orientation, it's the row count of Story Groups for horizontal orientation or column count of Story Groups for vertical orientation.
Horizontal Edge Padding: Edge padding value of the first and last Story Groups for horizontal orientation.
Vertical Edge Padding: Edge padding value of the first and last Story Groups for vertical orientation.
Horizontal Padding Between Items: Horizontal padding value between Story Groups.
Vertical Padding Between Items: Vertical padding value between Story Groups.
Story Group Thematic Icon Image
This feature lets you use different story groups images for different labels. If you set dark mode images for your story groups from the Storyly dashboard, you can set a dark label to show these dark mode icons. This attribute can be specified programmatically or from the attributes inspector of design view.
Warning
If you use the following methods to set the label without setting dark mode images from the dashboard, default group images will be used. If you already set the dark mode images but send a string label other than
dark
, again default group images will be used.
In order to set this attribute, use one of the following methods:
storylyView.storyGroupIconImageThematicLabel = String
storylyView.storyGroupIconImageThematicLabel = String *
In order to set this attribute from the design view, change the value of the Story Group Icon Image Thematic Label
under the Storyly View section in the attributes inspector.
Story Group Animation
This attribute adds an animation to the Story Group cover.
storylyView.storyGroupAnimation = "borderAnimation" | "disabled"
storyGroupAnimation borderAnimation | disabled
Warning
Story Group Animation is enabled by default. To disable it, you need to set it as
disabled
.

Warning
- Story Group animation applies to all Story Groups.
- Story Group animation is not available for Custom Story Group Styling.
Storyly Layout Direction
This attribute changes the layout direction of the Storyly Bar. Storyly Bar can either be LTR (Left to right) or RTL (Right to left). If your UI is bidirectional and it changes depending on the device or app language you can use this attribute.
storylyView.storylyLayoutDirection = .LTR | .RTL
storylyLayoutDirection LTR | RTL
Warning
Storyly will use the LTR layout if the
StorylyLayoutDirection
is not set.
Story View Customizations
This section shows supported customizations on story view.
Storyly View Header Text Color
This attribute changes the header text color of the story view. This attribute can be specified programmatically or from the attributes inspector of design view.
In order to set this attribute, use one of the following methods:
storylyView.storyItemTextColor = UIColor
storylyView.storyItemTextColor = UIColor *
In order to set this attribute from the design view, change the color of the Story Item Text Color
under the Storyly View section in the attributes inspector.
Storyly View Header Icon Border Color
This attribute changes the header icon border color of the story view. The border consists of color gradients. This attribute can only be specified programmatically.
Warning
At least 2 colors must be defined in order to use this attribute. If a single color is requested, a same color code can be used twice.
In order to set this attribute, use one of the following methods:
storylyView.storyItemIconBorderColor = [UIColor]
storylyView.storyItemIconBorderColor = NSArray<UIColor *> *
Storyly View Progress Bar Color
This attribute changes the progress bar colors, two colors, of the story view. The first defined color is the color of the background bars and the second one is the color of the foreground bars while watching the stories. This attribute can only be specified programmatically.
Warning
Only 2 colors must be defined in order to use this attribute.
In order to set this attribute, use one of the following methods:
storylyView.progressBarColor = [UIColor]
storylyView.progressBarColor = NSArray<UIColor *> *
Storyly View Header Icon and Text Visibility
This styling changes the visibility of story group text. This attribute can be specified programmatically or from the attributes inspector of design view.
In order to set this attribute, use one of the following methods:
storylyView.storyHeaderStyling = StoryHeaderStyling
storylyView.storyHeaderStyling = StoryHeaderStyling *
In order to set this attribute from the design view, change the values of the Story Header Icon Is Visible
and Story Header Text Is Visible
under the Storyly View section in the attributes inspector.
Storyly View Header Close and Share Icon Styling
This styling changes the visibility and icon of story header close icon and share icon. This attributes can be specified programmatically with StoryHeaderStyling, or from the attributes inspector of design view.
In order to set this attribute, use one of the following methods:
storylyView.storyHeaderStyling = StoryHeaderStyling
storylyView.storyHeaderStyling = StoryHeaderStyling *
In order to set these attributes from design view, change values of the storyHeaderCloseButtonIsVisible
, storyHeaderCloseButtonIcon
and storyHeaderShareButtonIcon
under the Storyly View section in the attributes inspector.
Storyly View Header Text Font
This attribute changes the font of the story view header text. This attribute can only be specified programmatically.
In order to set this attribute, use one of the following methods:
storylyView.storyItemTextFont = UIFont
storylyView.storyItemTextFont = UIFont *
Warning
Font size will be overridden in Storyly, so it is not possible to change the font size.
Storyly View Loading View
This customization changes the default loading view to the desired custom loading view. In order to change this view, you need to prepare your own loading view, which must inherit from StorylyLoadingView
. You can see an example class in the following code snippet:
class LoadingView: UIView, StorylyLoadingView {
override init(frame: CGRect) {
super.init(frame: frame)
self.translatesAutoresizingMaskIntoConstraints = false
self.isUserInteractionEnabled = true
let view = UIView(frame: frame)
addSubview(view)
view.translatesAutoresizingMaskIntoConstraints = false
view.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
view.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
view.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
view.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
}
required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
func getView() -> UIView {
return self
}
func show() {}
func hide() {}
}
@implementation LoadingView
// Check the swift sample
@end
After you create your custom loading view, set it by using the following methods:
storylyView.storylyLoadingView = StorylyLoadingView
storyly_view.storylyLoadingView = StorylyLoadingView *
Storyly View Interactive Font
This attribute changes the font of all text view's font in interactive components. This attribute can only be specified programmatically.
In order to set this attribute, use one of the following methods:
storylyView.storyInteractiveFont = UIFont
storylyView.storyInteractiveFont = UIFont *
Warning
Storyly will use UIFont.systemFont if custom font is not set.
Warning
Storyly will arrange font size for each text view in interactive components so that custom font size arrangement is not possible.
Custom Story Group Styling
Warning
This section is valid if you are using Storyly SDK version 1.16.0 or higher.
This guide shows you how to customize the story group view's style. Storyly provides three different pre-defined story group styles; Small
, Large
and Custom
. However, if you want to use different style other than these pre-defined ones or if pre-defined ones do not satisfy your expectations then you should follow this section.
Warning
If you are using pre-defined sizes and want to apply only some customizations, follow UI Customizations section.
Story Group View Factory
You need to set storyGroupViewFactory
field of StorylyView
as a start point of the setup. You need to create a class that implements StoryGroupViewFactory
protocol and implements createView
and getSize
functions.
// Assume we have a StorylyView instance called storylyView
storylyView.storyGroupViewFactory = SampleViewFactory()
class SampleViewFactory: StoryGroupViewFactory {
func createView() -> StoryGroupView {
return SampleView(frame: .zero)
}
// Size of your custom view
func getSize() -> CGSize {
return CGSize(width: 100, height: 178)
}
}
StoryGroupViewFactory
calls createView
and getSize
functions whenever a new view is required. It will request an instance of your view for each of the story groups while creating the StorylyView
. Therefore, each story group is associated with different instances of your view. Note that, Storyly SDK uses UICollectionView to show lists so that a new view is not required for each time, recycled views will be used.
Story Group View
StoryGroupView
class is used to represent the view that will be shown as a single story group. In order to use your own custom view, your view should be subclass of StoryGroupView
class and implement its functions;
class SampleView: StoryGroupView {
let kCONTENT_XIB_NAME = "SampleView"
@IBOutlet var contentView: UIView!
@IBOutlet var sampleText: UILabel!
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
func commonInit() {
Bundle.main.loadNibNamed(kCONTENT_XIB_NAME, owner: self, options: nil)
addSubview(contentView)
contentView.frame = self.bounds
}
override func populateView(storyGroup: StoryGroup?) {
// Handle populating view with Storyly related data
// ie, self.sampleText.text = storyGroup?.title
}
}
populateView
function is called when your view is about to be shown. Its storyGroup
parameter has all of the information that you provided in Storyly dashboard for your story groups. You can find the details of the StoryGroup
below:
@objc public final class StoryGroup: NSObject {
@objc public let id: Int
@objc public let title: String
@objc public let iconUrl: URL
@objc public let thematicIconUrls: [String: URL]?
@objc public let coverUrl: URL?
@objc public let index: Int
@objc public let seen: Bool
@objc public let stories: [Story]
@objc public let pinned: Bool
@objc public let type: StoryGroupType
}
Tip
You can find the explanation of each field from the API Reference section.
Tip
Please check the this github page for implemented samples.
Warning Additional data
Do not forget to use additional fields of the
storyGroup
parameter of thepopulateView
function. For instance, if you want to show pinned groups, you can usepinned
field of the object or if you want to show IVOD(Interactive VideOnDemand) groups, you can use thetype
field of the object.
Summary
To sum up, in order to use your own custom group style, you need to follow the steps below:
- Create your own custom style in XIB or programmatically.
- Use this style in a class that is subclass of
StoryGroupView
by using XIB and adding its view or by adding views programmatically. - Override
populateView
function in the previous class you defined and by using the data instoryGroup
parameter, fill your UI components. - Create a class that implements
StoryGroupViewFactory
protocol in order to serve as your factory. - Implement
createView
andgetSize
functions in the previous class you defined and return a new instance of yourStoryGroupView
subclass. - Create a new instance of your factory that implements
StoryGroupViewFactory
and setstoryGroupViewFactory
variable of the StorylyView with this instance.
Updated 3 months ago