[iPhone] 画像とテキストの合成 UIGraphicsBeginImageContext

画像の上に別の画像を重ねたり説明文をいれたりしたい場合には、UIGraphicsBeginImageContextを使うと画像とテキストを合成できます。画像などを重ねるには他にも方法はありますが選択肢の一つです。
 
この例のように1枚の画像にテキストとアイコン画像を重ねて合成してみます。
 

Swift 5.1
Xcode 11.3.1

画像とテキストの合成

 
例として以下の写真、アイコン画像とテキストを合成して見ます。
 
emmy
 
handbag
 
これらとテキスト

Emmy’s shopping in London.

画像は、Retina対応(@2xなど)としてAssets.xcassets に入れます。
 
Retina 画像でない場合は
UIGraphicsBeginImageContextWithOptions
を使わないと画像が粗くなる場合があります。
 

 

UIGraphicsBeginImageContext

 
これを実行するために、UIGraphicsBeginImageContext を呼び出し、
終了したら UIGraphicsEndImageContext() で終わります。

その2つの間で作業します。Graphics context 上に UIImageの draw(in:) メソッドを使って画像、テキストなど一つづつ順番にレンダリングしていき、最終的に出来上がったGraphics contextには合成されたImageができているという仕組みです。

 

サンプルコード

 
横長で表示させるケースです。
 
ViewController.swift

 
新しくできた UIImage を UIImageView でスケールしてスクリーンに描画しています。
 
そのため、Emmy画像が大きい分、余計にメモリを食っている可能性があり、UIGraphicsBeginImageContext(CGSize: size)
のsizeを最終画像サイズにすればいいのかもしれません。あるいは別の方法もあるようですが
 
上下(ここでは左右)のマージン、safeAreaInsetsを考慮してエリア内に収まるようにしてみたのですが。
 

 
ただ、この場合ボタンや他のUIが被らないのであればむしろ画面を大きく使う事が望ましいと思われますので
 

 
こっちの方がいいでしょうね
 
 
関連ページ

References:
UIGraphicsBeginImageContext – UIKit | Apple Developer Documentation
UIGraphicsEndImageContext() – UIKit | Apple Developer Documentation
draw(in:) – UIImage | Apple Developer Documentation

一人でアプリ開発の限界を感じたら

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンライン・スクールがいいと思います。


TECH ACADEMY
自宅にいながら1時間でプログラミング基礎を習得

こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン



とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約20,000名の受講生と300社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。


Play Ground
本業と並行してやるには月額制なのがありがたいです。


無料で転職まで
これはiOSアプリ限定ではありませんが無料です
その代わり就職することを前提にしたスクールで「エンジニアになって職を得たい」のであれば手っ取り早いかもしれません


誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:


シェアする

  • このエントリーをはてなブックマークに追加

フォローする