feat: set artwork image bleeding
This commit is contained in:
parent
47abbadaba
commit
9251b55106
|
@ -73,10 +73,10 @@ extension WelcomeIllustrationView {
|
||||||
|
|
||||||
override func layoutSubviews() {
|
override func layoutSubviews() {
|
||||||
super.layoutSubviews()
|
super.layoutSubviews()
|
||||||
artworkImageView.image = WelcomeIllustrationView.bottomPartImage()
|
artworkImageView.image = WelcomeIllustrationView.artworkImage()
|
||||||
}
|
}
|
||||||
|
|
||||||
static func bottomPartImage() -> UIImage {
|
static func artworkImage() -> UIImage {
|
||||||
let size = artworkImageSize
|
let size = artworkImageSize
|
||||||
let width = artworkImageSize.width
|
let width = artworkImageSize.width
|
||||||
let height = artworkImageSize.height
|
let height = artworkImageSize.height
|
||||||
|
@ -95,7 +95,7 @@ extension WelcomeIllustrationView {
|
||||||
let elephantTwoImage = Asset.Welcome.Illustration.elephantTwo.image
|
let elephantTwoImage = Asset.Welcome.Illustration.elephantTwo.image
|
||||||
let ineDashTwoImage = Asset.Welcome.Illustration.lineDashTwo.image
|
let ineDashTwoImage = Asset.Welcome.Illustration.lineDashTwo.image
|
||||||
|
|
||||||
let elephantOnAirplaneWithContrailImageView = Asset.Welcome.Illustration.elephantOnAirplaneWithContrail.image
|
// let elephantOnAirplaneWithContrailImageView = Asset.Welcome.Illustration.elephantOnAirplaneWithContrail.image
|
||||||
|
|
||||||
// draw elephantFourOnGrassWithTreeTwo
|
// draw elephantFourOnGrassWithTreeTwo
|
||||||
// elephantFourOnGrassWithTreeTwo.bottomY + 40 align to elephantThreeOnGrassImage.centerY
|
// elephantFourOnGrassWithTreeTwo.bottomY + 40 align to elephantThreeOnGrassImage.centerY
|
||||||
|
@ -115,11 +115,12 @@ extension WelcomeIllustrationView {
|
||||||
elephantTwoImage.draw(at: CGPoint(x: 0, y: height - elephantTwoImage.size.height - 125))
|
elephantTwoImage.draw(at: CGPoint(x: 0, y: height - elephantTwoImage.size.height - 125))
|
||||||
|
|
||||||
// draw elephantOnAirplaneWithContrailImageView
|
// draw elephantOnAirplaneWithContrailImageView
|
||||||
elephantOnAirplaneWithContrailImageView.draw(at: CGPoint(x: 0, y: height - cloudBaseImage.size.height - 0.5 * elephantOnAirplaneWithContrailImageView.size.height))
|
// elephantOnAirplaneWithContrailImageView.draw(at: CGPoint(x: 0, y: height - cloudBaseImage.size.height - 0.5 * elephantOnAirplaneWithContrailImageView.size.height))
|
||||||
}
|
}
|
||||||
|
|
||||||
return image
|
return image
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#if canImport(SwiftUI) && DEBUG
|
#if canImport(SwiftUI) && DEBUG
|
||||||
|
|
|
@ -14,7 +14,7 @@ final class WelcomeViewController: UIViewController, NeedsDependency {
|
||||||
weak var coordinator: SceneCoordinator! { willSet { precondition(!isViewLoaded) } }
|
weak var coordinator: SceneCoordinator! { willSet { precondition(!isViewLoaded) } }
|
||||||
|
|
||||||
let welcomeIllustrationView = WelcomeIllustrationView()
|
let welcomeIllustrationView = WelcomeIllustrationView()
|
||||||
var welcomeIllustrationViewBottomAnchorLayoutConstraint: NSLayoutConstraint!
|
var welcomeIllustrationViewBottomAnchorLayoutConstraint: NSLayoutConstraint?
|
||||||
|
|
||||||
private(set) lazy var logoImageView: UIImageView = {
|
private(set) lazy var logoImageView: UIImageView = {
|
||||||
let image = view.traitCollection.userInterfaceIdiom == .phone ? Asset.Welcome.mastodonLogo.image : Asset.Welcome.mastodonLogoLarge.image
|
let image = view.traitCollection.userInterfaceIdiom == .phone ? Asset.Welcome.mastodonLogo.image : Asset.Welcome.mastodonLogoLarge.image
|
||||||
|
@ -41,12 +41,12 @@ final class WelcomeViewController: UIViewController, NeedsDependency {
|
||||||
return button
|
return button
|
||||||
}()
|
}()
|
||||||
|
|
||||||
let signInButton: UIButton = {
|
private(set) lazy var signInButton: UIButton = {
|
||||||
let button = UIButton(type: .system)
|
let button = UIButton(type: .system)
|
||||||
button.titleLabel?.font = UIFontMetrics(forTextStyle: .headline).scaledFont(for: .systemFont(ofSize: 15, weight: .semibold))
|
button.titleLabel?.font = UIFontMetrics(forTextStyle: .headline).scaledFont(for: .systemFont(ofSize: 15, weight: .semibold))
|
||||||
button.setTitle(L10n.Common.Controls.Actions.signIn, for: .normal)
|
button.setTitle(L10n.Common.Controls.Actions.signIn, for: .normal)
|
||||||
button.setTitleColor(UIColor.white.withAlphaComponent(0.8), for: .normal)
|
let titleColor: UIColor = traitCollection.userInterfaceIdiom == .phone ? UIColor.white.withAlphaComponent(0.8) : Asset.Colors.Button.highlight.color
|
||||||
button.setInsets(forContentPadding: UIEdgeInsets(top: 12, left: 0, bottom: 12, right: 0), imageTitlePadding: 0)
|
button.setTitleColor(titleColor, for: .normal)
|
||||||
button.translatesAutoresizingMaskIntoConstraints = false
|
button.translatesAutoresizingMaskIntoConstraints = false
|
||||||
return button
|
return button
|
||||||
}()
|
}()
|
||||||
|
@ -63,16 +63,18 @@ extension WelcomeViewController {
|
||||||
super.viewDidLoad()
|
super.viewDidLoad()
|
||||||
|
|
||||||
setupOnboardingAppearance()
|
setupOnboardingAppearance()
|
||||||
view.backgroundColor = Asset.Welcome.Illustration.backgroundCyan.color
|
|
||||||
|
|
||||||
welcomeIllustrationView.translatesAutoresizingMaskIntoConstraints = false
|
if traitCollection.userInterfaceIdiom == .phone {
|
||||||
view.addSubview(welcomeIllustrationView)
|
view.backgroundColor = Asset.Welcome.Illustration.backgroundCyan.color
|
||||||
welcomeIllustrationViewBottomAnchorLayoutConstraint = welcomeIllustrationView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
|
welcomeIllustrationView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
NSLayoutConstraint.activate([
|
view.addSubview(welcomeIllustrationView)
|
||||||
welcomeIllustrationView.leftAnchor.constraint(equalTo: view.leftAnchor),
|
welcomeIllustrationViewBottomAnchorLayoutConstraint = welcomeIllustrationView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
|
||||||
welcomeIllustrationView.rightAnchor.constraint(equalTo: view.rightAnchor),
|
NSLayoutConstraint.activate([
|
||||||
welcomeIllustrationViewBottomAnchorLayoutConstraint,
|
view.leftAnchor.constraint(equalTo: welcomeIllustrationView.leftAnchor, constant: 44),
|
||||||
])
|
welcomeIllustrationView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: 44),
|
||||||
|
welcomeIllustrationViewBottomAnchorLayoutConstraint!,
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
view.addSubview(logoImageView)
|
view.addSubview(logoImageView)
|
||||||
NSLayoutConstraint.activate([
|
NSLayoutConstraint.activate([
|
||||||
|
@ -89,18 +91,45 @@ extension WelcomeViewController {
|
||||||
sloganLabel.topAnchor.constraint(equalTo: logoImageView.bottomAnchor, constant: 168),
|
sloganLabel.topAnchor.constraint(equalTo: logoImageView.bottomAnchor, constant: 168),
|
||||||
])
|
])
|
||||||
|
|
||||||
welcomeIllustrationView.cloudFirstImageView.translatesAutoresizingMaskIntoConstraints = false
|
if traitCollection.userInterfaceIdiom == .phone {
|
||||||
welcomeIllustrationView.cloudSecondImageView.translatesAutoresizingMaskIntoConstraints = false
|
let imageSizeScale: CGFloat = view.frame.width > 375 ? 1.5 : 1.0
|
||||||
welcomeIllustrationView.cloudFirstImageView.translatesAutoresizingMaskIntoConstraints = false
|
welcomeIllustrationView.cloudFirstImageView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
view.addSubview(welcomeIllustrationView.cloudFirstImageView)
|
||||||
// welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.translatesAutoresizingMaskIntoConstraints = false
|
NSLayoutConstraint.activate([
|
||||||
// view.addSubview(welcomeIllustrationView.elephantOnAirplaneWithContrailImageView)
|
welcomeIllustrationView.cloudFirstImageView.rightAnchor.constraint(equalTo: view.centerXAnchor),
|
||||||
// NSLayoutConstraint.activate([
|
welcomeIllustrationView.cloudFirstImageView.widthAnchor.constraint(equalToConstant: 272 / traitCollection.displayScale * imageSizeScale),
|
||||||
// welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.leftAnchor.constraint(equalTo: view.leftAnchor),
|
welcomeIllustrationView.cloudFirstImageView.heightAnchor.constraint(equalToConstant: 113 / traitCollection.displayScale * imageSizeScale),
|
||||||
// welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.bottomAnchor.constraint(equalTo: sloganLabel.topAnchor),
|
])
|
||||||
// ])
|
welcomeIllustrationView.cloudSecondImageView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
// welcomeIllustrationView.welcomeIllustrationView.sca
|
view.addSubview(welcomeIllustrationView.cloudSecondImageView)
|
||||||
// view.bringSubviewToFront(sloganLabel)
|
NSLayoutConstraint.activate([
|
||||||
|
welcomeIllustrationView.cloudSecondImageView.topAnchor.constraint(equalTo: logoImageView.bottomAnchor),
|
||||||
|
welcomeIllustrationView.cloudSecondImageView.rightAnchor.constraint(equalTo: logoImageView.rightAnchor, constant: 20),
|
||||||
|
welcomeIllustrationView.cloudSecondImageView.widthAnchor.constraint(equalToConstant: 152 / traitCollection.displayScale),
|
||||||
|
welcomeIllustrationView.cloudSecondImageView.heightAnchor.constraint(equalToConstant: 96 / traitCollection.displayScale),
|
||||||
|
welcomeIllustrationView.cloudFirstImageView.topAnchor.constraint(equalTo: welcomeIllustrationView.cloudSecondImageView.bottomAnchor),
|
||||||
|
])
|
||||||
|
welcomeIllustrationView.cloudThirdImageView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
view.addSubview(welcomeIllustrationView.cloudThirdImageView)
|
||||||
|
NSLayoutConstraint.activate([
|
||||||
|
logoImageView.topAnchor.constraint(equalTo: welcomeIllustrationView.cloudThirdImageView.bottomAnchor, constant: 10),
|
||||||
|
welcomeIllustrationView.cloudThirdImageView.rightAnchor.constraint(equalTo: view.centerXAnchor),
|
||||||
|
welcomeIllustrationView.cloudThirdImageView.widthAnchor.constraint(equalToConstant: 126 / traitCollection.displayScale),
|
||||||
|
welcomeIllustrationView.cloudThirdImageView.heightAnchor.constraint(equalToConstant: 68 / traitCollection.displayScale),
|
||||||
|
])
|
||||||
|
|
||||||
|
welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
view.addSubview(welcomeIllustrationView.elephantOnAirplaneWithContrailImageView)
|
||||||
|
NSLayoutConstraint.activate([
|
||||||
|
welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.leftAnchor.constraint(equalTo: view.leftAnchor),
|
||||||
|
welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.bottomAnchor.constraint(equalTo: sloganLabel.topAnchor),
|
||||||
|
// make a little bit large
|
||||||
|
welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.widthAnchor.constraint(equalToConstant: 656 / traitCollection.displayScale * imageSizeScale),
|
||||||
|
welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.heightAnchor.constraint(equalToConstant: 195 / traitCollection.displayScale * imageSizeScale),
|
||||||
|
])
|
||||||
|
view.bringSubviewToFront(logoImageView)
|
||||||
|
view.bringSubviewToFront(sloganLabel)
|
||||||
|
}
|
||||||
|
|
||||||
view.addSubview(signInButton)
|
view.addSubview(signInButton)
|
||||||
view.addSubview(signUpButton)
|
view.addSubview(signUpButton)
|
||||||
|
@ -124,8 +153,8 @@ extension WelcomeViewController {
|
||||||
super.viewSafeAreaInsetsDidChange()
|
super.viewSafeAreaInsetsDidChange()
|
||||||
|
|
||||||
// make illustration bottom over the bleeding
|
// make illustration bottom over the bleeding
|
||||||
let overlap: CGFloat = 100
|
let overlap: CGFloat = 145
|
||||||
welcomeIllustrationViewBottomAnchorLayoutConstraint.constant = overlap - view.safeAreaInsets.bottom
|
welcomeIllustrationViewBottomAnchorLayoutConstraint?.constant = overlap - view.safeAreaInsets.bottom
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue