.gitignore for Xcode

I end up rewriting this file for every Xcode project I create, so I thought I’d post it in case it is of use to anyone:

**/.DS_Store
.xcodeproj/xcuserdata/
.xcodeproj/project.xcworkspace/xcuserdata/

Comments and suggestions for improvement are welcome!

Creating a Grid Layout in iOS

As I recently mentioned over at DZone, working with auto layout in iOS has historically been somewhat difficult. Having previously built applications for other platforms with more robust layout management capabilities, I expected to find something comparable when I started doing iOS development. One of the first things I looked for was a "grid" layout that I could use to automatically arrange views in rows and columns. Such features are common on other platforms and are often used to lay out many fundamental elements of an application's user interface, from side bars and menus to feedback forms. I was disappointed to discover that nothing like this existed for iOS.

With iOS 9, Apple introduced the UIStackView class. By combining a vertical stack view with several horizontal stack views, I could much more easily create the kind of layouts I needed. And, as I mentioned in the DZone article, MarkupKit makes it even easier to work with stack views, using a declarative model similar to Android and Windows development.

For example, the following markup creates a simple form that allows a user to enter a name and address. The labels and text fields are baseline-aligned, and the entire form is hosted in a scroll view. The text fields are assigned a horizontal content hugging priority of 0 to allow them to resize:

<LMScrollView fitToWidth="true" backgroundColor="#ffffff">
    <UIStackView axis="vertical" layoutMarginsRelativeArrangement="true" layoutMargins="20" spacing="12">
        <UIStackView axis="horizontal" alignment="firstBaseline" spacing="8">
            <UILabel text="Name"/>
            <UITextField id="nameTextField" borderStyle="roundedRect"
                horizontalContentHuggingPriority="0"/>
        </UIStackView>

        <UIStackView axis="horizontal" alignment="firstBaseline" spacing="8">
            <UILabel text="Address"/>

            <UIStackView id="addressStackView" axis="vertical" spacing="8">
                <UITextField borderStyle="roundedRect" placeholder="Street"
                    horizontalContentHuggingPriority="0"/>

                <UIStackView axis="horizontal" alignment="firstBaseline" spacing="8">
                    <UITextField id="cityTextField" placeholder="City" borderStyle="roundedRect"
                        horizontalContentHuggingPriority="0"/>
                    <UITextField id="stateTextField" placeholder="State" borderStyle="roundedRect"
                        horizontalContentHuggingPriority="0"/>
                    <UITextField id="zipTextField" placeholder="Zip" borderStyle="roundedRect"
                        horizontalContentHuggingPriority="0"/>
                </UIStackView>
            </UIStackView>
        </UIStackView>
    </UIStackView>
</LMScrollView>

Unfortunately, stack views don't natively provide a way to vertically align controls, so the output of this markup doesn't look quite right:

What's worse, the text fields don't retain their original sizes once text has been entered into them:

To ensure that the controls are aligned and maintain a fixed size, the view controller needs to install some additional constraints in viewDidLoad():

import UIKit
import MarkupKit

class StackViewController: UIViewController {
    weak var nameTextField: UITextField!

    weak var addressStackView: UIStackView!

    weak var cityTextField: UITextField!
    weak var stateTextField: UITextField!
    weak var zipTextField: UITextField!

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

    override func viewDidLoad() {
        super.viewDidLoad()

        title = "Stack Views"

        // Create custom constraints
        NSLayoutConstraint.activate([
            // Equal-width
            NSLayoutConstraint(item: nameTextField, attribute: NSLayoutAttribute.width,
                relatedBy: NSLayoutRelation.equal, toItem: addressStackView, attribute: NSLayoutAttribute.width,
                multiplier: 1.0, constant: 0),

            // Weight
            NSLayoutConstraint(item: stateTextField, attribute: NSLayoutAttribute.width,
                relatedBy: NSLayoutRelation.equal, toItem: cityTextField, attribute: NSLayoutAttribute.width,
                multiplier: 2.0 / 3.0, constant: 0),
            NSLayoutConstraint(item: zipTextField, attribute: NSLayoutAttribute.width,
                relatedBy: NSLayoutRelation.equal, toItem: stateTextField, attribute: NSLayoutAttribute.width,
                multiplier: 2.0 / 2.0, constant: 0)
        ])
    }
}

With the additional constraints, the form behaves as expected:

However, there is an even easier way to create this layout. MarkupKit's LMColumnView and LMRowView classes can also be used to create a table-like arrangement of UI elements. Further, LMColumnView provides an alignToGrid property that can be used to ensure that nested subviews are vertically aligned, and the form fields can be weighted to ensure that they retain their relative sizes:

<LMScrollView fitToWidth="true" backgroundColor="#ffffff">
    <LMColumnView alignToGrid="true" layoutMargins="20">
        <LMRowView alignToBaseline="true">
            <UILabel text="Name"/>
            <UITextField class="textfield" borderStyle="roundedRect" weight="1"/>
        </LMRowView>

        <LMRowView alignToBaseline="true">
            <UILabel text="Address"/>

            <LMColumnView weight="1">
                <UITextField borderStyle="roundedRect" placeholder="Street"/>

                <LMRowView alignToBaseline="true">
                    <UITextField placeholder="City" borderStyle="roundedRect" weight="3"/>
                    <UITextField placeholder="State" borderStyle="roundedRect" weight="2"/>
                    <UITextField placeholder="Zip" borderStyle="roundedRect" weight="2"/>
                </LMRowView>
            </LMColumnView>
        </LMRowView>
    </LMColumnView>
</LMScrollView>

This markup produces output identical to the final stack view example, but is much less verbose, and doesn't require the use of custom constraints or content priorities:

MarkupKit's row and column views don't offer all of the features provided by UIStackView. For example, stack views provide additional alignment and distribution options as well as the ability to animate changes to their contents. However, the weight-based distribution and column alignment options supported by LMColumnView and LMRowView make them a great alternative for creating grid layouts in iOS applications.

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

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"/>
    </LMPageView>

    <!-- 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>

        <LMSpacer/>

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

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

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() {
        super.viewDidLoad()

        pageView.delegate = self
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        scrollViewDidEndDecelerating(pageView)
    }

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

        pageControl.currentPage = currentPage

        switch (currentPage) {
        case 0:
            label.text = "Sweettutos.com 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"

        default:
            label.text = "Keep visiting sweettutos.com 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: