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 (opens new window) section.

TIP

Please check the this github (opens new window) page for implemented samples.

Warning Additional data

Do not forget to use additional fields of the storyGroup parameter of the populateView function. For instance, if you want to show pinned groups, you can use pinned field of the object or if you want to show IVOD(Interactive VideOnDemand) groups, you can use the type 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 in storyGroup parameter, fill your UI components.
• Create a class that implements StoryGroupViewFactory protocol in order to serve as your factory.
• Implement createView and getSize functions in the previous class you defined and return a new instance of your StoryGroupView subclass.
• Create a new instance of your factory that implements StoryGroupViewFactory and set storyGroupViewFactory variable of the StorylyView with this instance.