heliomesquita / tictactoe

A baseline view over the application to help verify alignments

This library inserts on your application a baseline grid.

Getting Started

_{Example of usage on Swiftmazing app}

This tool adds the baseline grid over the application, thus allowing you to browse the entire app and verify that the alignment is following the requirements. There are two options of baseline - 4 and 8 size

Motivation

After several problems in ensuring the alignment and baselines established in the project requirement. This tool was developed, together with the design/ux team, to facilitate and ensure that visual elements follow the established baselines.

Prerequisites

This library was developed thinking about compatibility with any project version, so it was developed using objective-c. The iOS compatibility +9.0

Installing

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. Insert in your Podfile:

use_frameworks!

target "YourProject" do
  pod 'TicTacToe'
end

then

pod install

How To Use

Using only AppDelegate

On AppDelegate.swift

import UIKit
#if DEBUG
import TicTacToe
#endif

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    #if DEBUG
    TicTacToePreferences.shared().show()
    #endif
    return true
  }

}

AppDelegate and SceneDelegate

On SceneDelegate.swift

import UIKit
#if DEBUG
import TicTacToe
#endif

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    (...)

    func sceneDidBecomeActive(_ scene: UIScene) {
        #if DEBUG
        TicTacToePreferences.shared().isUsingScenePattern = true
        TicTacToePreferences.shared().show()
        #endif
    }

Using the Grid

It is possible to observe that there are two areas highlighted in the Debug View Hierachy mode, when these areas are called at the same time they trigger the action to activate or change the way that the baseline is appearing on the screen.

On Simulator

Hold down the Option key, which makes two circles appear that, just tap that area :)

Authors

• Helio Mesquita - Initial work - HelioMesquita

License

This project is licensed under the MIT License - see the LICENSE.md file for details