Renetik Layout

Library for writing layouts in swift.

class AuthenticationView: CSScrollView {

let titleView = UITextView.construct().asLabel().also {
$0.text = Strings.authentication_title
$0.textAlignment = .center
$0.font = Fonts.title
$0.textColor = Colors.sodb_blue_text
}

let contentView = UIView.construct(defaultSize: true).also {
$0.border(width: 2, color: Colors.sodb_gray_border1, radius: 1)
}

let subTitleView = UITextView.construct().asLabel().also {
$0.text = Strings.authentication_subtitle
$0.font = Fonts.subtitle
$0.textColor = Colors.sodb_blue_text
}

let birthNumberTitleView = UITextView.construct().asLabel().also {
$0.text = Strings.authentication_birth_number_title
$0.font = Fonts.fieldTitle
$0.textColor = Colors.sodb_blue_text
}

let numberField = CSTextField.construct().also {
$0.isSecureTextEntry = true
$0.font = Fonts.fieldTitle
$0.border(width: 1, color: Colors.sodb_gray_border1, radius: 1)
$0.edgeInsets = UIEdgeInsets(top: 4, left: 10, bottom: 4, right: 10)
}
let separatorView = UITextView.construct().asLabel().also {
$0.text = "/"
$0.font = Fonts.subtitle
}
let numberField2 = CSTextField.construct().also {
$0.isSecureTextEntry = true
$0.font = Fonts.fieldTitle
$0.border(width: 1, color: Colors.sodb_gray_border1, radius: 1)
$0.edgeInsets = UIEdgeInsets(top: 4, left: 10, bottom: 4, right: 10)
}
let showPasswordButton = CSMaterialControl.construct(defaultSize: true).also {
$0.add(view: CSImageView.construct()) {
$0.image = Images.eye
$0.tintColor = Colors.sodb_blue_text
}.matchParent(margin: 10)
}

let loginButton = CSMaterialButton.construct().also {
$0.text = Strings.authentication_button_login
$0.font = Fonts.button
$0.textColor = .white
$0.backgroundColor = Colors.sodb_blue
}

let noBirthNumberButton = CSMaterialButton.construct().also {
$0.text = Strings.authentication_button_no_birth_number
$0.font = Fonts.textButton
$0.textColor = Colors.sodb_blue_text
$0.backgroundColor = .clear
}

let separator = UIView.construct().background(Colors.sodb_gray_border1)

let loginByIdTitleView = UITextView.construct().asLabel().also {
$0.text = Strings.authentication_title_login_by_id
$0.font = Fonts.subtitle
$0.textColor = Colors.sodb_blue_text
}

let loginByIdSubtitleView = UITextView.construct().asLabel().also {
$0.text = Strings.authentication_subtitle_login_by_id
$0.font = Fonts.body
$0.textColor = Colors.sodb_gray_text
}

let loginByIdButton = CSMaterialButton.construct().also {
$0.text = Strings.authentication_button_login
$0.font = Fonts.button
$0.textColor = Colors.sodb_blue_text
$0.backgroundColor = .clear
$0.border(width: 1, color: Colors.sodb_blue, radius: 1)
}

let footerView = CSImageView.construct().also {
$0.image = Images.footerBackground
$0.tintColor = Colors.sodb_gray1
}

override func onCreateLayout() {
super.onCreateLayout()
add(titleView).from(top: 28).matchParentWidth(margin: 8).heightToFit()
add(contentView) { [self] contentView in
contentView.add(subTitleView).from(top: 20)
.matchParentWidth(margin: Values.horizontalPadding).heightToFit()
contentView.add(birthNumberTitleView).fromPrevious(top: 16)
.matchParentWidth(margin: Values.horizontalPadding).heightToFit()
contentView.add(UIView.construct(defaultSize: true)) { fieldsRowView in
fieldsRowView.add(numberField).from(left: 0).width(125, height: 40).centeredVertical()
fieldsRowView.add(separatorView).fromPrevious(left: 8).resizeToFit().centeredVertical()
fieldsRowView.add(numberField2).fromPrevious(left: 8).width(90, height: 40).centeredVertical()
fieldsRowView.add(showPasswordButton).fromPrevious(left: 8).size(48).centeredVertical()
}.fromPrevious(top: 8).matchParentWidth(margin: Values.horizontalPadding).heightToFitSubviews()
contentView.add(UIView.construct(defaultSize: true)) { buttonsRowView in
buttonsRowView.add(loginButton).from(left: 0)
.resizeToFit().add(width: 16 + 16, height: 1 + 1).centeredVertical()
buttonsRowView.add(noBirthNumberButton).fromPrevious(left: 8)
.resizeToFit().add(width: 16 + 16, height: 1 + 1).centeredVertical()
}.fromPrevious(top: 16).matchParentWidth(margin: Values.horizontalPadding).heightToFitSubviews()
contentView.add(separator).fromPrevious(top: 8).matchParentWidth().height(2)
contentView.add(loginByIdTitleView).fromPrevious(top: 24)
.matchParentWidth(margin: Values.horizontalPadding).heightToFit()
contentView.add(loginByIdSubtitleView).fromPrevious(top: 8)
.matchParentWidth(margin: Values.horizontalPadding).heightToFit()
contentView.add(loginByIdButton).fromPrevious(top: 16).from(left: Values.horizontalPadding)
.resizeToFit().add(width: 16 + 16, height: 1 + 1)
}.fromPrevious(top: 24).matchParentWidth(margin: Values.horizontalMargin).heightByLastSubview(padding: 20)
add(footer: footerView, margin: 8)
// debugLayoutBySubviewsRandomBackgroundColor()
}
}

--

--

--

Professional software developer, native mobile applications iOS & Android, custom web frontends.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Quick Look at Google Cloud Vision API on Android

env0: Now SOC 2 Type II Compliant

Building an Enterprise Data Lake On Cloud — Security

Google Cloud Badges: The Journey so far…

Erasure Coding For The Masses

A Guide to Using the CSS Overflow Property

Why You Should Never Consent to a Coding Test in an Interview

Ulog: Will We Have Lost Even Our Eyes To Synthetism? — Surpassinggoogle

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
René Doháň

René Doháň

Professional software developer, native mobile applications iOS & Android, custom web frontends.

More from Medium

Olivier Messiaen, piano, vocal ensemble; in his unique language

You’ve probably sat down on an airplane, and heard the voice over the loudspeakers saying, “If…

Customize your map backgrounds

LOVE WARRIORS — Glennon Doyle