UIButtonをカスタマイズして汎用的に利用できるようにする

こんにちは、Yukiです。

アプリ開発未経験者がiOSアプリを作成するシリーズのUIkitのカスタマイズ編です。

なぜiOSアプリを開発することになったかは最初の記事で↓

アプリ開発未経験者が社長の一言でiOSアプリを開発することになった

今回はUIButtonをカスタマイズして汎用的に利用できるようにしてみたのでその時のことを書きます。

目次です。

• はじめに
• UIButtonのカスタムクラスの基本コード
• UIButtonのカスタマイズ方法
• UIButtonの色々なデザインのカスタマイズ方法

はじめに

……………………………………

例えばiOSアプリの開発で、Buttonを画面に配置したい時はstoryboard上にButton（UIButton）を配置して、右のバーのAttributes Inspectorからボタンのデザインを変えるという方法がありますよね。

この方法だと同じデザインのボタンが欲しい時はまた同じフローで作らないといけないので少し厄介です。

そこで今回はUIButtonのカスタムクラスを作成して汎用的に使えるようにしたいと思います。

ちなみにxibを使えばGUIでデザインしてカスタムクラスを作成することができますが、今回はコードでデザインをカスタマイズしていきます。

UIButtonのカスタムクラス1つにつき、swiftファイル1つという構成にし、デザインの確認のためxibファイルを使用するという形にします。

UIButtonのカスタマイズの基本コード

……………………………………

UIButtonのカスタムクラスの基本コードは以下のようになります。

import UIKit
@IBDesignable
class CustomButton: UIButton {
  override init(frame: CGRect) {
    super.init(frame: frame)
    customDesign()
  }
  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    customDesign()
  }
  
  override func prepareForInterfaceBuilder() {
    super.prepareForInterfaceBuilder()
    customDesign()
  }
  
  private func customDesign() {
    // デザインのカスタマイズ内容
  }
}

UIKitからカスタムクラスを作成するときはinitやprepareForInterfaceBuilderの設定が必要になります。

説明すると長くなるので今回はcustomDesign()内でデザインをカスタムして、それぞれのinit()とprepareForInterfaceBuilder()内で呼び出す、という風に考えておいてください。

今回のcustomDesign()内で使用するデザインの各要素の変更方法です。

// ボタンのマスク適用
layer.masksToBounds = true
// ボタンの角丸のサイズ
layer.cornerRadius = 15.0
// ボタンの枠線の色
layer.borderColor = UIColor(displayP3Red: 79/255, green: 172/255, blue: 254/255,alpha: 1.0).cgColor
// ボタンの枠線の太さ
layer.borderWidth = 2
// ボタンの余白（Padding）
contentEdgeInsets = UIEdgeInsets(top: 10, left: 15, bottom: 10, right: 15)
// ボタンの背景色
backgroundColor = UIColor.white
// ボタンのテキスト色
setTitleColor(UIColor(displayP3Red: 79/255, green: 172/255, blue: 254/255,alpha: 1.0), for: .normal)
// ボタンのテキストサイズ
titleLabel?.font = UIFont.boldSystemFont(ofSize: 14.0)

UIButtonのカスタマイズ方法

……………………………………

上記のような基本的なポジティブボタンを作成してみます。

まずはMain.storyboardと同じ階層に新しいファイル（swift）を作成します。

今回はファィル名をPositiveSimpleButton.swiftとします。

先ほどのUIButtonのカスタムクラスの基本コードをコピペし、クラス名をPositiveSimpleButtonとしておきます。

// PositiveSimpleButton.swift
import Foundation
import UIKit
@IBDesignable
class PositiveSimpleButton: UIButton {
override init(frame: CGRect) {
    super.init(frame: frame)
    customDesign()
  }
required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    customDesign()
  }
  
  override func prepareForInterfaceBuilder() {
    super.prepareForInterfaceBuilder()
    customDesign()
  }
  
  private func customDesign() {
    // まだ
  }
}

次にデザインの変更内容をcustomDesign()に書いていきます。

• 背景： rgb(79, 172, 254)
• 文字色：white
• 文字サイズ：14
• 余白：縦10,横15
• 角丸：15

これをコードにすると…

backgroundColor = UIColor(displayP3Red: 79/255, green: 172/255, blue: 254/255,alpha: 1.0)
setTitleColor(.white, for: .normal)
titleLabel?.font = UIFont.boldSystemFont(ofSize: 14.0)
contentEdgeInsets = UIEdgeInsets(top: 10, left: 15, bottom: 10, right: 15)
layer.cornerRadius = 15.0

