\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{jwang20}
\pdfinfo{
  /Title (swift-progress-bar-and-spinner.pdf)
  /Creator (Cheatography)
  /Author (jwang20)
  /Subject (Swift Progress Bar and Spinner Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{CC18B4}
\definecolor{LightBackground}{HTML}{FBF0FA}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Swift Progress Bar and Spinner Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{jwang20} via \textcolor{DarkBackground}{\uline{cheatography.com/58150/cs/15384/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}jwang20 \\
  \uline{cheatography.com/jwang20} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 5th April, 2018.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{3}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Progress Bar Introduction}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Progress bar, formally known as `UIProgressView` in swift 4.1, is a common element of a page. It is used to indicate the progress of a {\bf{computable}} process, such as downloading a file. It should not be used for {\bf{incomputable}} process, such as attempting to establish Internet connection or searching for a content (for such use, please see `spinner` to the right.)% Row Count 8 (+ 8)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Image of Progress Bar}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{5.377cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/jwang20_1522892896_Screen Shot 2018-04-04 at 9.47.30 PM.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Useful Class Method}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{`func setProgress(Float, animated: Bool)` \newline % Row Count 1 (+ 1)
A function to set progress of the progress bar.  \newline % Row Count 2 (+ 1)
The first positional argument is within range 0.0 to 1.0 inclusive, indicating the progress of the task.  \newline % Row Count 5 (+ 3)
The second argument `animated` indicates whether the change in progress should be animated. When set to `false`, the progress bar will "jump" to the updated progress. Otherwise, it will be filled/unfilled gradually to the updated progress.% Row Count 10 (+ 5)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Useful Instance Variables}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{`var isHidden` \newline % Row Count 1 (+ 1)
A `Bool` determines whether the progress bar is hidden or not.  \newline % Row Count 3 (+ 2)
`var progress` \newline % Row Count 4 (+ 1)
A `Float` within range 0.0 to 1.0 inclusive, indicating the progress.% Row Count 6 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{MCVE (Minimal Complete Verifiable Example)}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{/*\textbackslash{} to run this example, simply create up a new project, then \newline | | copy and paste the code below to ViewController.swift \newline | | create a button and a progress bar in the storyboard, then \newline | | create a reference outlet from the progress bar to \newline | | progressBar variable, then create \newline | | an action outlet from the button to startTask() function \newline \textbackslash{}*/ \newline  \newline import UIKit  \newline class ViewController: UIViewController \{ \newline  \newline     @IBOutlet weak var progressBar: UIProgressView!  \newline     //outlet of the progressBar \newline      \newline     override func viewDidLoad() \{ \newline         super.viewDidLoad() \newline         //set the progressBar to 0, default value is 0.5 \newline         \seqsplit{progressBar.setProgress(0}, animated: false)  \newline        //hide the progressBar \newline         \seqsplit{progressBar.isHidden=true} \newline     \} \newline  \newline    var t:Timer! \newline     @objc func updateProgress()\{  \newline     // an example function to increase the progress of the task by 1\% \newline     // only called by timer in the following function \newline     //@objc decorator exposes the function to timer \newline         \seqsplit{progressBar.setProgress(progress.progress+0.01},animated: true) \newline         if progressBar.progress\textgreater{}=1.0\{ \newline             t.invalidate() // stop the timer \newline             \seqsplit{progressBar.isHidden=true} // hide the progress bar \newline             \seqsplit{progressBar.setProgress(0}, animated: false) // reset the progress bar \newline         \} \newline     \} \newline  \newline      \newline      \newline     @IBAction func startTask(\_ sender: Any) \{ // outlet of the button that activates this function \newline         // an example function that increases the progress of  \newline         // progress bar by 0.1 every 0.05 second (simulating a  \newline         // task that takes 5 seconds to complete) \newline         \seqsplit{progressBar.isHidden=false} // display the progress bar \newline         \seqsplit{t=Timer.scheduledTimer(timeInterval:} 0.05, target: self, selector: \seqsplit{\#selector(updateProgress)}, userInfo: nil, repeats: true) // set the timer \newline         \} \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Spinner Introduction}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Spinner, formally known as \seqsplit{`UIActivityIndicatorView`} in swift 4.1, is a common element for an application. It is used to indicate that there is an ongoing process (either executing in the front or background) that consumes unknown amount of time, such as searching for a specific content or making computation.% Row Count 7 (+ 7)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Image of Spinner}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{5.377cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/jwang20_1522892939_Screen Shot 2018-04-04 at 9.48.38 PM.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}