2023/9/21

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

この記事からわかること

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

index

[open]

Xibファイルとは？
Storyboardとの違い
Xibファイルの生成方法

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

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

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>