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

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

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

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

Q&A

解決済

1回答

697閲覧

Swift3 UITextViewのふちをグラデーションしたい

mitci

総合スコア37

Swift

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

0グッド

1クリップ

投稿2017/09/10 10:29

編集2017/09/12 13:12

###実現したいこと
外部から引っ張ってきた文字列を代入したUITextViewの端を グラデーションで消える ようにしたいのです。
イメージ説明
こうではなくて、
イメージ説明
こうしたいのです。

###追記
大変にわがままで申し訳ないのですが、
黒から透明のグラデーションを乗せると、
イメージ説明
こうなってしまい、文字(UITextView)が透明になるとは少し違うのです・・・

###試したこと
maskを使えばいいのでしょうか?

###補足情報(言語/FW/ツール等のバージョンなど)
swift3 xcode8

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

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

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

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

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

Stripe

2017/09/10 13:07

UITextViewのふちって、上端だけ?
mitci

2017/09/10 13:59

すいません、上下共にです
guest

回答1

0

ベストアンサー

アルファをグラデーションにした黒いViewを上に乗せるとか。

試してみました

Storyboard上で、UITextViewの上に重なるように同サイズのUIViewを置き、Custom ClassをGradientViewにするだけでOKです。(グラデーション部分は適当なので修正して下さい)

swift

1class GradientView: UIView { 2 override func awakeFromNib() { 3 //グラデーションのレイヤを追加 4 let gradient = CAGradientLayer() 5 gradient.frame = self.bounds 6 gradient.colors = [ 7 UIColor.black.withAlphaComponent(1).cgColor, 8 UIColor.black.withAlphaComponent(0).cgColor, 9 UIColor.black.withAlphaComponent(0).cgColor, 10 UIColor.black.withAlphaComponent(1).cgColor, 11 ] 12 self.layer.addSublayer(gradient) 13 } 14 15 //タッチイベントをスルーする 16 override func point(inside point: CGPoint, with event: UIEvent?) -> Bool { 17 return false 18 } 19}

gradient

投稿2017/09/11 02:55

編集2017/09/12 02:31
fuzzball

総合スコア16731

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

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

mitci

2017/09/11 12:45

gradientLayerでUIColor.blackからUIColor.clearでグラデーションしたものを上に乗せるということでしょうか?大変申し訳ありませんが、黒いViewとはIBで乗せるとしたらどのViewでしょうか・・・
fuzzball

2017/09/11 13:51

コードで作っても、pngで用意しても、どちらでもいいと思います。 コードで作るならUIView、pngならUIImageViewですね。
mitci

2017/09/12 12:28

ご回答、具体的なコーディングありがとうございます! こちらの場合ですと、上下の部分は黒いグラデーションで隠れるということになると思うのですが、 実際のシーンでは画像のように黒い背景ではなく、動的な背景(画像では再生中の曲のアートワークで曲によって変化する)の上にUITextViewを乗せることが多く、 pngなどのあらかじめ色の決まった乗せられないのが現状なんです・・・ とはいえ、タッチイベントをスルーというものもわからなかったので大いに助かったのですが
fuzzball

2017/09/12 12:43

背景云々がよく分からないのですが、スクリーンショットの背景の黒はUITextViewの背景色です。mitciさんのコードでは、現在実装しているUITextViewの背景色のままにしておけばいいと思います。 「タッチイベントをスルー」については、コメントアウトして実行してみれば分かりますが、スルーしないとUITextViewへのタッチ操作が出来ません。(スクロールなどが出来ないということ)
mitci

2017/09/12 13:12 編集

上に乗せたビューが邪魔でタッチ操作が効かないということはこのシーン以外でも結構あったので本当に助かりました。 背景についてですが、説明不足で申し訳ないのですが、UITextViewの背景色を透明にしてあり、その下に置いたアートワーク、BlurのVisualEffectViewを重ねたものを透けさせているため、縁がそのblurを乗せたアートワークではなく、黒になってしまう という意味でした。申し訳有りません。 写真を追加させていただきました。 わがままで申し訳ありません・・・
fuzzball

2017/09/12 13:33

なるほど。テキストを透明フェードさせたいということですね。 だと、この方法では無理ですし、実現出来そうな方法も思いつきませんねぇ‥。
fuzzball

2017/09/12 14:31

一行ごとに別のUITextViewにして、上端/下端のUITextViewのアルファを変えてやれば実現できそうですね。面倒臭そうですがw
mitci

2017/09/13 12:13

やっぱりそうですよね・・・ 上端のアルファを限りなく0に近くして、その下をもう少し濃くして、下端をその逆にした上で スワイプ操作で全てのTextViewを瞬時に行を入れ替えて仮想的にスクロールを実現させるという感じでしょうか? デザイン上わりとありふれた発想かと思ったのですが(昔、iOS5時代くらいに何かのアプリで見た気がしていて・・・) ただマスクをかけるにしても対象がUITextViewの端っこというのはなかなか難しいんですね・・・ とりあえず暫定的には黒フェードを上から乗せてタッチ操作をスルーさせるというのがよさそうですね 見た目としても甚だしく理想とかけ離れているわけではないですし・・・
fuzzball

2017/09/13 12:41 編集

TextView(というか一行ならLabelで良さそうですが)を入れ替えるのではなく、ScrollViewの上にTextView(Label)を並べれば、スクロールに関しては手間をかけなくていいんじゃないかなと思います。 あとは、スクロール位置から上下のフェード部分に掛かっているTextView(Label)を求めてアルファを設定してやる、という机上の空論ですw その前に、文章を行単位に分割するのも意外と面倒臭そうな気がしますが‥。
mitci

2017/09/14 11:34

なるほど、ScrollViewですね・・・ もちろん、そもそも複数行のものをばらばらにしてわざわざ別のLabelに入れるというのもなかなかに大変ですね・・・ whileループとseparatedBy: CharacterSet.newlinesで分けられそうではありますが、 とりあえず 回答 けっこう面倒ということで、ベストアンサーにさせていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問