# Convert to Grid

## Grid to Swift/Android code

If you need to display scrolling elements dynamically, you should check if they are [lists](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/list-grid-design-to-ios-android-code/list-design-to-ios-android-code) or grids. You can find [how to understand the difference here](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/list-grid-design-to-ios-android-code). If you have decided that you want to create Grids, this is right please to read.

An example of a grid is below. In the image, the cell prototype repeats itself with different data inside. 

![](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MKpiCsd9a5WV-sXNlL4%2F-MKpk-F_dLM_rKdOHkAj%2FGroup%203.png?alt=media\&token=07fd63cd-5bd9-4ea5-bce9-4854352ee778)

 

Grids have different names in iOS and Android. Grids are explained below with the code and details.

### Generated code for iOS/Android and Details

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

## CollectionView (Horizontal / Vertical) 

A grid is called `CollectionView` in Swift language.

A CollectionView object is responsible for managing an ordered collection of data items and presenting them in customizable layouts.

It has two directions as **Vertical** and **Horizontal**. You can select the one that fits your case. In the case below, you can see the CollectionView-Vertical and its generated code.

![](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGrIvvQkqS1zsILEfc7%2F-MGsUYUQcgIKaef_BBCI%2Fcollection.gif?alt=media\&token=9e10239d-4c92-464b-b24b-35ec43e42c98)

{% code title="ProfilePage.swift" %}

```swift
import UIKit

class ProfilePage: UIViewController {
	
//Connection from an Interface Builder to a UI component
@IBOutlet private weak var userPhotosCollectionView: UICollectionView!

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

	private func setupViews() {
		userPhotosCollectionView.backgroundColor = UIColor.clear
		self.userPhotosCollectionView.dataSource = self
		}
}

// MARK: - Collection View DataSource

extension ProfilePage: UICollectionViewDataSource {
	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{
		return 10
	}

	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
        
		let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PictureCollectionViewCell", for: indexPath) as! PictureCollectionViewCell
		return cell
	}
}
```

{% endcode %}

The cell is defined in a separate file.

{% code title="PictureCollectionViewCell.swift" %}

```swift
import UIKit

class PictureCollectionViewCell: UICollectionViewCell {
	
	// MARK: - Properties

	@IBOutlet private weak var pic03ImageView: UIImageView!

    
	override init(frame: CGRect) {
		super.init(frame: frame)
		self.setupViews()
	}

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

	func setupViews() {
		//The properties of the code are defined in Storyboard. 
	}
}
```

{% endcode %}
{% endtab %}

{% tab title="Android" %}

## RecyclerView-GridLayoutManager

`GridLayoutManager` is the `RecyclerView.LayoutManager` implementation that shows items in a grid. It is responsible for managing an ordered collection of data items and presenting them in customizable layouts.

It has two directions as **Vertical** and **Horizontal**. You can select the one that fits your case. In the case below, you can see the GridLayoutManager-Vertical and its generated code.

![](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MHFANrCOC6gc2K7q24z%2F-MHFWG4XSYcqtuCWjoZz%2Fimage.png?alt=media\&token=3424f664-58a6-40f3-bbd1-07940b0e3372)

Let's see the generated code for `GridLayoutManager`.

```markup
<!--activityProfilePage.xml-->
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/userPicturesRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/userpicturesrecyclerview_background_drawable"
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
tools:listitem="@layout/layout_user_picture_card_view"
app:spanCount="3"
android:orientation="vertical"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="1dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/photosTextView"
app:layout_constraintBottom_toTopOf="@+id/profileIconImageView"/>
```

The card is defined in a separate file.

```markup
<!--layoutUserPictureCardView.xml-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
	
<ImageView
android:id="@+id/pic03ImageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@drawable/pic04"
android:scaleType="centerCrop"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
	
</androidx.constraintlayout.widget.ConstraintLayout>

```

{% endtab %}
{% endtabs %}