# Views

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.

Monday Hero names **rectangles** and **ovals** on the design as **Views**. However, it's also possible to convert views into components like buttons or create Custom Views to group elements on the page like below: 

![Custom Views and a Button](https://479678609-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-Mc4mrUfZT4bJ53hd_Xa%2F-Mc4pWYlyjaYMn5JcWFt%2FGroup%20456.png?alt=media\&token=bf5e2da0-454d-4104-a624-30bce481e97e)

### Automatically Detected Views

On any design, rectangles and ovals are automatically detected as Views on Monday Hero. It's possible to use them as Views or convert them into components like buttons or create Custom Views to group them. 

As can be seen below, the **Follow** button has designed with a blue rectangle and text. Monday Hero automatically detected that the blue rectangle/background is a `View` and the text is a `Label`.  

![A View example.](https://479678609-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MRPbFMRmm2tXLR40A4Z%2F-MRZBwDmJZqvC9SxZGU2%2FScreen%20Shot%202021-01-21%20at%2012.08.22.png?alt=media\&token=6c750561-d66f-49d6-97dd-5eff2081985d)

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

{% tabs %}
{% tab title="iOS" %}

```swift
import UIKit

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

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

extension ProfilePageViewController {
	private func setupViews() {

		rectangleView.layer.cornerRadius = 6
		rectangleView.layer.masksToBounds =  true 
		rectangleView.backgroundColor = UIColor.cloudBlue

	}

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

{% endtab %}

{% tab title="Android" %}

```markup
<!--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>
```

```markup
<!--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>
```

{% endtab %}
{% endtabs %}

### Custom Views

In order to group elements on the page and reuse them on other pages, it's possible to create custom components. Here is how to do it:&#x20;

![Creating a Custom View](https://479678609-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-Mc4s803un4zYe5bU3AN%2F-Mc4x4pHCOVwdfdLqwnk%2FGroup%20459.png?alt=media\&token=ba985952-d353-47e1-b419-c566f210165c)

When it's done, you can see it on the components menu and you can get both pure and xib code in iOS:&#x20;

![Resuable View Code](https://479678609-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-Mc4s803un4zYe5bU3AN%2F-Mc4ygy3ULJsH9P-OgHp%2FGroup%20460.png?alt=media\&token=501eccff-2d0d-4f3f-a63b-16d4dfc11204)

&#x20;

The code will be generated like below:&#x20;

{% tabs %}
{% tab title="iOS" %}

```swift
import UIKit

class FormItemView: UIView {
	// MARK: - ContentView
	@IBOutlet weak var view: UIView!

	// MARK: - Properties
	@IBOutlet private weak var usernameLabel: UILabel!
	@IBOutlet private weak var emailTextField: FormTextField!

	// MARK: - Initializers
	override init(frame: CGRect) {
		super.init(frame: frame)
		initialize()
	}

	required init?(coder aDecoder: NSCoder) {
		super.init(coder: aDecoder)
		initialize()
	}

	init() {
		super.init(frame: .zero)
		initialize()
	}

	func initialize() {
		initializeNib()
		applyDefaultStyle()
	}

	func initializeNib() {
		Bundle.main.loadNibNamed(String(describing: type(of:self)), owner: self, options: nil)
		addSubview(view)
		view.frame = self.frame
		view.translatesAutoresizingMaskIntoConstraints = false
		NSLayoutConstraint.activate([
			self.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0),
			self.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0),
			self.topAnchor.constraint(equalTo: view.topAnchor, constant: 0),
			self.bottomAnchor.constraint(lessThanOrEqualTo: view.bottomAnchor, constant: 0),
		])
	}

	// MARK: - Styling
	func applyDefaultStyle() {

		usernameLabel.textColor = UIColor.black
		usernameLabel.numberOfLines = 0
		usernameLabel.font = UIFont.textStyle5
		usernameLabel.textAlignment = .left

		emailTextField.set(placeholder: NSLocalizedString("travel.lover", comment: ""))


	}

	func set(usernameLabelText: String, emailTextFieldPlaceholder: String){
		usernameLabel.text = usernameLabelText
		emailTextField.placeholder = emailTextFieldPlaceholder
	}

}
```

{% endtab %}
{% endtabs %}

You can also read and see how these Views become a component together. [You can check how to create a button component here.](https://learn.mondayhero.io/design-to-swift/creating-components/system-components/broken-reference)