技術ブログ

プログラミング、IT関連の記事中心

画像ボタンのタップ領域を増やす方法【Swift】

■はじめに

「デザインでは、小さいボタンがいいけど、タップし辛い!」ということがあります。

その際に、ボタンのタップ領域を増やしたいので、ここではその方法を記載します。

ちなみに、「setImage」関数を使用して画像を設定したボタンを前提にしています。

■手順

まずは、ソースコードの全量です。

let btn = UIButton()
btn.frame = CGRect(x: 0, y: 0, width: 60, height: 30)
btn.setImage(UIImage(named: "画像名"), for: .normal)
btn.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 45)
self.view.addSubview(btn)

■解説

以下のソースで、ボタンのサイズを指定します。

このときに、幅と高さは「画像サイズ + 余白サイズ」で計算してください。(今回は画像の右に余白をつける想定です。)

btn.frame = CGRect(x: 0, y: 0, width: 60, height: 30)

以下のソースで、ボタンの画像の右に余白を設定します。

先ほどの「画像サイズ + 余白サイズ」で、右に「45」の余白を設定したので、画像のサイズとしては、「W:15, H:30」となります。

btn.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 45)