Help us understand the problem. What is going on with this article?

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

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
    }
}

まとめ

やり方は、他にも色々ありますが、今回紹介された方法をご紹介しました。
参考になればと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away