コードを見ればなんとなく書き方は分かると思うので、UIColorだけ説明しておきます。

UIColorについて

色を指定するときは基本的にUIColorを使います。

白や黒などデフォルトで定義されている色以外を使用する際は

rgbの値をそれぞれ255で割ってdisplayP3Red, green, blueの引数に追加します。

※alphaの指定がない時は1.0を代入してください。

デフォルトの色を使うときはUIColor.white（UIColorは省略可）のように使います。

コード全体は以下のようになります。

// PositiveSimpleButton.swift
import Foundation
import UIKit
@IBDesignable
class PositiveSimpleButton: UIButton {
override init(frame: CGRect) {
    super.init(frame: frame)
    customDesign()
  }
required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    customDesign()
  }
  
  override func prepareForInterfaceBuilder() {
    super.prepareForInterfaceBuilder()
    customDesign()
  }
  
  private func customDesign() {
    backgroundColor = UIColor(displayP3Red: 79/255, green: 172/255,     blue: 254/255,alpha: 1.0)
    setTitleColor(.white, for: .normal)
    titleLabel?.font = UIFont.boldSystemFont(ofSize: 14.0)
    contentEdgeInsets = UIEdgeInsets(top: 10, left: 15, bottom: 10, right: 15)
    layer.cornerRadius = 15.0
  }
}

次にデザイン確認のためMain.storyboardと同じ階層に新しいファイル（xib）を作成します。

ファィル名をPositiveSimpleButton.xibとします。

ViewにButtonオブジェクトを追加して、右のバーのAttributes InspectorのCustom ClassのClassにPositiveSimpleButtonと入力します。

しばらくするとViewのボタンがカスタムしたデザインに変更されます。

Main.stroryboardでも同じように使用することが可能です。

以上が汎用的に使用できるカスタムボタン作成方法の流れでした。

次にカスタムデザインの例をいくつか紹介します。

UIButtonの色々なデザインのカスタマイズ方法

……………………………………

コードはcustomDesign()の中に書くデザインの変更内容の部分だけ紹介するので、書き換えてみてください。

ネガティブボタン

backgroundColor = UIColor.white
setTitleColor( UIColor(displayP3Red: 79/255, green: 172/255, blue: 254/255,alpha: 1.0), for: .normal)
titleLabel?.font = UIFont.boldSystemFont(ofSize: 14.0)
contentEdgeInsets = UIEdgeInsets(top: 10, left: 15, bottom: 10, right: 15)
layer.cornerRadius = 15.0
layer.borderColor =  UIColor(displayP3Red: 79/255, green: 172/255, blue: 254/255,alpha: 1.0).cgColor
layer.borderWidth = 2

影付きボタン

backgroundColor = UIColor(displayP3Red: 79/255, green: 172/255, blue: 254/255,alpha: 1.0)
setTitleColor(.white, for: .normal)
titleLabel?.font = UIFont.boldSystemFont(ofSize: 14.0)
contentEdgeInsets = UIEdgeInsets(top: 10, left: 15, bottom: 10, right: 15)
layer.cornerRadius = 15.0
layer.shadowColor = UIColor(displayP3Red: 0.0, green: 0.0, blue: 0.0, alpha: 0.6).cgColor
layer.shadowOffset = CGSize(width: 3, height: 3)
layer.shadowOpacity = 0.3
layer.shadowRadius = 5

グラデーションボタン

setTitleColor(.white, for: .normal)
titleLabel?.font = UIFont.boldSystemFont(ofSize: 14.0)
contentEdgeInsets = UIEdgeInsets(top: 10, left: 15, bottom: 10, right: 15)
layer.cornerRadius = 15.0
layer.masksToBounds = true;
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds;
gradientLayer.colors = [UIColor(displayP3Red: 0/255, green: 172/255, blue: 254/255,alpha: 1.0).cgColor, UIColor(displayP3Red: 79/255, green: 242/255, blue: 254/255,alpha: 1.0).cgColor]
layer.insertSublayer(gradientLayer, at:0)

以上がUIButtonのカスタムクラス作成方法です。

もしつまづいたらTwitterのDMからメッセージください。

わかる範囲でお答えいたします！

monkeyy