Grid - Monday Hero

If you need to display scrolling elements dynamically, you should check if they are lists or grids. Lists are vertical, and grids can be vertical or horizontal. In lists, only 1 cell can be in a column but for Grids, it can be more than 1 cell in a column. Here is an example of both of them:
Lists and Grids
This page is created for grids. 
If you need to display scrolling elements dynamically, you should check if they are lists or grids. You can find how to understand the difference here. If you have decided that you want to create Grids, this is the right place to read.
An example of a grid is below. In the image, the cell prototype repeats itself with different data inside. 
Grids have different names in iOS and Android. Grids are explained below with the code and details.
Generated code for iOS/Android and Details
iOS
Android
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.
CollectionView example.
ProfilePage.swift
1
import UIKit
2
​
3
class ProfilePage: UIViewController {
4
	
5
//Connection from an Interface Builder to a UI component
6
@IBOutlet private weak var userPhotosCollectionView: UICollectionView!
7
​
8
		override func viewDidLoad() {
9
			super.viewDidLoad()
10
			setupViews()
11
	}
12
​
13
	private func setupViews() {
14
		userPhotosCollectionView.backgroundColor = UIColor.clear
15
		self.userPhotosCollectionView.dataSource = self
16
		}
17
}
18
​
19
// MARK: - Collection View DataSource
20
​
21
extension ProfilePage: UICollectionViewDataSource {
22
	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{
23
		return 10
24
	}
25
​
26
	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
27
        
28
		let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PictureCollectionViewCell", for: indexPath) as! PictureCollectionViewCell
29
		return cell
30
	}
31
}
Copied!
The cell is defined in a separate file.
PictureCollectionViewCell.swift
1
import UIKit
2
​
3
class PictureCollectionViewCell: UICollectionViewCell {
4
	
5
	// MARK: - Properties
6
​
7
	@IBOutlet private weak var pic03ImageView: UIImageView!
8
​
9
    
10
	override init(frame: CGRect) {
11
		super.init(frame: frame)
12
		self.setupViews()
13
	}
14
​
15
	required init?(coder aDecoder: NSCoder) {
16
		super.init(coder: aDecoder)
17
	}
18
​
19
	func setupViews() {
20
		//The properties of the code are defined in Storyboard. 
21
	}
22
}
Copied!
RecyclerView-GridLayoutManager
⚠️This feature is available in only Mac App. Web App support for Android is coming soon.
If you need to install the desktop app, click here.​
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.
Let's see the generated code for GridLayoutManager.
1
<!--activityProfilePage.xml-->
2
<androidx.recyclerview.widget.RecyclerView
3
android:id="@+id/userPicturesRecyclerView"
4
android:layout_width="0dp"
5
android:layout_height="0dp"
6
android:background="@drawable/userpicturesrecyclerview_background_drawable"
7
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
8
tools:listitem="@layout/layout_user_picture_card_view"
9
app:spanCount="3"
10
android:orientation="vertical"
11
android:layout_marginStart="20dp"
12
android:layout_marginEnd="20dp"
13
android:layout_marginBottom="1dp"
14
app:layout_constraintStart_toStartOf="parent"
15
app:layout_constraintEnd_toEndOf="parent"
16
app:layout_constraintTop_toBottomOf="@+id/photosTextView"
17
app:layout_constraintBottom_toTopOf="@+id/profileIconImageView"/>
Copied!
The card is defined in a separate file.
1
<!--layoutUserPictureCardView.xml-->
2
<androidx.constraintlayout.widget.ConstraintLayout
3
android:layout_width="wrap_content"
4
android:layout_height="wrap_content">
5
	
6
<ImageView
7
android:id="@+id/pic03ImageView"
8
android:layout_width="0dp"
9
android:layout_height="wrap_content"
10
android:src="@drawable/pic04"
11
android:scaleType="centerCrop"
12
app:layout_constraintStart_toStartOf="parent"
13
app:layout_constraintEnd_toEndOf="parent"
14
app:layout_constraintTop_toTopOf="parent"
15
app:layout_constraintBottom_toBottomOf="parent"/>
16
	
17
</androidx.constraintlayout.widget.ConstraintLayout>
18
​
Copied!

List

Video Player

Last modified 11mo ago

Copy link

Contents

Generated code for iOS/Android and Details