// // WelcomeIllustrationView.swift // Mastodon // // Created by MainasuK Cirno on 2021-3-1. // import UIKit final class WelcomeIllustrationView: UIView { static let artworkImageSize = CGSize(width: 375, height: 1500) let cloudBaseImageView = UIImageView() let rightHillImageView = UIImageView() let leftHillImageView = UIImageView() let centerHillImageView = UIImageView() private let cloudBaseImage = Asset.Welcome.Illustration.cloudBase.image private let elephantThreeOnGrassWithTreeTwoImage = Asset.Welcome.Illustration.elephantThreeOnGrassWithTreeTwo.image private let elephantThreeOnGrassWithTreeThreeImage = Asset.Welcome.Illustration.elephantThreeOnGrassWithTreeThree.image private let elephantThreeOnGrassImage = Asset.Welcome.Illustration.elephantThreeOnGrass.image // layout outside let elephantOnAirplaneWithContrailImageView: UIImageView = { let imageView = UIImageView(image: Asset.Welcome.Illustration.elephantOnAirplaneWithContrail.image) imageView.contentMode = .scaleAspectFill return imageView }() override init(frame: CGRect) { super.init(frame: frame) _init() } required init?(coder: NSCoder) { super.init(coder: coder) _init() } } extension WelcomeIllustrationView { private func _init() { backgroundColor = Asset.Welcome.Illustration.backgroundCyan.color let topPaddingView = UIView() topPaddingView.translatesAutoresizingMaskIntoConstraints = false addSubview(topPaddingView) NSLayoutConstraint.activate([ topPaddingView.topAnchor.constraint(equalTo: topAnchor), topPaddingView.leadingAnchor.constraint(equalTo: leadingAnchor), topPaddingView.trailingAnchor.constraint(equalTo: trailingAnchor), ]) cloudBaseImageView.translatesAutoresizingMaskIntoConstraints = false addSubview(cloudBaseImageView) NSLayoutConstraint.activate([ cloudBaseImageView.topAnchor.constraint(equalTo: topPaddingView.bottomAnchor), cloudBaseImageView.leadingAnchor.constraint(equalTo: leadingAnchor), cloudBaseImageView.trailingAnchor.constraint(equalTo: trailingAnchor), cloudBaseImageView.bottomAnchor.constraint(equalTo: bottomAnchor), cloudBaseImageView.widthAnchor.constraint(equalTo: cloudBaseImageView.heightAnchor, multiplier: WelcomeIllustrationView.artworkImageSize.width / WelcomeIllustrationView.artworkImageSize.height), ]) [ rightHillImageView, leftHillImageView, centerHillImageView, ].forEach { imageView in imageView.translatesAutoresizingMaskIntoConstraints = false addSubview(imageView) NSLayoutConstraint.activate([ imageView.topAnchor.constraint(equalTo: cloudBaseImageView.topAnchor), imageView.leadingAnchor.constraint(equalTo: cloudBaseImageView.leadingAnchor), imageView.trailingAnchor.constraint(equalTo: cloudBaseImageView.trailingAnchor), imageView.bottomAnchor.constraint(equalTo: cloudBaseImageView.bottomAnchor), ]) } } override func layoutSubviews() { super.layoutSubviews() updateImage() } private func updateImage() { let size = WelcomeIllustrationView.artworkImageSize let width = size.width let height = size.height cloudBaseImageView.image = UIGraphicsImageRenderer(size: size).image { context in // clear background UIColor.clear.setFill() context.fill(CGRect(origin: .zero, size: size)) // draw cloud cloudBaseImage.draw(at: CGPoint(x: 0, y: height - cloudBaseImage.size.height)) } rightHillImageView.image = UIGraphicsImageRenderer(size: size).image { context in // clear background UIColor.clear.setFill() context.fill(CGRect(origin: .zero, size: size)) // draw elephantThreeOnGrassWithTreeTwoImage // elephantThreeOnGrassWithTreeTwo.bottomY - 25 align to elephantThreeOnGrassImage.centerY elephantThreeOnGrassWithTreeTwoImage.draw(at: CGPoint(x: width - elephantThreeOnGrassWithTreeTwoImage.size.width, y: height - 0.5 * elephantThreeOnGrassImage.size.height - elephantThreeOnGrassWithTreeTwoImage.size.height + 25)) } leftHillImageView.image = UIGraphicsImageRenderer(size: size).image { context in // clear background UIColor.clear.setFill() context.fill(CGRect(origin: .zero, size: size)) // draw elephantThreeOnGrassWithTreeThree // elephantThreeOnGrassWithTreeThree.bottomY + 30 align to elephantThreeOnGrassImage.centerY elephantThreeOnGrassWithTreeThreeImage.draw(at: CGPoint(x: 0, y: height - 0.5 * elephantThreeOnGrassImage.size.height - elephantThreeOnGrassWithTreeThreeImage.size.height - 30)) } centerHillImageView.image = UIGraphicsImageRenderer(size: size).image { context in // clear background UIColor.clear.setFill() context.fill(CGRect(origin: .zero, size: size)) // draw elephantThreeOnGrass elephantThreeOnGrassImage.draw(at: CGPoint(x: 0, y: height - elephantThreeOnGrassImage.size.height)) } } } #if canImport(SwiftUI) && DEBUG import SwiftUI struct WelcomeIllustrationView_Previews: PreviewProvider { static var previews: some View { Group { UIViewPreview(width: 375) { WelcomeIllustrationView() } .previewLayout(.fixed(width: 375, height: 1500)) UIViewPreview(width: 1125) { WelcomeIllustrationView() } .previewLayout(.fixed(width: 1125, height: 5000)) } } } #endif