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

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

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

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

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

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

Q&A

解決済

2回答

1490閲覧

imageviewに画像を重ねたい

kou009

総合スコア16

iOS

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

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

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

0グッド

0クリップ

投稿2018/08/14 13:02

編集2018/08/14 17:31

こんにちは。メルカリの類似アプリを作っています。

collectionViewのCellの中のimageViewに画像を重ねたいです。
UIGraphicsBeginImageContextWithOptionsを使っています。
また、SDWebImageManagerを使ってダウンロードした画像を表示させています。

画像を重ねることはできたのですが、
画像の表示される位置と、SoldOutの画像の大きさと位置を統一、セルによって表示されるサイズが異なってしまうのを修正したいです。

現在の表示位置です。
イメージ説明

////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////

表示させたい位置(真ん中に寄せたい)です。元画像(ダウンロードした画像)の横幅は、元画像の比率によって異なります。
この画像にSOLD OUTの画像を重ねたいです。
SoldOutの画像は元画像の大きさや位置に関係なく、同じ位置、かつ同じ大きさにしたいです。
イメージ説明

コードです。

Swift

1import UIKit 2import SDWebImage 3 4 5class PostCollectionViewCell: UICollectionViewCell { 6 @IBOutlet weak var photo: UIImageView! 7 8 @IBOutlet weak var titleLbl: UILabel! 9 @IBOutlet weak var priceLbl: UILabel! 10 11 var post: Post? { 12 didSet { 13 updateView() 14 } 15 } 16 17 func updateView() { 18 19 if let photoUrlString = post?.imageUrls[0] { 20 SDWebImageManager.shared().loadImage(with: URL(string: photoUrlString), options: [], progress: nil) { (image, data, error, cacheType, finished, url) in 21 // self.imageView.image = image 22 self.getTopImage(postImage: image!) 23 } 24 25 } 26 } 27 28 func getTopImage(postImage: UIImage) { 29 30 let width: CGFloat = photo.frame.size.width 31 let height: CGFloat = photo.frame.size.height 32 33 let one: CGFloat = 1.0 34 if (post?.ratios[0])! <= one { 35 36 let newSize = CGSize(width: height, height: height) 37 let topImage:UIImage = UIImage(named:"soldout")! 38 let bottomImage:UIImage = postImage 39 40 UIGraphicsBeginImageContextWithOptions(newSize, false, bottomImage.scale) 41 bottomImage.draw(in: CGRect(x:0,y:0,width:newSize.width,height:newSize.height)) 42 topImage.draw(in: CGRect(x:0,y:0,width:newSize.width,height:newSize.height),blendMode:CGBlendMode.normal, alpha:1.0) 43 let newImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()! 44 UIGraphicsEndImageContext() 45 46 photo.image = newImage 47 let newRect = CGRect(x:0, y:0, width:187, height:187) 48 photo.frame = newRect 49 50 } else { 51 let newWidth: CGFloat = width / (post?.ratios[0])! 52 53 let newSize = CGSize(width: newWidth, height: 187) 54 print(newSize.width) 55 let topImage:UIImage = UIImage(named:"soldout")!.resize(size: newSize)! 56 let bottomImage:UIImage = postImage.resize(size: newSize)! 57 58 UIGraphicsBeginImageContextWithOptions(newSize, false, bottomImage.scale) 59 bottomImage.draw(in: CGRect(x:0,y:0,width:newSize.width,height:newSize.height)) 60 topImage.draw(in: CGRect(x:0,y:0,width:newSize.width,height:newSize.height),blendMode:CGBlendMode.normal, alpha:1.0) 61 let newImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()! 62 UIGraphicsEndImageContext() 63 64 photo.image = newImage 65 let newRect = CGRect(x:0, y:0, width:newWidth, height:height) 66 photo.frame = newRect 67 68 } 69 70 } 71} 72 73 74class Home1ViewController : UICollectionViewDataSource, UICollectionViewDelegate 75{ 76 77 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 78 { 79 let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PostCollectionViewCell", for: indexPath) as! PostCollectionViewCell 80 81 82 cell.post = self.posts[indexPath.item] 83 84 return cell 85 86 87 } 88} 89 90extension UIImage { 91 func resize(size _size: CGSize) -> UIImage? { 92 let widthRatio = _size.width / size.width 93 let heightRatio = _size.height / size.height 94 let ratio = widthRatio < heightRatio ? widthRatio : heightRatio 95 96 let resizedSize = CGSize(width: size.width * ratio, height: size.height * ratio) 97 98 UIGraphicsBeginImageContextWithOptions(resizedSize, false, 0.0) // 変更 99 draw(in: CGRect(origin: .zero, size: resizedSize)) 100 let resizedImage = UIGraphicsGetImageFromCurrentImageContext() 101 UIGraphicsEndImageContext() 102 103 return resizedImage 104 } 105}

どうすれば、元画像(ダウンロードした画像)にsoldoutの画像をうまく重ねることができるでしょうか?

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

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

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

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

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

guest

回答2

0

ベストアンサー

わざわざ合成する必要はなく、商品画像(UIImageView)の上に売り切れ画像(UIImageView)を重ねればいいのでは?

投稿2018/08/15 00:14

fuzzball

総合スコア16731

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

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

0

まず、ダウンロードしたイメージは、以下のURLを参考に、アスペクトを変えずに描画します。
その後に、soldout画像をリサイズせずphotoの大きさに合わせて描画する

https://stackoverflow.com/questions/8858404/uiimage-aspect-fit-when-using-drawinrect
AVMakeRectを利用する

投稿2018/08/14 15:02

t_obara

総合スコア5488

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問