質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

UIViewの背景色を透過したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,331

score 283

UIIViewの背景色を透過したい。

https://qiita.com/takehiro224/items/dc5903ae42f288ccd5f7
の記事を参考にメニューを作成しました。
記事内では背景色を Opacity:0.5に設定するように書かれています。
が、Xcode(IDE)のStroyboardにがOpcaityは見当たらなくてAlphaしかありません。
そこの値を0.5にするも画面が真っ黒のままです。

その他にも...

試したこと
・Storyboard側のAplphaの数値を下げてみた
・Storyboard側のUIColorのOpacityの数値を下げてみた
・レイヤーの順番を確認

と試してBuildするも背景色は真っ黒です。
どうやったら背景色を透過できるのでしょうか。。

import UIKit

class MenuViewController: UIViewController {

    @IBOutlet weak var menuView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        // メニュー画面の位置
        let menuPosition = self.menuView.layer.position
        // 初期位置設定
        self.menuView.layer.position.x = -self.menuView.frame.width
        // 表示アニメーション
        UIView.animate(
            withDuration: 0.1,
            delay: 0,
            options: .curveEaseOut,
            animations: {
                self.menuView.layer.position.x = menuPosition.x
        },
            completion: { bool in
        })

    }

    // メニュー外をタップした場合に非表示にする
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesEnded(touches, with: event)
        for touch in touches {
            if touch.view?.tag == 1 {
                UIView.animate(
                    withDuration: 0.2,
                    delay: 0,
                    options: .curveEaseIn,
                    animations: {
                        self.menuView.layer.position.x = -self.menuView.frame.width
                },
                    completion: { bool in
                        self.dismiss(animated: true, completion: nil)
                }
                )
            }
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

}


イメージ説明
イメージ説明
イメージ説明
イメージ説明

// コード①
let blackColor = UIColor.black
let transparentBlackColor = blackColor.setAlpha(alpha: 0.5)

self.view.backgroundColor = transparentBlackColor


コード①だと真っ黒になります。
UIColor.redにすると 赤黒になります。
何の黒色が残っているのかがわかりません。。

実際のコードではPresentationは Full Screenとなっています。
イメージ説明

イメージ説明
Viewには現在 白色をAlpha:1.0で設定しています。
※最初の質問投稿時は黒色にAlpha:0.5でした。

追記
イメージ説明
もとの遷移元の画像

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mskRR

    2020/10/18 17:42

    そちらの環境はわかりませんので回答はできません。
    ご自分でviewControllerを2枚用意し、例えば赤のViewControllerから透明のViewControllerにモーダル遷移するサンプルを作られてはどうでしょうか?それができたら透明なViewControllerに青のViewを載せて遷移して、それができたらNavigationControllerをつけて....一つ一つ検証されてはみては?

    キャンセル

  • sunglass

    2020/10/18 18:00

    はい。
    とりあえず
    1. 赤のViewControllerから透明のViewControllerにモーダル遷移するサンプル作成
    2. 透明なViewControllerに青のViewを載せて遷移
    3. NavigationControllerを追加で実装
    をやって確認してみます。

    キャンセル

  • sunglass

    2020/10/18 20:51 編集

    確認しました!
    原因というか黒色の解決方法はわかりました。。
    (黒色はViewControllerのデフォルトの背景色っぽいです。)

    (実際のアプリの)解決策としては最後のコメントにあった物のを応用しました。
    ベースのViewの背景色を白に設定。
    それを透過。(例:Alpha 0.5)

    このやり方で合っていますでしょうか。

    キャンセル

回答 1

checkベストアンサー

+1

modalPresentationStyle を .fullScreen にしているのであれば、遷移先で表示された View の Opacity をゼロにしたとしても、遷移元の View は見ることができません。

公式ドキュメントを見ればわかりますが、

The views belonging to the presenting view controller are removed after the presentation completes. 

と記述してありますので、.fullscreen の場合は、プレゼンテーション(画面遷移)が完了すると、遷移元の View Controller は View Hierarchy から削除されるようになっています

おそらく、記事が書かれた2年前は View Hierarchy に遷移元が残っていたのだと思いますが、iOS13 対応後、現在の仕様に変わったのだとおもいます。

公式ではありませんが、こういう記事も見つけました。

実際、メニューを表示したあとに View Hierarchy を見てみると(Debug View Hierarchy)

イメージ説明

呼び出し元が View Hierarchy から削除されているのを確かめることができます。

これが原因で、透明度をいくら変更しても遷移元の View Controller が見えていないものと思われます。

解決策はいくつかあるのですが、簡単なのは Presentation を .overFullScreen にすれば解決すると思います(一応、手元の環境だと解決しています)。

StoryBoard だと Segue の設定で

  • Kind -> Present Modally
  • Presentation -> Over Full Screen
  • Transition -> Cross Dissolve

といった感じに設定することになります。

公式ドキュメントをみても

The views beneath the presented content are not removed from the view hierarchy when the presentation finishes. So if the presented view controller does not fill the screen with opaque content, the underlying content shows through.

上記の通り、「画面遷移が終了しても、現在表示しているコンテンツの下にある View は View Hierarchy から削除されない。表示する View Controller が不透明なコンテンツで全画面表示しない場合(訳注:つまり、透明なコンテンツが存在する場合)、配下のコンテンツが見える(ようになっている)」とありますので、これを使うのがいいのではないでしょうか。

ちなみに、.overFullScreen で遷移先を全画面表示させた場合でも、View Hierarchy をみると呼び出し元の View Controller が残っているのが確認できます。

イメージ説明

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/10/19 02:04

    すごいです、、
    めちゃくちゃわかりやすいです!!
    (ドキュメントの翻訳まで、、ありがとうございます。。)

    『View Hierarchy』初めて知りました。
    めちゃくちゃ知りたかったです。
    Viewをいくら透過しても遷移元のViewが出ないのはそもそもMenuViewで読んだ時点でViewが削除 or 破棄されているのでは?と思ったのですがどう調べて良いのかわからず迷子になっていました。。

    ここまで丁寧に解説してくださって本当にありがとうございます。。
    めちゃくちゃ助かりました🙇‍♂️🙇‍♂️

    キャンセル

  • 2020/10/19 09:10

    reeebock さんもご指摘されていますが、あとは現象を一つひとつ分解し、逐一確認していくのがいいのではないでしょうか。

    キャンセル

  • 2020/10/19 13:39

    はい。
    もう少し自分で分解できるように努力します

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る