2023/9/21

【Swift/iOS】Xibファイルとは？Storyboardとの違いと使い方

この記事からわかること

iOSアプリ開発について
Xibファイルの役割
Storyboardとの違い

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：14.3.1
iOS：16.4
Swift：5.8.1

Xibファイルとは？

iOSアプリ開発で使用するXibファイルとはXML Interface Builderの略称であり、iOSアプリ開発において画面を構築するために使用されるXML形式のファイルです。拡張子は.xibになっていますが、中に記述されるコードはXMLになります。開発者はXMLコードをいじることなくGUI操作のみで画面のレイアウトやデザインを構築することができます。中身はこんな感じ↓

ViewController.xib
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="21701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina6_12" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21679"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="System colors in document resources" minToolsVersion="11.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="TestViewController" customModule="TestFirebase" customModuleProvider="target">
            <connections>
                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
            </connections>
        </placeholder>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
            <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Xibファイル" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Nxw-WK-ErW">
                    <rect key="frame" x="149" y="415.66666666666669" width="95" height="21"/>
                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
                    <nil key="textColor"/>
                    <nil key="highlightedColor"/>
                </label>
                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="eKl-Yx-BCq">
                    <rect key="frame" x="159" y="456.66666666666669" width="75" height="35"/>
                    <state key="normal" title="Button"/>
                    <buttonConfiguration key="configuration" style="plain" title="Button"/>
                </button>
            </subviews>
            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
            <color key="backgroundColor" systemColor="systemBackgroundColor"/>
            <constraints>
                <constraint firstItem="eKl-Yx-BCq" firstAttribute="top" secondItem="Nxw-WK-ErW" secondAttribute="bottom" constant="20" id="Fiz-GV-gP3"/>
                <constraint firstItem="Nxw-WK-ErW" firstAttribute="centerY" secondItem="i5M-Pr-FkT" secondAttribute="centerY" id="W0b-cv-ZbW"/>
                <constraint firstItem="eKl-Yx-BCq" firstAttribute="centerX" secondItem="i5M-Pr-FkT" secondAttribute="centerX" id="Yx9-UB-mjs"/>
                <constraint firstItem="Nxw-WK-ErW" firstAttribute="centerX" secondItem="i5M-Pr-FkT" secondAttribute="centerX" id="iES-xJ-Xyu"/>
            </constraints>
            <point key="canvasLocation" x="-97" y="20"/>
        </view>
    </objects>
    <resources>
        <systemColor name="systemBackgroundColor">
            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor>
    </resources>
</document>

Storyboardが登場してからXibファイルが使用される機会は少なくなり、さらにSwift UIが登場してロジックと画面とが並行して開発できるようになったことでStoryboard自体の使用頻度も減少してきています。

それでも長い期間開発しているアプリや状況に応じてStoryboardやXibを使用したプロジェクトがあるので役割や使い分けを整理しておきます。