質問編集履歴

2 マークダウンの修正

退会済みユーザー

退会済みユーザー

2017/01/01 17:35  投稿

CAGradientLayerでグラデーションを実装する際のCALayerの扱いについて
CAGradientLayerメソッドを使ってグラデーションを実装しようとこころみましたが、
レイヤーより下の階層のパーツに対してもグラデーションの影響が出てしまいました。
![イメージ説明](3c1c5dec3e19781eaacfb98806090f61.png)
白いテキストにグラデーションとして設定した緑がうっすらかかっています。
#実施した方法
![イメージ説明](a09aafa831b58aaf43aa856631a9dfef.png)
基本構造はViewControllerの中にtableViewを配置、
Dynamic Prototypesを使ってCellを生成しています。
この時self.viewにはベースとなるカラー(透過なし)を設定し。
その下の階層にあるtableViewにグラーデーションレイヤーを適用しています。
![イメージ説明](dd983f086c12a23d069b1314984fb552.png)
グラーデーションの設定値はこちら
```
startColor = UIColor(red: 30/255, green: 255/255, blue: 0/255, alpha: 0.15).cgColor
endColor = UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 0.25).cgColor
```
階層
![イメージ説明](44597a38dddfa55b29a5f9a4def3fea1.png)
薄い水色---Layer
グリーン ---TableView
最初はtableViewCellのViewパーツより手前側にレイヤーが配置されているからTableViewCellがレイヤーの影響を受けていると考えていたので
tableViewCellでなければコードでパーツを作成してレイヤーをaddした後に
さらにその上にラベルをaddしようと考えていたのですが、
階層をみると階層は関係ないようです。
ここまで調べた所で解決先が思いつかなくなりご相談させていただきました。
どうかよろしくお願いします。
--------------------------------------
おかげさまで解決しました!!!
#おかげさまで解決しました!!!
解決したのですが、その挙動に疑問が残るので共有しておきます。
1)self.viewに対し、階層の0番目にレイヤーを追加
**1)self.viewに対し、階層の0番目にレイヤーを追加**
self.view.layer.insertSublayer(layer, at: 0)
![イメージ説明](1f273bffd362404701cc6cfebcf7a9fe.png)
結果
![イメージ説明](f791bc9a1bf2e3d74a7b66477d3100f9.png)
tableViewより後ろにレイヤーが存在するため、
tableViewに設定した色のみが前面に表示
2)self.viewに対し、階層の1番目にレイヤーを追加
**2)self.viewに対し、階層の1番目にレイヤーを追加**
上記とまったく同じ結果
3)self.viewに対し、階層の2番目にレイヤーを追加
**3)self.viewに対し、階層の2番目にレイヤーを追加**
![イメージ説明](672a00fc3b52148f18c26219979ed4c6.png)
レイヤーの階層における位置は同じ場所にあるように見えるが
結果
![イメージ説明](9413e82eb1d2274bbf2e008c2b2da6bb.png)
tableViewよりも手前にレイヤーがあるようす。
4)tableViewに対し、階層の0番目にレイヤーを追加
**4)tableViewに対し、階層の0番目にレイヤーを追加**
![イメージ説明](4be61f725feca810e34fc115cf008770.png)
先ほどまで存在した黄緑色のviewがなくなりtableView自体の色が変わっている。
結果
![イメージ説明](d2f7d6ad9c8d5358a9da7507d1463bb1.png)
ラベルに影響なく、tableViewにのみグラデーションをかけた状態に。
今回わかったこと
・そもそもXcodeのview hierarchyで見られるviewにレイヤーはうつっていない。
・viewを選択するとCALayerクラスのviewが存在するが、
この時レイヤーはこのUIViewに対して配置されている。
![イメージ説明](677964785ee5ecb159eee0b31a164aaf.png
![イメージ説明](677964785ee5ecb159eee0b31a164aaf.png)
  • Swift

    11944 questions

    Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

1 問題が解決できました!しかしながらその結果の理由がうまく説明できません。ひとまず挙動だけ共有いたします。

退会済みユーザー

退会済みユーザー

2017/01/01 17:32  投稿

CAGradientLayerでグラデーションを実装する際のCALayerの扱いについて
CAGradientLayerメソッドを使ってグラデーションを実装しようとこころみましたが、
レイヤーより下の階層のパーツに対してもグラデーションの影響が出てしまいました。
![イメージ説明](3c1c5dec3e19781eaacfb98806090f61.png)
白いテキストにグラデーションとして設定した緑がうっすらかかっています。
#実施した方法
![イメージ説明](a09aafa831b58aaf43aa856631a9dfef.png)
基本構造はViewControllerの中にtableViewを配置、
Dynamic Prototypesを使ってCellを生成しています。
この時self.viewにはベースとなるカラー(透過なし)を設定し。
その下の階層にあるtableViewにグラーデーションレイヤーを適用しています。
![イメージ説明](dd983f086c12a23d069b1314984fb552.png)
グラーデーションの設定値はこちら
```
startColor = UIColor(red: 30/255, green: 255/255, blue: 0/255, alpha: 0.15).cgColor
endColor = UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 0.25).cgColor
```
階層
![イメージ説明](44597a38dddfa55b29a5f9a4def3fea1.png)
薄い水色---Layer
グリーン ---TableView
最初はtableViewCellのViewパーツより手前側にレイヤーが配置されているからTableViewCellがレイヤーの影響を受けていると考えていたので
tableViewCellでなければコードでパーツを作成してレイヤーをaddした後に
さらにその上にラベルをaddしようと考えていたのですが、
階層をみると階層は関係ないようです。
ここまで調べた所で解決先が思いつかなくなりご相談させていただきました。
どうかよろしくお願いします。
どうかよろしくお願いします。
--------------------------------------
おかげさまで解決しました!!!
解決したのですが、その挙動に疑問が残るので共有しておきます。
1)self.viewに対し、階層の0番目にレイヤーを追加
self.view.layer.insertSublayer(layer, at: 0)
![イメージ説明](1f273bffd362404701cc6cfebcf7a9fe.png)
結果
![イメージ説明](f791bc9a1bf2e3d74a7b66477d3100f9.png)
tableViewより後ろにレイヤーが存在するため、
tableViewに設定した色のみが前面に表示
2)self.viewに対し、階層の1番目にレイヤーを追加
上記とまったく同じ結果
3)self.viewに対し、階層の2番目にレイヤーを追加
![イメージ説明](672a00fc3b52148f18c26219979ed4c6.png)
レイヤーの階層における位置は同じ場所にあるように見えるが
結果
![イメージ説明](9413e82eb1d2274bbf2e008c2b2da6bb.png)
tableViewよりも手前にレイヤーがあるようす。
4)tableViewに対し、階層の0番目にレイヤーを追加
![イメージ説明](4be61f725feca810e34fc115cf008770.png)
先ほどまで存在した黄緑色のviewがなくなりtableView自体の色が変わっている。
結果
![イメージ説明](d2f7d6ad9c8d5358a9da7507d1463bb1.png)
ラベルに影響なく、tableViewにのみグラデーションをかけた状態に。
今回わかったこと
・そもそもXcodeのview hierarchyで見られるviewにレイヤーはうつっていない。
・viewを選択するとCALayerクラスのviewが存在するが、
この時レイヤーはこのUIViewに対して配置されている。
![イメージ説明](677964785ee5ecb159eee0b31a164aaf.png
  • Swift

    11944 questions

    Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る