From df783b3e5319c416d16c967ad37c29e9855deca3 Mon Sep 17 00:00:00 2001 From: Nathan Mattes Date: Wed, 7 Dec 2022 23:04:22 +0100 Subject: [PATCH] Make images move (#690) They're not moving in the right direction yet, and it's entirely based on autolayout and not on layoutSubviews. We'll see, if that's the way to go. --- .../View/WelcomeIllustrationView.swift | 212 ++++++------------ .../Welcome/WelcomeViewController.swift | 10 +- 2 files changed, 68 insertions(+), 154 deletions(-) diff --git a/Mastodon/Scene/Onboarding/Welcome/View/WelcomeIllustrationView.swift b/Mastodon/Scene/Onboarding/Welcome/View/WelcomeIllustrationView.swift index 984c5cd86..15ceed815 100644 --- a/Mastodon/Scene/Onboarding/Welcome/View/WelcomeIllustrationView.swift +++ b/Mastodon/Scene/Onboarding/Welcome/View/WelcomeIllustrationView.swift @@ -14,9 +14,6 @@ import MastodonLocalization final class WelcomeIllustrationView: UIView { let cloudBaseImageView = UIImageView() - let rightHillImageView = UIImageView() - let leftHillImageView = UIImageView() - let centerHillImageView = UIImageView() private let cloudBaseImage = Asset.Scene.Welcome.Illustration.cloudBase.image private let cloudBaseExtendImage = Asset.Scene.Welcome.Illustration.cloudBaseExtend.image @@ -25,8 +22,10 @@ final class WelcomeIllustrationView: UIView { private let elephantThreeOnGrassImage = Asset.Scene.Welcome.Illustration.elephantThreeOnGrass.image private let elephantThreeOnGrassExtendImage = Asset.Scene.Welcome.Illustration.elephantThreeOnGrassExtend.image - var bottomAnchorLayoutConstraint: NSLayoutConstraint? var elephantOnAirplaneLeftConstraint: NSLayoutConstraint? + var leftHillLeftConstraint: NSLayoutConstraint? + var centerHillLeftConstraint: NSLayoutConstraint? + var rightHillRightConstraint: NSLayoutConstraint? let elephantOnAirplaneWithContrailImageView: UIImageView = { let imageView = UIImageView(image: Asset.Scene.Welcome.Illustration.elephantOnAirplaneWithContrail.image) @@ -35,11 +34,28 @@ final class WelcomeIllustrationView: UIView { return imageView }() - var layout: Layout = .compact { - didSet { - setNeedsLayout() - } - } + let rightHillImageView: UIImageView = { + let imageView = UIImageView(image: Asset.Scene.Welcome.Illustration.elephantThreeOnGrassWithTreeTwo.image) + imageView.translatesAutoresizingMaskIntoConstraints = false + imageView.contentMode = .scaleAspectFill + return imageView + }() + + let leftHillImageView: UIImageView = { + let imageView = UIImageView(image: Asset.Scene.Welcome.Illustration.elephantThreeOnGrassWithTreeTwo.image) + imageView.translatesAutoresizingMaskIntoConstraints = false + imageView.contentMode = .scaleAspectFill + return imageView + }() + + let centerHillImageView: UIImageView = { + let imageView = UIImageView(image: Asset.Scene.Welcome.Illustration.elephantThreeOnGrass.image) + imageView.translatesAutoresizingMaskIntoConstraints = false + imageView.contentMode = .scaleAspectFill + return imageView + }() + + var aspectLayoutConstraint: NSLayoutConstraint! override init(frame: CGRect) { @@ -54,20 +70,6 @@ final class WelcomeIllustrationView: UIView { } -extension WelcomeIllustrationView { - enum Layout { - case compact - case regular - - var artworkImageSize: CGSize { - switch self { - case .compact: return CGSize(width: 375, height: 1500) - case .regular: return CGSize(width: 547, height: 3000) - } - } - } -} - extension WelcomeIllustrationView { private func _init() { @@ -79,8 +81,45 @@ extension WelcomeIllustrationView { cloudBaseImageView.leadingAnchor.constraint(equalTo: leadingAnchor), cloudBaseImageView.trailingAnchor.constraint(equalTo: trailingAnchor), cloudBaseImageView.bottomAnchor.constraint(equalTo: bottomAnchor), + cloudBaseImageView.topAnchor.constraint(equalTo: topAnchor) ]) + rightHillImageView.translatesAutoresizingMaskIntoConstraints = false + + let rightHillRightConstraint = rightAnchor.constraint(equalTo: rightHillImageView.rightAnchor) + addSubview(rightHillImageView) + NSLayoutConstraint.activate([ + rightHillImageView.widthAnchor.constraint(equalTo: widthAnchor), + rightHillRightConstraint, + bottomAnchor.constraint(equalTo: rightHillImageView.bottomAnchor), + ]) + self.rightHillRightConstraint = rightHillRightConstraint + + leftHillImageView.translatesAutoresizingMaskIntoConstraints = false + + let leftHillLeftConstraint = leftHillImageView.leftAnchor.constraint(equalTo: leftAnchor) + addSubview(leftHillImageView) + NSLayoutConstraint.activate([ + leftHillImageView.widthAnchor.constraint(equalTo: widthAnchor), + leftHillLeftConstraint, + bottomAnchor.constraint(equalTo: leftHillImageView.bottomAnchor), + ]) + + self.leftHillLeftConstraint = leftHillLeftConstraint + + centerHillImageView.translatesAutoresizingMaskIntoConstraints = false + + let centerHillLeftConstraint = centerHillImageView.leftAnchor.constraint(equalTo: leftAnchor) + + addSubview(centerHillImageView) + NSLayoutConstraint.activate([ + centerHillLeftConstraint, + bottomAnchor.constraint(equalTo: centerHillImageView.bottomAnchor), + trailingAnchor.constraint(equalTo: centerHillImageView.trailingAnchor), + ]) + + self.centerHillLeftConstraint = centerHillLeftConstraint + addSubview(elephantOnAirplaneWithContrailImageView) let elephantOnAirplaneLeftConstraint = leftAnchor.constraint(equalTo: elephantOnAirplaneWithContrailImageView.leftAnchor, constant: 178) // add 12pt bleeding @@ -92,132 +131,12 @@ extension WelcomeIllustrationView { ]) self.elephantOnAirplaneLeftConstraint = elephantOnAirplaneLeftConstraint - [ - rightHillImageView, - leftHillImageView, - centerHillImageView, - ].forEach { imageView in - imageView.translatesAutoresizingMaskIntoConstraints = false - addSubview(imageView) - imageView.pinTo(to: cloudBaseImageView) - } - aspectLayoutConstraint = cloudBaseImageView.widthAnchor.constraint(equalTo: cloudBaseImageView.heightAnchor, multiplier: layout.artworkImageSize.width / layout.artworkImageSize.height) - aspectLayoutConstraint.isActive = true - } - - override func layoutSubviews() { - super.layoutSubviews() - - switch layout { - case .compact: - layoutCompact() - case .regular: - layoutRegular() - } - - aspectLayoutConstraint.isActive = false - aspectLayoutConstraint = cloudBaseImageView.widthAnchor.constraint(equalTo: cloudBaseImageView.heightAnchor, multiplier: layout.artworkImageSize.width / layout.artworkImageSize.height) - aspectLayoutConstraint.isActive = true - } - - private func layoutCompact() { - let size = layout.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)) - } - } - - private func layoutRegular() { - let size = layout.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 - cloudBaseExtendImage.draw(at: CGPoint(x: 0, y: height - cloudBaseExtendImage.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 - 20)) - } - - 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: -160, y: height - 0.5 * elephantThreeOnGrassImage.size.height - elephantThreeOnGrassWithTreeThreeImage.size.height - 80)) - } - - centerHillImageView.image = UIGraphicsImageRenderer(size: size).image { context in - // clear background - UIColor.clear.setFill() - context.fill(CGRect(origin: .zero, size: size)) - - // draw elephantThreeOnGrass - elephantThreeOnGrassExtendImage.draw(at: CGPoint(x: 0, y: height - elephantThreeOnGrassExtendImage.size.height)) - } - } +// aspectLayoutConstraint = cloudBaseImageView.widthAnchor.constraint(equalTo: cloudBaseImageView.heightAnchor, multiplier: layout.artworkImageSize.width / layout.artworkImageSize.height) +// aspectLayoutConstraint.isActive = true } func setup() { - layout = { - switch traitCollection.userInterfaceIdiom { - case .phone: - return .compact - default: - return .regular - } - }() // set illustration guard superview == nil else { @@ -246,5 +165,8 @@ extension WelcomeIllustrationView { func update(contentOffset: CGFloat) { // updating the constraints doesn't work smoothly. elephantOnAirplaneLeftConstraint?.constant = -(contentOffset / 50) + 111 + leftHillLeftConstraint?.constant = (contentOffset / 50) + 111 + centerHillLeftConstraint?.constant = (contentOffset / 50) + 111 + rightHillRightConstraint?.constant = (contentOffset / 50) + 111 } } diff --git a/Mastodon/Scene/Onboarding/Welcome/WelcomeViewController.swift b/Mastodon/Scene/Onboarding/Welcome/WelcomeViewController.swift index eaf2faf5b..68e3ffae0 100644 --- a/Mastodon/Scene/Onboarding/Welcome/WelcomeViewController.swift +++ b/Mastodon/Scene/Onboarding/Welcome/WelcomeViewController.swift @@ -85,17 +85,13 @@ extension WelcomeViewController { view.addSubview(welcomeIllustrationView) welcomeIllustrationView.translatesAutoresizingMaskIntoConstraints = false - let bottomAnchorLayoutConstraint = welcomeIllustrationView.bottomAnchor.constraint(equalTo: view.bottomAnchor) - NSLayoutConstraint.activate([ welcomeIllustrationView.topAnchor.constraint(equalTo: view.topAnchor), welcomeIllustrationView.leadingAnchor.constraint(equalTo: view.leadingAnchor), view.trailingAnchor.constraint(equalTo: welcomeIllustrationView.trailingAnchor), - bottomAnchorLayoutConstraint + view.bottomAnchor.constraint(equalTo: welcomeIllustrationView.bottomAnchor) ]) - welcomeIllustrationView.bottomAnchorLayoutConstraint = bottomAnchorLayoutConstraint - buttonContainer.axis = .vertical buttonContainer.spacing = 12 buttonContainer.isLayoutMarginsRelativeArrangement = true @@ -139,9 +135,6 @@ extension WelcomeViewController { view.addSubview(pageViewController.view) pageViewController.didMove(toParent: self) - - - let scrollviews = pageViewController.view.subviews.filter { type(of: $0).isSubclass(of: UIScrollView.self) }.compactMap { $0 as? UIScrollView } for scrollView in scrollviews { @@ -178,7 +171,6 @@ extension WelcomeViewController { if view.safeAreaInsets.bottom == 0 { overlap += 56 } - welcomeIllustrationView.bottomAnchorLayoutConstraint?.constant = overlap } override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {