mirror of https://github.com/oxen-io/session-ios
Implement landing screen redesign
Niels Andriesse
5 years ago
parent
7ea5e5bd46
commit
1972f1526d
@ -0,0 +1,108 @@
|
|||||||
|
|
||||||
|
final class FakeChatView : UIView {
|
||||||
|
private let spacing = Values.mediumSpacing
|
||||||
|
|
||||||
|
private lazy var chatBubbles = [
|
||||||
|
getChatBubble(withText: NSLocalizedString("What is Loki Messenger? A completely decentralised private messaging application for all platforms.", comment: ""), wasSentByCurrentUser: true),
|
||||||
|
getChatBubble(withText: NSLocalizedString("So no metadata collection, or personally identifiable information? How does it work?", comment: ""), wasSentByCurrentUser: false),
|
||||||
|
getChatBubble(withText: NSLocalizedString("Through a combination of advanced blockchain techniques including onion routing through Lokinet's private servers.", comment: ""), wasSentByCurrentUser: true),
|
||||||
|
getChatBubble(withText: NSLocalizedString("Friends don't let friends use compromised messengers. You're welcome.", comment: ""), wasSentByCurrentUser: true)
|
||||||
|
]
|
||||||
|
|
||||||
|
private lazy var scrollView: UIScrollView = {
|
||||||
|
let result = UIScrollView()
|
||||||
|
result.showsVerticalScrollIndicator = false
|
||||||
|
return result
|
||||||
|
}()
|
||||||
|
|
||||||
|
override init(frame: CGRect) {
|
||||||
|
super.init(frame: frame)
|
||||||
|
setUpViewHierarchy()
|
||||||
|
animate()
|
||||||
|
}
|
||||||
|
|
||||||
|
required init?(coder: NSCoder) {
|
||||||
|
super.init(coder: coder)
|
||||||
|
setUpViewHierarchy()
|
||||||
|
animate()
|
||||||
|
}
|
||||||
|
|
||||||
|
private func setUpViewHierarchy() {
|
||||||
|
let stackView = UIStackView(arrangedSubviews: chatBubbles)
|
||||||
|
stackView.axis = .vertical
|
||||||
|
stackView.spacing = spacing
|
||||||
|
stackView.alignment = .fill
|
||||||
|
stackView.set(.width, to: UIScreen.main.bounds.width)
|
||||||
|
stackView.layoutMargins = UIEdgeInsets(top: 8, leading: Values.veryLargeSpacing, bottom: 8, trailing: Values.veryLargeSpacing)
|
||||||
|
stackView.isLayoutMarginsRelativeArrangement = true
|
||||||
|
scrollView.addSubview(stackView)
|
||||||
|
stackView.pin(to: scrollView)
|
||||||
|
addSubview(scrollView)
|
||||||
|
scrollView.pin(to: self)
|
||||||
|
}
|
||||||
|
|
||||||
|
private func getChatBubble(withText text: String, wasSentByCurrentUser: Bool) -> UIView {
|
||||||
|
let result = UIView()
|
||||||
|
let bubbleView = UIView()
|
||||||
|
bubbleView.set(.width, to: Values.fakeChatBubbleWidth)
|
||||||
|
bubbleView.layer.cornerRadius = Values.fakeChatBubbleCornerRadius
|
||||||
|
let backgroundColor = wasSentByCurrentUser ? Colors.accent : Colors.fakeChatBubbleBackground
|
||||||
|
bubbleView.backgroundColor = backgroundColor
|
||||||
|
let label = UILabel()
|
||||||
|
let textColor = wasSentByCurrentUser ? Colors.fakeChatBubbleText : Colors.text
|
||||||
|
label.textColor = textColor
|
||||||
|
label.font = .boldSystemFont(ofSize: Values.mediumFontSize)
|
||||||
|
label.numberOfLines = 0
|
||||||
|
label.lineBreakMode = .byWordWrapping
|
||||||
|
label.text = text
|
||||||
|
bubbleView.addSubview(label)
|
||||||
|
label.pin(to: bubbleView, withInset: Values.smallSpacing)
|
||||||
|
result.addSubview(bubbleView)
|
||||||
|
bubbleView.pin(.top, to: .top, of: result)
|
||||||
|
result.pin(.bottom, to: .bottom, of: bubbleView)
|
||||||
|
if wasSentByCurrentUser {
|
||||||
|
bubbleView.pin(.leading, to: .leading, of: result)
|
||||||
|
} else {
|
||||||
|
result.pin(.trailing, to: .trailing, of: bubbleView)
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
private func animate() {
|
||||||
|
let animationDuration = Values.fakeChatAnimationDuration
|
||||||
|
let delayBetweenMessages = Values.fakeChatDelay
|
||||||
|
chatBubbles.forEach { $0.alpha = 0 }
|
||||||
|
Timer.scheduledTimer(withTimeInterval: Values.fakeChatStartDelay, repeats: false) { [weak self] _ in
|
||||||
|
self?.showChatBubble(at: 0)
|
||||||
|
Timer.scheduledTimer(withTimeInterval: delayBetweenMessages, repeats: false) { _ in
|
||||||
|
self?.showChatBubble(at: 1)
|
||||||
|
Timer.scheduledTimer(withTimeInterval: delayBetweenMessages, repeats: false) { _ in
|
||||||
|
self?.showChatBubble(at: 2)
|
||||||
|
UIView.animate(withDuration: animationDuration) {
|
||||||
|
guard let self = self else { return }
|
||||||
|
self.scrollView.contentOffset = CGPoint(x: 0, y: self.chatBubbles[0].height() + self.spacing)
|
||||||
|
}
|
||||||
|
Timer.scheduledTimer(withTimeInterval: delayBetweenMessages, repeats: false) { _ in
|
||||||
|
self?.showChatBubble(at: 3)
|
||||||
|
UIView.animate(withDuration: animationDuration) {
|
||||||
|
guard let self = self else { return }
|
||||||
|
self.scrollView.contentOffset = CGPoint(x: 0, y: self.chatBubbles[0].height() + self.spacing + self.chatBubbles[1].height() + self.spacing)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private func showChatBubble(at index: Int) {
|
||||||
|
let chatBubble = chatBubbles[index]
|
||||||
|
UIView.animate(withDuration: Values.fakeChatAnimationDuration) {
|
||||||
|
chatBubble.alpha = 1
|
||||||
|
}
|
||||||
|
let scale = Values.fakeChatMessagePopAnimationStartScale
|
||||||
|
chatBubble.transform = CGAffineTransform(scaleX: scale, y: scale)
|
||||||
|
UIView.animate(withDuration: Values.fakeChatAnimationDuration, delay: 0, usingSpringWithDamping: 0.68, initialSpringVelocity: 4, options: .curveEaseInOut, animations: {
|
||||||
|
chatBubble.transform = CGAffineTransform(scaleX: 1, y: 1)
|
||||||
|
}, completion: nil)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
|
||||||
|
final class LandingVC : UIViewController {
|
||||||
|
|
||||||
|
// MARK: Settings
|
||||||
|
override var preferredStatusBarStyle: UIStatusBarStyle { return .lightContent }
|
||||||
|
|
||||||
|
// MARK: Lifecycle
|
||||||
|
override func viewDidLoad() {
|
||||||
|
// Set gradient background
|
||||||
|
view.backgroundColor = .clear
|
||||||
|
let gradient = Gradients.defaultLokiBackground
|
||||||
|
view.setGradient(gradient)
|
||||||
|
// Set up navigation bar
|
||||||
|
let navigationBar = navigationController!.navigationBar
|
||||||
|
navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
|
||||||
|
navigationBar.shadowImage = UIImage()
|
||||||
|
navigationBar.isTranslucent = false
|
||||||
|
navigationBar.barTintColor = Colors.navigationBarBackground
|
||||||
|
// Set up logo image view
|
||||||
|
let logoImageView = UIImageView()
|
||||||
|
logoImageView.image = #imageLiteral(resourceName: "Loki")
|
||||||
|
logoImageView.contentMode = .scaleAspectFit
|
||||||
|
logoImageView.set(.width, to: 32)
|
||||||
|
logoImageView.set(.height, to: 32)
|
||||||
|
navigationItem.titleView = logoImageView
|
||||||
|
// Set up title label
|
||||||
|
let titleLabel = UILabel()
|
||||||
|
titleLabel.textColor = Colors.text
|
||||||
|
titleLabel.font = .boldSystemFont(ofSize: Values.veryLargeFontSize)
|
||||||
|
titleLabel.text = NSLocalizedString("Your Loki Messenger begins here...", comment: "")
|
||||||
|
titleLabel.numberOfLines = 0
|
||||||
|
titleLabel.lineBreakMode = .byWordWrapping
|
||||||
|
// Set up title label container
|
||||||
|
let titleLabelContainer = UIView()
|
||||||
|
titleLabelContainer.addSubview(titleLabel)
|
||||||
|
titleLabel.pin(.leading, to: .leading, of: titleLabelContainer, withInset: Values.veryLargeSpacing)
|
||||||
|
titleLabel.pin(.top, to: .top, of: titleLabelContainer)
|
||||||
|
titleLabelContainer.pin(.trailing, to: .trailing, of: titleLabel, withInset: Values.veryLargeSpacing)
|
||||||
|
titleLabelContainer.pin(.bottom, to: .bottom, of: titleLabel)
|
||||||
|
// Set up fake chat view
|
||||||
|
let fakeChatView = FakeChatView()
|
||||||
|
// Set up main stack view
|
||||||
|
let mainStackView = UIStackView(arrangedSubviews: [ titleLabelContainer, fakeChatView ])
|
||||||
|
mainStackView.axis = .vertical
|
||||||
|
mainStackView.spacing = Values.mediumSpacing // The fake chat view has an internal top margin
|
||||||
|
mainStackView.alignment = .fill
|
||||||
|
view.addSubview(mainStackView)
|
||||||
|
mainStackView.pin(.leading, to: .leading, of: view)
|
||||||
|
view.pin(.trailing, to: .trailing, of: mainStackView)
|
||||||
|
mainStackView.set(.height, to: Values.fakeChatViewHeight)
|
||||||
|
mainStackView.center(.vertical, in: view)
|
||||||
|
// Set up view
|
||||||
|
let screen = UIScreen.main.bounds
|
||||||
|
view.set(.width, to: screen.width)
|
||||||
|
view.set(.height, to: screen.height)
|
||||||
|
// Set up register button
|
||||||
|
let registerButton = Button(style: .prominentFilled, size: .large)
|
||||||
|
registerButton.setTitle(NSLocalizedString("Create Account", comment: ""), for: UIControl.State.normal)
|
||||||
|
registerButton.titleLabel!.font = .boldSystemFont(ofSize: Values.mediumFontSize)
|
||||||
|
// Set up restore button
|
||||||
|
let restoreButton = Button(style: .prominentOutline, size: .large)
|
||||||
|
restoreButton.setTitle(NSLocalizedString("Continue your Loki Messenger", comment: ""), for: UIControl.State.normal)
|
||||||
|
restoreButton.titleLabel!.font = .boldSystemFont(ofSize: Values.mediumFontSize)
|
||||||
|
// Set up button stack view
|
||||||
|
let buttonStackView = UIStackView(arrangedSubviews: [ registerButton, restoreButton ])
|
||||||
|
buttonStackView.axis = .vertical
|
||||||
|
buttonStackView.spacing = Values.mediumSpacing
|
||||||
|
buttonStackView.alignment = .fill
|
||||||
|
view.addSubview(buttonStackView)
|
||||||
|
buttonStackView.pin(.leading, to: .leading, of: view, withInset: Values.massiveSpacing)
|
||||||
|
view.pin(.trailing, to: .trailing, of: buttonStackView, withInset: Values.massiveSpacing)
|
||||||
|
view.pin(.bottom, to: .bottom, of: buttonStackView, withInset: Values.restoreButtonBottomOffset)
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue