Edited at

ボタンのタップ領域を拡張する

More than 1 year has passed since last update.


はじめに

Try Swift2018の「関心の分離と単純化のためのSwiftコードの最適化」のセッションの中で紹介されていた内容を共有します。

例えば、デザイナーさんからHIGを無視した小さなボタンのデザインが来たが、デザインを変えずに、ボタンのタップ領域のみ拡張する例です。


例1

個別にタップ領域を拡張する。

button.frame = CGRect(origin: .zero, size: CGSize(width: 44, height: 44))


例2

hitTestメソッドをオーバーライドしてタップ領域を拡張する。

使い方をUIButtonをMinimunHitAreaButtonに変更する。

import UIKit

final class MinimunHitAreaButton: UIButton {

let mimimumHitAreaWidth = 44
let mimimumHItAreaHeight = 44

override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
guard !isHidden && isEnabled && isUserInteractionEnabled && alpha >= 0.01 else {
return nil
}

let lengthOfTappableAreaOutside: CGFloat = 10.0
let mimimumHitAreaSize = CGSize(width: mimimumHitAreaWidth, height: mimimumHItAreaHeight)

// hitFrameをmimimumHitAreaSizeに変更する
let buttonSize = bounds.size
let widthToAdd = max(mimimumHitAreaSize.width - buttonSize.width, lengthOfTappableAreaOutside * 2)
let heightToAdd = max(mimimumHitAreaSize.height - buttonSize.height, lengthOfTappableAreaOutside * 2)
let largerFrame = bounds.insetBy(dx: -widthToAdd / 2, dy: -heightToAdd / 2)

// 大きいフレームでhitTestを実行する
let hit = largerFrame.contains(point)
return hit ? self :nil
}
}


まとめ

やり方は、他にも色々ありますが、今回紹介された方法をご紹介しました。

参考になればと思います。