This article describes how to create an iOS app project and how to develop it using XIB. It also discusses how to organize directories and SceneDelegate.

Create a project, Application development using XIB.

Install <code>SwiftLint</code> to make your project code clean and unified. This will be essential to maintain the quality of your code.
<h2>About SwiftLint</h2>
<code>SwiftLint</code> is a static analysis tool for adding Swift styles and conventions. The conventions are based on the <a href="https://github.com/github/swift-style-guide">GitHub Swift Style Guide</a>.
<a href="https://github.com/realm/SwiftLint">realm/SwiftLint: A tool to enforce Swift style and conventions.</a>
<h2>Install with Mint</h2>
In this article, I will show you how to install <code>SwiftLint</code> using <code>Mint</code>. For other methods, please check <a href="https://github.com/realm/SwiftLint#installation">README.md</a>.
<a href="https://github.com/yonaskolb/Mint">Mint</a> is package manager that installs and runs Swift command line tool packages.
<details><summary>Installing Mint</summary>
<pre><code class="hljs language-bash">// Install Mint
$ brew install mint
// Check Version
$ mint version</code></pre>
</details>
<ol>
<li>
Installing
Create a <code>Mintfile</code> in the root of your project.
<pre><code class="hljs language-bash">cd ProjectName
touch Mintfile</code></pre>
<pre><code>.
├─ ProjectName.xcodeproj
├─ ProjectName
└─ Mintfile
</code></pre>
Write the following in your <code>Mintfile</code>.
<pre><code>realm/SwiftLint@0.44.0
</code></pre>
Do a <code>mint bootstrap</code> where the <code>Mintfile</code> is located.
<pre><code class="hljs language-bash">mint bootstrap</code></pre>
Verify that it is installed with <code>mint list</code>.
<pre><code class="hljs language-bash">mint list</code></pre>
</li>
<li>
Add a Run Script
Open your project in Xcode, open <code>TARGETS</code> > <code>BuidPhases</code>, and select <code>New Run Script Phase</code> from the + button.（Fregure 1） 
<img src="/assets/swiftlint/images/figure1.png" alt="Figure 1"> 
Figure 1
Add the following Script.(Figure 2）
<pre><code class="hljs language-shell">if which mint >/dev/null; then
mint run swiftlint swiftlint autocorrect --format
mint run swiftlint swiftlint
else
echo "warning: Mint not installed, download from https://github.com/yonaskolb/Mint"
fi</code></pre>
<img src="/assets/swiftlint/images/figure2.png" alt="Figure 2"> 
Figure 2
</li>
<li>
Add .swiftlint.yml
Create a <code>.swiftlint.yml</code> in the root of your project.
<pre><code>.
├─ ProjectName.xcodeproj
├─ ProjectName
├─ Mintfile
└─ .swiftlint.yml
</code></pre>
In this file, you can change or disable detailed rules.
<pre><code class="hljs language-yaml">included:
 - SwiftRecipesSample

excluded:
 - SwiftRecipesSample/Scripts/R.generated.swift
 - Carthage

line_length: 200
large_tuple: 5

file_length:
 warning: 500
 error: 1200

nesting:
 type_level:
 warning: 2

identifier_name:
 excluded:
 - id
 - URL
 - en
 - ja
cyclomatic_complexity: 20</code></pre>
In <code>included</code>, describe the target. 
<code>excluded</code> describes the files to be excluded. If you use it with <code>R.swift</code>, add <code>R.generated.swift</code> here.
For more rules, see SwiftLint's <a href="https://github.com/realm/SwiftLint#configuration">README</a>.
</li>
<li>
Let's build.
If the <code>.swiftlint.yml</code> is not reflected, do a clean build (⌘+Shift+K) and build it again. If it still doesn't work, make sure that the yaml (Be careful of extra spaces, etc.)
When checking if SwiftLint is working correctly, write a statement that violates the rule and build it to check it, as shown below. (Figure 3)
<pre><code class="hljs language-swift">let i = 1</code></pre>
<img src="/assets/swiftlint/images/figure3.png" alt="Figure 3"> 
Figure 3
</li>
</ol>
<h2>Disable rules in code</h2>
SwiftLint allows you to avoid errors by explicitly adding a comment in your code to disable the rule. 
For example, the error in Figure 3 can be avoided as Figure 4.
<pre><code class="hljs language-swift">let i = 1 // swiftlint:disable:this identifier_name</code></pre>
<img src="/assets/swiftlint/images/figure4.png" alt="Figure 4"> 
Figure 4
<h2>Conclusion</h2>
Of course, SwiftLint can be used on its own, but we recommend that you try building an environment with the following recipe.
<ol>
<li><a href="https://swift-recipes.doshcook.com/recipes/create-project">Create a project, Application development using XIB.</a></li>
<li><a href="https://swift-recipes.doshcook.com/recipes/rswift">Introducing R.swift</a></li>
</ol>
SwiftLint has a lot more to offer. Please see <a href="https://github.com/realm/SwiftLint">GitHub</a> for more information.

Install SwiftLint to make your iOS project code clean and unified. This will be essential to maintain the quality of your code.

Introducing SwiftLint

<code>R.swift</code> is very useful for development with <code>xib</code>, so please install it. 
It will be used in many of the recipes on this site.
<h2>About R.swift</h2>
<code>R.swift</code> is a library that makes resource management easier. By typing resources, there is no need to hardcode strings, and autocomplete functions can be used.
<a href="https://github.com/mac-cain13/R.swift">mac-cain13/R.swift: Strong typed, autocompleted resources like images, fonts and segues in Swift projects</a>
Without R.swift
<pre><code class="hljs language-swift">// Register Cell
collectionView.register(CustomCollectionViewCell.self, forCellWithReuseIdentifier: "cell")

// Reuse Cell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)

// Create ViewController
let viewController = ViewController(nibName: "ViewController", bundle: nil)</code></pre>
Using R.swift
<pre><code class="hljs language-swift">// Register Cell
collectionView.register(R.nib.customCollectionViewCell)

// Reuse Cell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: R.reuseIdentifier.customCollectionViewCell, for: indexPath)!

// Create ViewController
let viewController = ViewController(nib: R.nib.viewController)</code></pre>
<h3>Install with Mint</h3>
In this article, I will show you how to install <code>R.swift</code> using <code>Mint</code>. For other methods, please check <a href="https://github.com/mac-cain13/R.swift">README.md</a>.
<a href="https://github.com/yonaskolb/Mint">Mint</a> is package manager that installs and runs Swift command line tool packages.
<details><summary>Installing Mint</summary>
<pre><code class="hljs language-bash">// Install Mint
$ brew install mint
// Check Version
$ mint version</code></pre>
</details>
<ol>
<li>
Installing 
Create a <code>Mintfile</code> in the root of your project.
<pre><code class="hljs language-bash">cd ProjectName
touch Mintfile</code></pre>
<pre><code>.
├─ ProjectName.xcodeproj
├─ ProjectName
└─ Mintfile
</code></pre>
Write the following in your <code>Mintfile</code>.
<pre><code>mac-cain13/R.swift

// With version specified
mac-cain13/R.swift@v5.3.1
</code></pre>
Do a <code>mint bootstrap</code> where the <code>Mintfile</code> is located.
<pre><code class="hljs language-bash">mint bootstrap</code></pre>
</li>
<li>
Add a Run Script
Open your project in Xcode, open <code>TARGETS</code> > <code>BuidPhases</code>, and select <code>New Run Script Phase</code> from the + button.（Fregure 1） 
<img src="/assets/rswift/images/figure1.png" alt="Figure 1"> 
Figure 1
Add the following Script.(Figure 2）
<pre><code class="hljs language-shell">if mint list | grep -q 'R.swift'; then
mint run R.swift rswift generate "$SRCROOT/ProjectName/Scripts/R.generated.swift"
else
echo "error: R.swift not installed; run 'mint bootstrap' to install"
return -1
fi</code></pre>
<code>Input Files</code>
<pre><code>$TEMP_DIR/rswift-lastrun
</code></pre>
<code>Output Files</code>
<pre><code>$SRCROOT/ProjectName/Scripts/R.generated.swift
</code></pre>
Add <code>Input Files</code> and <code>Output Files</code> respectively. (Figure 2)
<img src="/assets/rswift/images/figure2.png" alt="Figure 2"> 
Figure 2
Finally, bring it in front of <code>Compile Sources</code> (Figure 3) and build it.
<img src="/assets/rswift/images/figure3.png" alt="Figure 3"> 
Figure 3
Be sure to move the scripts after Compile Sources, as placing them there may cause errors.
</li>
<li>
Add R.generated.swift to the project
After building the file as described in step 2, <code>R.generated.swift</code> will be generated in the location specified in <code>Output Files</code>, so add it to Xcode. (Figure 4)
<img src="/assets/rswift/images/figure4.png" alt="Figure 4"> 
Figure 4
When adding, uncheck <code>Copy If Needed</code>. (Figure 5) 
![Figure 5](/assets/rswift/images/figure5.png 
Figure 5
</li>
<li>
Installing R.swift.Library with Swift Package Manager 
To actually use the generated <code>R.generated.swift</code>, we will install <code>R.swift</code>.
<a href="https://github.com/mac-cain13/R.swift.Library">mac-cain13/R.swift.Library: Library containing types used by the R.swift project</a>
Select <code>File</code> > <code>Swift Packages</code> > <code>Add Package Dependency</code> from the Xcode navigation bar. (Figure 6)
<img src="/assets/rswift/images/figure6.png" alt="Figure 6"> 
Figure 6
Enter <code>https://github.com/mac-cain13/R.swift.Library</code> in the <code>Enter package repositry URL</code> field. (Figure 7)
<img src="/assets/rswift/images/figure7.png" alt="Figure 7"> 
Figure 7
For <code>Version Rules</code>, I specified <code>Update Next Minor</code>. (Figure 8)
<img src="/assets/rswift/images/figure8.png" alt="Figure 8"> 
Figure 8
Select only <code>R.swift</code> to complete. (Figure 9)
<img src="/assets/rswift/images/figure9.png" alt="Figure 9"> 
Figure 9
</li>
</ol>
Now you can install R.swift.
<h2>Ignore R.generated.swift in .gitignore</h2>
The file <code>R.generated.swift</code> is generated automatically. This file should be removed from Git's control.
Add this to <code>.gitignore</code>.
<pre><code class="hljs language-text">R.generated.swift</code></pre>
If it has already been managed, delete the cache and remove it from the repository.
<pre><code class="hljs language-bash">git rm --cached `git ls-files --full-name -i --exclude-standard`</code></pre>

How to introduce R.swift to make resources easier to handle when developing iOS applications.

Introducing R.swift

Let's place a UILabel on the XIB and display "Hello Wolrd!"
<h2>Introduction</h2>
Project creation is based on the following. 
<a href="https://swift-recipes.doshcook.com/recipes/create-project">Create a project, Application development using XIB.</a>
<h2>Sample</h2>
Here is a sample.👉<a href="https://github.com/DoshCook/SwiftRecipesSample/pull/7">DoshCook/SwiftRecipesSample</a>
<h2>Placement in XIB</h2>
First, let's place the label on the XIB.
<ol>
<li>
Open the .xib file of the screen you want to place and select the + button (Figure 1).
<img src="/assets/basic-xib/images/figure1.png" alt="Figure 1"> 
Figure 1
</li>
<li>
Select the UILabel and drag and drop it onto the screen. (Figure 2 -> Figure 3)
<img src="/assets/basic-xib/images/figure2.png" alt="Figure 2"> 
Figure 2 
<img src="/assets/basic-xib/images/figure3.png" alt="Figure 3"> 
Figure 3
</li>
<li>
Set the AutoLayout setting.
Use AutoLayout to specify the location of the label. This time we will place it in the center of the screen. 
With the label you want to layout selected, select the <code>Align</code> icon at the bottom of the screen.
Check the <code>Horizontally in Container</code> and <code>Vertically in Container</code> boxes and select <code>Add Constraints</code>. (Figure 4)
<img src="/assets/basic-xib/images/figure4.png" alt="Figure 4"> 
Figure 4
 <details><summary>How to check the AutoLayout that is currently attached</summary>
 To check the AutoLayout you have attached, select the line on the screen, or go to `Constraints` in the hierarchy.
<img src="/assets/basic-xib/images/tips1.png" alt="Tips1">
 </details>
</li>
<li>
Let's change the label text to "Hello World!".
Select the <code>Show the Attributes inspector</code> icon on the right side of the screen and change the text of the label.
<img src="/assets/basic-xib/images/figure5.png" alt="Figure 5"> 
Figure 5
</li>
</ol>
Now that the labels are in place. 
Let's run it and check it out.
<img src="/assets/basic-xib/images/figure6.png" alt="Figure 6"> 
Figure 6
<h2>Connect to code</h2>
Next, let's tie the UILabel placed in xib to the code. In this case, we'll name it <code>titleLabel</code>.
<ol>
<li>
Select <code>Add Editor on Right</code>. (Figure 7)
<img src="/assets/basic-xib/images/figure7.png" alt="Figure 7"> 
Figure 7
Since the screen will be split, let's display the code on one side since it will be split (Figure 8).
<img src="/assets/basic-xib/images/figure8.png" alt="Figure 8"> 
Figure 8
 <details><summary>How to open a file in split-screen mode.</summary>
 When the screen is split, the file will be opened on the screen that has the focus.
 If you want to place it on the right side of the screen, click on the right side and then select the file you want to open.
You can also hold down <code>option</code> while selecting to open the file on the other side of the focused screen.
 </details>
</li>
<li>
While holding down the Control button, drag from the label to be connected to the cord. (Figure 9)
<img src="/assets/basic-xib/images/figure9.png" alt="Figure 9"> 
Figure 9
</li>
<li>
Give it a name and select <code>connect</code>. (Figure 10)
<img src="/assets/basic-xib/images/figure10.png" alt="Figure 10"> 
Figure 10
</li>
</ol>
This completes the connection with the code.
<details><summary>Wrong name! To reconfigure</summary>
If you have made a mistake in the name of the label, you will need to reconfigure it.
If you change only the name of the code directly, you will get the following error, and it will crash.
<blockquote>
*** Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[&#x3C;SwiftRecipesSample.BasicLabelViewController 0x7fe755a09160> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key titleLabel.' 
terminating with uncaught exception of type NSException
</blockquote>
In such a case, it is necessary to unlink them on XIB. 
Open the .xib file, select <code>File's Owner</code>, press the <code>Show the Connections inspector</code> icon on the right side, and press X to remove the Outlets ⚠️. 
<img src="/assets/basic-xib/images/tips2.png" alt="Tips2">
Then, please follow the above steps again to connect.
It can also be connected by pulling from the code side. (From the figure below). 
<img src="/assets/basic-xib/images/tips3.png" alt="Tips3">
</details>
<h2>Let's set up multiple labels.</h2>
Let's place the second label. The next label will be named <code>descriptionLabel</code>. This will be placed 8px below the <code>titleLabel</code>.
<ol>
<li>
Place to XIB
Follow the same steps as the first one to place it in the XIB. Drag and drop it roughly where you want to place it. (Figure 11)
<img src="/assets/basic-xib/images/figure11.png" alt="Figure 11"> 
Figure 11
</li>
<li>
Add a vertical constraint.
Next, press the <code>Add New Constraints</code> icon at the bottom of the screen to configure the AutoLayout settings. Since we want to place it 8px below the <code>titleLabel</code>, we will add the upper constraint as shown in Figure 12.
<img src="/assets/basic-xib/images/figure12.png" alt="Figure 12"> 
Figure 12
When adding constraints, make sure you select the target view.(Figure 13)
<img src="/assets/basic-xib/images/figure13.png" alt="Figure 13"> 
Figure 13
</li>
<li>
Add a horizontal constraint.
Finally, let's add a horizontal constraint. 
You can set the margins on the left and right sides of the screen in Figure 12, but this time we will specify the center of the screen.
Check the <code>Horizontally in Continer</code> checkbox from the <code>Align</code> icon. (Figure 14)
<img src="/assets/basic-xib/images/figure14.png" alt="Figure 14"> 
Figure 14
</li>
</ol>
This completes the placement of the second label. 
If you don't need to configure on the code, you don't need to connect it.
<h2>Adjusting the layout</h2>
First, let's increase the font size of the <code>titleLabel</code>.
Select "Hello World" on the XIB, and change the font from the <code>Show the Attributes inspector</code> icon. (Figure 15)
<img src="/assets/basic-xib/images/figure15.png" alt="Figure 15"> 
Figure 15
We also changed the text of the <code>descriptionLabel</code> to "Have fun with Swift!".
Finally, let's shift it slightly upward from the center of the screen. Select the horizontal line of the <code>titleLabel</code> and change the <code>Constant</code> from the <code>Show the Attributes inspector</code> icon on the right of the screen. (Figure 16)
<img src="/assets/basic-xib/images/figure16.png" alt="Figure 16"> 
Figure 16
<h2>Connect multiple labels as an array</h2>
When connecting to the code, you can also put multiple labels together into an array.
<ol>
<li>
Prepare an array with <code>IBOutlet</code> in the code as shown below.
<pre><code class="hljs language-swift">@IBOutlet private var labels: [UILabel] = []</code></pre>
</li>
<li>
Connect it to the label you want to put in the array. (Figure 17)
<img src="/assets/basic-xib/images/figure17.png" alt="Figure 17"> 
Figure 17
</li>
<li>
Check it is added to the <code>Outlet Collections</code> of XIB. (Figure 18)
<img src="/assets/basic-xib/images/figure18.png" alt="Figure 18"> 
Figure 18
</li>
<li>
Let's change the color of the labels together in the code.
Use forEach to change the color of the labels all at once.
<pre><code class="hljs language-swift">@IBOutlet private var labels: [UILabel] = []

override func viewDidLoad() {
 super.viewDidLoad()
 
 // Change the color of labels at once.
 labels.forEach {
 $0.textColor = .systemBlue
 }
}</code></pre>
</li>
</ol>
This completes the purpose of this recipe.
<h2>Conclusion</h2>
These are the basics of how to place components using XIB. 
If you use Storyboard, you can use Interface Builder to connect to the code in the same way.
The usage for each component will be added in the future.

How to use XIB. let's set up a UILabel to display HelloWorld, and learn the basics of Interface Builder and how to connect it to your code.

Swift Recipes