Creating a Paging Scroll View using Markup

I'm often inspired to try to replicate programming examples I find elsewhere on the web using MarkupKit. For one thing, it's a good way to test the framework. It's also a good way to validate that the API supports the kinds of things that developers might want to do with it. But most importantly, it is a way to provide a practical demonstration of how MarkupKit can be used to help simplify the app development process.

Today I was inspired to attempt to recreate an example I came across of building a paging scroll view. The "pages" of the scroll view are simply a collection of images depicting a variety of generic office scenes. Layered above the pages are a couple of logos, some text, a page control, and a button (which fades into view when the user visits the final page). The results are shown below:

The original example used views and constraints created interactively using Interface Builder. The MarkupKit version is constructed declaratively using XML:

<LMLayerView layoutMarginsRelativeArrangement="false">
    <!-- Page images -->
    <LMPageView id="pageView">
        <UIImageView image="Slide 1" contentMode="scaleAspectFit"/>
        <UIImageView image="Slide 2" contentMode="scaleAspectFit"/>
        <UIImageView image="Slide 3" contentMode="scaleAspectFit"/>
        <UIImageView image="Slide 4" contentMode="scaleAspectFit"/>

    <!-- Icons, text, page control, and start button -->
    <LMColumnView layoutMarginTop="50" layoutMarginLeft="30" layoutMarginBottom="40" layoutMarginRight="30">
        <!-- Main icon -->
        <UIImageView image="Icon" height="100" contentMode="scaleAspectFit"/>

        <LMColumnView spacing="30">
            <!-- Text icon -->
            <UIImageView image="Text Icon" height="66" contentMode="scaleAspectFit"/>

            <!-- Text label -->
            <UILabel id="label" textAlignment="center" font="System 14" numberOfLines="0"/>


        <LMColumnView spacing="30">
            <!-- Page control -->
            <UIPageControl id="pageControl" numberOfPages="4"
                pageIndicatorTintColor="#ef003d" currentPageIndicatorTintColor="#ffffff"

            <!-- Start button -->
            <UIButton id="startButton" title="Let's Start"
                titleLabel.font="System 15" titleLabel.textColor="#ffffff"
                layer.backgroundColor="#ef003d" layer.cornerRadius="4"

The root view is an instance of LMLayerView, a MarkupKit-provided UIView subclass that automatically arranges its subviews in layers, like a stack of transparencies. The first layer contains the page view, and the second contains the overlay content.

Paging support is provided by an instance of LMPageView, a MarkupKit-provided subclass of UIScrollView that automatically presents its subviews as a sequence of pages. The pages themselves are UIImageView instances containing the generic office images.

The overlay content consists of two image views, a UILabel instance, a UIPageControl, and a UIButton. These views are automatically arranged by the various LMColumnView instances that contain them. Column views automatically arrange their subviews in a vertical line that runs from top to bottom. The subviews are generally given their natural (or "intrinsic") heights, but are sized to fill the width of the column view.

The root column view contains the main icon and establishes a set of margins around its content. Nested column views are used to apply fixed spacing between the text logo and text label as well as the page control and the button (which is initially invisible). An instance of LMSpacer is used to provide flexible space between the column views.

The button and the page control are styled to match the icons as well as each other. The button is intially assigned an alpha value of 0 so it won't be visible until the user reaches the final page.

The example requires a small amount of controller code to handle page changes and update the state of the label and page control:

import UIKit
import MarkupKit

class ViewController: UIViewController, UIScrollViewDelegate {
    weak var pageView: LMPageView!

    weak var label: UILabel!
    weak var pageControl: UIPageControl!
    weak var startButton: UIButton!

    override func loadView() {
        view = LMViewBuilder.view(withName: "View", owner: self, root: nil)

    override func viewDidLoad() {

        pageView.delegate = self

    override func viewDidAppear(_ animated: Bool) {


    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let currentPage = scrollView.currentPage

        pageControl.currentPage = currentPage

        switch (currentPage) {
        case 0:
            label.text = " is your blog of choice for Mobile tutorials"

        case 1:
            label.text = "I write mobile tutorials mainly targeting iOS"

        case 2:
            label.text = "And sometimes I write games tutorials about Unity"

            label.text = "Keep visiting for new coming tutorials, and don't forget to subscribe to be notified by email :)"

            UIView.animate(withDuration: 1.0, animations: {
                self.startButton.alpha = 1.0

As usual, the markup is loaded in loadView(). The controller assigns itself as the page view's delegate in viewDidLoad() so it can respond to page changes, which trigger a call to scrollViewDidEndDecelerating(). In scrollViewDidEndDecelerating(), the controller updates the state of the page control to match the current page shown by the page view, and then sets the label text to a value appropriate for the page (the strings are taken from the original example). The viewDidAppear() method calls scrollViewDidEndDecelerating() simply to avoid duplicating the code that sets the initial state of the label.

While the original example was well written and very well documented, the MarkupKit version is considerably less verbose and ultimately requires much less effort on the part of the developer.

For more information, see the MarkupKit README or the following examples:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s