view同士の描画順の入れ替えが上手くいかない

Question

###前提・実現したいこと

300×300のマップビューの上に
100×100のビューを表示しております。

ここで、
100×100のビューをタップしたら、
300×300にビューの大きさを変更し、
マップビューを
100×100の大きさにして、
ビューとマップビューの前後を変更(マップビューをビューの上に描画)したいのですが、
100×100のビューをタップすると、ビューが消えてしまい、マップビューの大きさも変わりません。

この状態から、マップビューを300×300の状態をタップすると100×100のビューが表示されます(おそらくきちんと動作している)。

実現したいことは、ビューとマップビューの小さい方をタップすると、タップされた方を拡大して後ろ側に、されていない方が小さくなって前面に来る。ということを実現したいです。

###発生している問題・エラーメッセージ

bringSubviewToFrontとsendSubviewToBackが上手く機能しない

###該当のソースコード

    @IBOutlet weak var parentView: UIView!        // 親
    @IBOutlet weak var mapView : MKMapView!  // マップ
    @IBOutlet weak var childView : UIView!         // ビュー

    /// 画面表示直前に呼ばれる
    override func viewWillAppear(animated : Bool) {
        super.viewWillAppear(animated)
        
        // 親ビューの子供に設定
        self.parentView.addSubview(self.mapView)
        self.parentView.addSubview(self.childView)
    }

    // マップビュー拡大(正しく動いている？)
    @IBAction func ChangeMapView(sender: AnyObject) {
        self.mapView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
        self.childView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
        self.parentView.sendSubviewToBack(self.mapView)
        self.parentView.bringSubviewToFront(self.childView)
    }
    
    // ビュー拡大(ビューが消える)
    @IBAction func ChangeChildView(sender: AnyObject) {
        self.childView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
        self.mapView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
        self.parentView.sendSubviewToBack(self.childView)
        self.parentView.bringSubviewToFront(self.mapView)
    }

###試したこと
大きさがかぶっているため表示されないのかと思い、ビューの大きさを変更して400×400等にしたが、表示がされない。

parentViewを使用せず、最初からあるself.viewにmapViewとchildViewをaddChildしてみたりしたが、挙動に変更がありませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
swift2.3
Xcode7.3.1

アドバイスを受け修正したコードになります。

@IBAction func ChangeMapView(sender: AnyObject) {
    self.mapView.frame = CGRect(x: 100, y: 1, width: 400, height: 400)
    self.childView.frame = CGRect(x: 1, y: 1, width: 200, height: 200)
    self.parentView.bringSubviewToFront(self.childView)
}

@IBAction func ChangeChildView(sender: AnyObject) {
    self.childView.frame = CGRect(x: 1, y: 1, width: 400, height: 400)
    self.mapView.frame = CGRect(x: 1, y: 1, width: 200, height: 200)
    self.parentView.bringSubviewToFront(self.mapView)
}

###解決したコード

// 親のビュー
@IBOutlet weak var parentView: UIView!
    
// 描画順を変更したいビュー
var mapView   : MKMapView! = MKMapView()
var childView  : UIView!          = UIView()

    
override func viewWillAppear(animated : Bool) {
        super.viewWillAppear(animated)
        
        // サブビューに追加
        parentView.addSubview(self.mapView)
        parentView.addSubview(self.childView)
        
        // 大きさの初期値
        self.mapView.frame = CGRect(x: 0,y: 0,width: 100,height: 100)
        self.childView.frame = CGRect(x: 110,y: 0,width: 100,height: 100)
        
        // タップできるようにする
        self.mapView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(ChangeMapView)))
        self.childView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(ChangeChildView)))
}

// childViewを縮小して前面に
func ChangeMapView(sender: AnyObject) {
        self.mapView.frame   = CGRect(x: 100, y: 1, width: 400, height: 400)
        self.childView.frame = CGRect(x: 1, y: 1, width: 200, height: 200)
        self.parentView.bringSubviewToFront(self.childView)
}

// mapViewを縮小して前面に
func ChangeChildView(sender: AnyObject) {
        self.childView.frame = CGRect(x: 1, y: 1, width: 400, height: 400)
        self.mapView.frame   = CGRect(x: 1, y: 1, width: 200, height: 200)
        self.parentView.bringSubviewToFront(self.mapView)
}

Comments

[fuzzball]

(deleted)

Answer 1

// 親ビューの子供に設定
self.parentView.addSubview(self.mapView)
self.parentView.addSubview(self.childView)

Storyboardで配置しているのですから、このコードは必要ないのでは？
画面に見えているのはコードで追加したViewで、タップした時にサイズ/優先を変更しているのはStoryboardで配置したViewになっていると思います。

おまけ

上に来るViewを最前面に表示させればいいのでself.view.sendSubviewToBack()は不要です。

おまけ2

タップ時はフラグを変更してレイアウト更新を依頼する。
実際のレイアウト変更はviewDidLayoutSubviews()で行う。

この方法だと、Storyboardを使っていても大丈夫だと思います。

var isMap = true

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    if isMap {
        //childを縮小して上に、mapは拡大
    } else {
        //mapを縮小して上に、childは拡大
    }
}

@IBAction func ChangeMapView(sender: AnyObject) {
    isMap = true
    self.view.setNeedsLayout()
}
    
@IBAction func ChangeChildView(sender: AnyObject) {
    isMap = false
    self.view.setNeedsLayout()
}

Comments

[_utah]

返信が遅れて申し訳ありません。

動作確認のため、ビューとマップをそれぞれ100×100の値に設定し、横に並べたものを初期表示としました。

上記を参考に以下のように書き換えてみたところ、
初期表示→マップタップでマップを後ろに、ビューを前に　◯
初期表示→ビュータップでビューを後ろに、マップを前に　◯
はできたのですが、
初期位置ではない状態(ボタンをタップしサイズ/優先が変更された)でいずれかをタップをすると、初期表示に戻ってしまいます。

原因わかりますでしょうか。

[_utah]

以下変更したコードです

※追記欄にコードを移動させました。

[fuzzball]

おそらく、Viewのサイズを変更してレイアウトが更新されるときにStoryboardの状態に戻っているんだと思います。Storyboardでの配置をやめて、コードで生成＆配置すればいいのですが、今のままStoryboardを使った方がいいですか？ ※コードはここではなく質問内に書いて下さい。

[_utah]

ストーリーボードでの配置ではなく、コードで配置して試してみます。

ストーリーボードで行っていた理由としては、元々ストーリーボードで行っていたものに処理を追加していたということだけですので、ストーリーボードにこだわっているということはありません。

※コードはここではなく質問内に書いて下さい。
→承知いたしました。追記という形で書かせていただきます。

[_utah]

コードで配置してみたところ、きちんと動作致しました。

ご教授ありがとうございます。

コードを綺麗にして、追記しておきます。

[fuzzball]

入れ違いになっちゃいましたが、おまけ2を書きましたので参考にして下さい。

[_utah]

ありがとうございます。

ストーリーボードをどうしても使用しなければいけないことが発生した場合、参考にさせていただきます。