Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

12
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-03-10

はじめに

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

まとめ

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

12
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

12
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?