iOSアプリでビューの上下にボーダー（境界線）を追加する方法【Swift】

この記事では、iOSアプリのビューの上下にボーダー（境界線）を追加する方法を解説します。サンプルとして用意したビューに対して、実際にコードを書きながら上下の境界線を実装していきましょう。

手順1：プロジェクトを作成する

Xcodeを開き、「File」→「New」→「Project」から「Single View Application」を選択して新規プロジェクトを作成します。プロジェクト名は「AddBorderTopAndBottom」としましょう。

手順2：Storyboardにビューを配置する

Main.storyboardを開き、以下の画像のようにUIViewを画面中央に配置します。

手順3：アウトレットを接続する

配置したビューに対して@IBOutletを作成し、「centerView」という名前で接続します。これでコード側からビューを操作できるようになります。

手順4：境界線を追加するメソッドを実装する

次に、ビューにボーダーを追加するための専用メソッドを作成します。仕組みとしては、まず指定した太さを持つ2つのCALayerを生成し、それぞれのフレームをビューの上端と下端に設定します。その後、レイヤーの背景色にボーダーの色を指定し、これらのレイヤーをビューのサブレイヤーとして追加します。

以下のように「addTopAndBottomBorders」という関数を作成し、次のコードを記述してください。

func addTopAndBottomBorders() {
   let thickness: CGFloat = 2.0
   let topBorder = CALayer()
   let bottomBorder = CALayer()
   topBorder.frame = CGRect(x: 0.0, y: 0.0, width: self.centerView.frame.size.width, height: thickness)
   topBorder.backgroundColor = UIColor.red.cgColor
   bottomBorder.frame = CGRect(x:0, y: self.centerView.frame.size.height - thickness, width: self.centerView.frame.size.width, height:thickness)
   bottomBorder.backgroundColor = UIColor.red.cgColor
   centerView.layer.addSublayer(topBorder)
   centerView.layer.addSublayer(bottomBorder)
}

このコードでは、レイヤーの太さ（thickness）、位置とサイズ（frame）、色（backgroundColor）をそれぞれ適切に設定し、それらをビューのサブレイヤーとして追加しています。上側のボーダーはy座標を0.0に、下側のボーダーはビューの高さからボーダーの厚みを引いた位置に配置することで、正確に上下の端に表示されるようになっています。

手順5：メソッドを呼び出す

ViewControllerクラスのviewDidAppear内で、作成したaddTopAndBottomBordersメソッドを呼び出します。

override func viewDidAppear(_ animated: Bool) {
   addTopAndBottomBorders()
}

viewDidAppearで呼び出すことで、ビューのレイアウトが確定した後にボーダーが描画され、正しいサイズで表示されます。

手順6：実行して確認する

プロジェクトをビルドして実行すると、中央に配置したビューの上下に赤いボーダーが表示されているのが確認できます。

まとめ

CALayerを使えば、ビューの任意の辺に簡単にボーダーを追加できます。太さや色は定数を変更するだけで自由にカスタマイズできるので、デザインに合わせて調整してみてください。左右のボーダーを追加したい場合も、同じ要領でx座標と幅を変更すれば対応可能です。