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

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

新規登録して質問してみよう
ただいま回答率
85.50%
iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Swift

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

Swift 2

Swift 2は、Apple社が独自に開発を行っている言語「Swift」のアップグレード版です。iOSやOS X、さらにLinuxにも対応可能です。また、throws-catchベースのエラーハンドリングが追加されています。

Q&A

解決済

2回答

1938閲覧

CAGradiationLayerの動作が遅い

yukitoto

総合スコア53

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Swift

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

Swift 2

Swift 2は、Apple社が独自に開発を行っている言語「Swift」のアップグレード版です。iOSやOS X、さらにLinuxにも対応可能です。また、throws-catchベースのエラーハンドリングが追加されています。

0グッド

0クリップ

投稿2016/07/13 05:20

編集2016/08/25 05:20

はじめまして、質問をご覧頂いてありがとうございます。
現在、iOS8・Xcode7.3、swift2という環境でStoryBoardを利用せずにiOSアプリの開発を行っています。

今回、あるUIViewの上にheaderViewというものをaddSubviewして利用しています。
そのheaderViewに対して、CAGradiationLayerでグラデーションをかけています。
今回は全体を角丸にしたいので、ベースとなるビューに対して、layer.cornerRadius = 10, clipsToBounds = true のプロパティをセットしています。

問題になっているのが、ページ遷移を行った際に、このcornerRadiusがグラデーション部分に反映されるのが遅い、ということです。
追記:グラデーションを掛けなくてもこの現象が発生しました。

はじめに四角で表示され、fadeされる形で角丸になります。これを初めから角丸で表示したいです。

以下がサンプルコードです。

swift

1let gradationColors = [UIColor.myGradationStartColor().CGColor, UIColor.myGradationEndColor().CGColor] 2headerGradationLayer.colors = gradationColors 3headerView.layer.insertSublayer(headerGradationLayer, atIndex: 0)

headerGradationLayer.removeAllAnimations()なども試みてみたのですが、フェードが消えるだけで、遅れてくるという問題は解消されませでした。

ぜひお力をお貸しください。

イメージ

追記

ページ遷移はpushで行っております。

swift

1self.navigationController?.pushViewController(nextViewController, animated: true)

基本的には以下のスニペットの構成で、View自体はサブクラスで作成しております。

swift

1class ModalViewController: UIView { 2 3 override func loadView() { 4 let modalView = ModalView() 5 modalView.frame = self.view.frame 6 self.view = modalView 7 } 8} 9 10class ModalView: UIView { 11 let headerView = UIView() 12 let headerGradationLayer = CAGradientLayer() 13 14 init() { 15 super.init(frame: .zero) 16 17 self.backgroundColor = UIColor.whiteColor() 18 self.clipsToBounds = true 19 self.layer.cornerRadius = 10 20 21 setHeaderView() 22 } 23 24 private func setHeaderView() { 25 let gradationColors = [UIColor.myGradationStartColor().CGColor, UIColor.myGradationEndColor().CGColor] 26 headerGradationLayer.colors = gradationColors 27 headerView.layer.insertSublayer(headerGradationLayer, atIndex: 0) 28 self.addSubview(headerView) 29 } 30}

詳しく調べてみると、push遷移をする際に、遷移前のViewControllerのviewの角が一度丸じゃなくなるという現象のようです。
色を変えてわかりやすく

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

それぞれのViewControllerでは角丸になっていたのですが、遷移中は角が画面からはみ出し、ViewControllerの途中の断面が元の表示範囲一杯に表示されていたのが問題でした。(以下の図参照)
イメージ

なので、そもそもの表示範囲にconerRadiusを掛けてみると、常に角丸になり、解決しました。

self.navigationController?.view.layer.cornerRadius = 10 self.navigationController?.view.clipsToBounds = true

投稿2016/08/25 06:08

yukitoto

総合スコア53

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

おそらくViewの生成(サブクラスなのか?)、画面遷移部分のコードを見ないとなんとも言えないと思います。
※ gifを見てもおそらくNavigationPush遷移では無い気がしました。

違うとおもいますが、ベースのViewにheaderViewを乗せ画面遷移させるコードを書いてみました。
普通のpushの遷移でしたら角丸が消えることは無いです。

swift

1 2import UIKit 3 4class ViewController: UIViewController { 5 6 override func viewDidLoad() { 7 8 super.viewDidLoad() 9 let screenWidth = UIScreen.mainScreen().bounds.width 10 let baseView = UIView(frame: CGRect(x: 0, y: 20, width: screenWidth, height: 100)) 11 baseView.backgroundColor = UIColor.yellowColor() 12 view.addSubview(baseView) 13 14 let headerView = UIView(frame: CGRect(x: 10, y: 10, width: screenWidth - 20, height: 80)) 15 headerView.backgroundColor = UIColor.blueColor() 16 headerView.layer.cornerRadius = 10 17 headerView.layer.masksToBounds = true 18 baseView.addSubview(headerView) 19 20 let button = UIButton(frame: CGRect(x: 10, y: 20, width: 100, height: 50)) 21 button.setTitle("Next", forState: .Normal) 22 button.addTarget(self, action: #selector(self.pusuButton(_:)), forControlEvents: .TouchUpInside) 23 baseView.addSubview(button) 24 25 } 26 27 func pusuButton(sender: UIButton) { 28 let next = ViewController1() 29 self.navigationController?.pushViewController(next, animated: true) 30 } 31} 32 33 34class ViewController1: UIViewController { 35 36 override func viewDidLoad() { 37 super.viewDidLoad() 38 39 view.backgroundColor = UIColor.whiteColor() 40 41 let screenWidth = UIScreen.mainScreen().bounds.width 42 let baseView = UIView(frame: CGRect(x: 0, y: 20, width: screenWidth, height: 100)) 43 baseView.backgroundColor = UIColor.yellowColor() 44 view.addSubview(baseView) 45 46 let headerView = UIView(frame: CGRect(x: 10, y: 10, width: screenWidth - 20, height: 80)) 47 headerView.backgroundColor = UIColor.blueColor() 48 headerView.layer.cornerRadius = 10 49 headerView.layer.masksToBounds = true 50 baseView.addSubview(headerView) 51 52 let button = UIButton(frame: CGRect(x: 10, y: 20, width: 100, height: 50)) 53 button.setTitle("Back", forState: .Normal) 54 button.addTarget(self, action: #selector(self.pusuButton(_:)), forControlEvents: .TouchUpInside) 55 baseView.addSubview(button) 56 57 } 58 59 func pusuButton(sender: UIButton) { 60 self.navigationController?.popViewControllerAnimated(true) 61 } 62}

投稿2016/07/13 10:20

編集2016/08/25 00:18
_Kentarou

総合スコア8490

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yukitoto

2016/08/24 22:32

clipsToBounds, cornerRadiusの値については、Viewのinitializerでセットしています。 状況としては、以下のGifのような形です。こちらはpresentModallyで表示しているControllerになるのですが、ページ遷移時に遅れてしまい、一度角が見える形になってしまっています... https://gyazo.com/ac046871c3d4b0467ee030556c36934a
_Kentarou

2016/08/24 23:36

画面を戻った時に角丸にするビューを再度生成されていますか?
_Kentarou

2016/08/25 00:18

回答を変更しました、確認してみてください。
yukitoto

2016/08/25 05:19

情報不足で大変申し訳ありません...! 追記で参考になると思われる部分を追加させていただきました。何卒よろしくお願いいたします!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問