2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Swiftで画像ローディングライブラリNukeを使ってAutoLayout比率ぴったりで画像を表示する

Last updated at Posted at 2020-10-08

URLからUIImageViewに画像を表示する時、一瞬迷うかもしれません。
こういう場合は、NukeやKingfisherなどの画像ローディングライブラリを使うと楽です。

Nuke.loadImage(with: url, into: imageView)

Nukeはこれだけで使えて便利ですが、読み込む画像に応じて比率が違ってくる可能性への対応などは少し考える必要があります。
この記事では、そのような場合に比率を計算してAutoLayout経由でピッタリさせる方法をご紹介します。

Nuke.loadImage(with: URL(string: imageURL)!, options: ImageLoadingOptions(), into: self.writingImageView, progress: nil) { (result: Result<ImageResponse, ImagePipeline.Error>) in
      switch result {
      case .success(let imageResponse):
          self.imageRateLayoutConstraint.constant = imageResponse.image.size.width / imageResponse.image.size.height
      case .failure(let error):
          print(error)
      }
  }
}

Nukeのcompletionオプションを使えば取得した画像のサイズをこように取得して比率を計算することができますので imageRateLayoutConstraint.constant に代入することでコードからAutoLayoutに変更を与えることが出来ます。

画像に比率のAutoLayout設定を加えるには、このようにAspect Ratioを設定してください。

CleanShot 2020-10-08 at 18.38.37@2x.png

そして @IBOutlet weak var imageRateLayoutConstraint: NSLayoutConstraint! などを定義して Storyboard 上で接続します。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?