19
13

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.

UIButtonの上にUIViewを載せた時、ボタンが反応しなくなる問題の解決法

Last updated at Posted at 2016-12-02

UIViewを上に重ねると下のUIButtonが押せなくなって困っておりました。

ちょっとややこしい状況なので、図で説明します。
2016_12_2.png

2つ目のUIButtonがないのであれば、上に載せたUIViewの
スクリーンショット_2016-12-02_15_30_37.png

しかし上にあるUIButtonも押せるようにしつつも、下のボタンも押せるようにする場合はこれではダメ。上のボタンが押せなくなる。

しかし案外簡単な方法で解決できることを
こちらのサイト
で教えてもらいました。

こういうのってタッチイベントの透過って表現するんですね。知らなかった。


(なんとか解決できたけど、storyboardで思い通りにならない部分があってごちゃごちゃしてしまいました。ごめんなさい)

###先ずはハマってた状況を再現。storyboard上にボタンを載せます
スクリーンショット 2016-12-02 13.11.17.png
このままビルドした場合はもちろんボタンはタッチできます(ピコピコします)。

###しかしこうするとボタンが反応しなくなります。
スクリーンショット 2016-12-02 13.12.32.png

(ボタンの上にUIViewを載せてボタンが見えるようにalpha(透明度)を0.3にしました)
スクリーンショット_2016-12-02_13_55_28.png

そして上のUIViewにボタンを載せます。これも押せるようにしたい。
スクリーンショット_2016-12-02_15_36_35.png

##ここからが解決策
xcodeのメニューからFile->New->File...を選んでUIViewを継承したクラスを作ります
スクリーンショット 2016-12-02 13.40.51.png

スクリーンショット 2016-12-02 13.42.33.png (ちょっとファイル名が長いですけど、わかりやすさを優先しました。気にしないでください)

###作ったファイルの中にはこんなコードを書きました
スクリーンショット 2016-12-02 16.13.33.png

import UIKit

class TouchEventThroughView: UIView {

    // 上に載せたボタンのCGRect
    var rect_topButton : CGRect?
    
    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        
        // 上のボタンの位置だったら透過させない
        if (rect_topButton!.contains(point)) {
            return true
        }
        
        // それ以外は透過させる
        return false
    }
}

###storyboardに「このUIViewはこのカスタムクラスですよ」と教えます
スクリーンショット_2016-12-02_13_15_33.png

###上のボタンのRectがカスタムクラス内で必要なので、ViewControllerに紐付けして、
(本当はボタンをTouchEventThroughViewのプロパティにしたかったのですが、なぜかctrlドラッグできなかったので仕方なく。。)
スクリーンショット_2016-12-02_16_15_49.png

###ボタンのRectを伝えるコードをViewControllerに書きます

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var touchEventThroughView: TouchEventThroughView!
    @IBOutlet weak var topButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        touchEventThroughView.rect_topButton = topButton.frame
    }
}

###ビルドしてみると、両方のボタンが押せるようになりました!

しかし、どうしてstoryboardでTouchEventThroughViewへのctrlドラッグができなかったのだろう?

おかげでちょっとごちゃごちゃしてしまいましたが、一応目的は達成できたので、とりあえずOK。

19
13
4

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
19
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?