Views

Monday Hero can automatically understand the views, and convert design to Swift/Kotlin code.

View Design to Code

A view expresses a single item on the user interface. It could be a shape like a rectangle, a control item such as a button, an input text field, or an image. A view is a defined specific area on the screen which can be configured to respond to touch events, or it can be used for enriching the user experience.

As can be seen below, the Follow button has designed with a blue rectangle and a text. Monday Hero automatically detected that the blue rectangle/background is a View and the text is a Label. Let's check how Monday Hero detected thisViewand generate its code. The blue rectangle on the image below is detected as Viewand calledcontainerView, the code will be generated like below.

A View example.

On this page, Viewcode will be explained, detailed info about texts and images can be found on the next pages. Learn more about images here. Learn more about texts here.

Generated iOS/Android Code of the View

The code will be generated like below and constraints are defined in the Storyboard file.

iOS

import UIKit

class ProfilePageViewController: UIViewController {
	
	// MARK: - Properties
	@IBOutlet private weak var containerView: UIView!

	override func viewDidLoad() {
		super.viewDidLoad()
		setupViews()
		setupLayout()
	}
}

extension ProfilePageViewController {
	private func setupViews() {

		containerView.layer.cornerRadius = 6
		containerView.layer.masksToBounds =  true 
		containerView.backgroundColor = UIColor.cerulean

	}

	private func setupLayout() { 
		//Constraints are defined in Storyboard file.
	}
}

Android

<!--activity_profile_page.xml-->
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<androidx.constraintlayout.widget.ConstraintLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".ProfilePageActivity"
	android:background="?attr/daisy">
	
	<View
	android:id="@+id/containerView"
	android:layout_width="78dp"
	android:layout_height="26dp"
	android:background="@drawable/baseview_background_drawable"
	android:layout_marginEnd="56dp"
	android:layout_marginTop="42dp"
	android:layout_marginBottom="37dp"
	app:layout_constraintStart_toEndOf="@+id/profilPictureImageView"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintTop_toBottomOf="@+id/nolanAlexTextView"
	app:layout_constraintBottom_toTopOf="@+id/alexanderNolanTextView"/>
	
</androidx.constraintlayout.widget.ConstraintLayout>

<!--Drawables/containerview_background_drawable.xml-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="?attr/cerulean"/>
      <corners android:radius="6dp"/>
    </shape>
  </item>
</selector>

You can also read and see how these Views become a component together. You can check how to create a button component here.