AutoLayout + SnapKit でアスペクト比固定のViewを作る

最近、iOS の View は InterfaceBuilder を利用せずにコードで生成しています。
その際に SnapKit という OSS を利用しているのですが、 アスペクト比固定の View の生成方法にちょっと悩んだので、Tipsとして残しておきます。

InterfaceBuilderの場合

Add New Constraints から Aspect Ratio にチェックを入れればOKですよね。

SnapKitの場合

横幅基準でアスペクト比固定する

aView.snp.makeConstraints { make in
    let width = 100
    let ratio = 0.5
    make.width.equalTo(width)
    make.height.equalTo(aView.snp.width).multipliedBy(ratio)
}

とまぁ、こんな感じに View の固定する方（今回は横幅）は普段通り設定し、依存する方（今回は縦幅）へ equalTo で固定する方と同じであると宣言した後に、multipliedByでその比率を入れることで実現可能でした。

ImageViewを画像にFitさせる

この考えを用いることで、画像の比率を保ったまま ImageView を AutoLayout　で画像のアスペクト比を保ったままいい感じに設定することができます。

ImageViewを画像にFitさせる

imageView.snp.makeConstraints { make in
    let ratio: CGFloat = {
        let size = imageView.image!.size
        return size.height / size.width
    }()
    make.width.equalToSuperview().multipliedBy(0.8)
    make.height.equalTo(imageView.snp.width).multipliedBy(ratio)
}

これでImageViewの横幅を親Viewの0.8倍した横幅に設定し、画像のアスペクト比にImageViewをFitさせることができました。