Building An Interactive Grid View

Overview

Building An Interactive Grid View

Goals

This demo shows a few techniques on how to build a re-ordable grid view based on stock UICollectionView API.

Here are the main UIKit APIs used by this demo:

  • UICollectionViews compositional layout API.
  • UICollectionViewDiffableDataSource and its reordering support.
  • UIContextMenuConfiguration for presenting optional menus from each displayed cell.

The view is driven by a two-column layout that supports two cell sizes:

  • Compact (half width)
  • Regular (full width)

Other goals

  • The layout must dynamically adjust while the user drags cells arounds.
  • The user must be able to long-press on cell to present a standard iOS context menu.

Additional details can be found in this blog post.

You might also like...
A UITableView extension that enables cell insertion from the bottom of a table view.
A UITableView extension that enables cell insertion from the bottom of a table view.

ReverseExtension UITableView extension that enabled to insert cell from bottom of tableView. Concept It is difficult to fill a tableview content from

TableViews - Emoji Table View For iOS With Swift
TableViews - Emoji Table View For iOS With Swift

TableViews Hello! This is EmojiTableView. Let me introduce you my first app when

Quinbay - The project covers dynamic tableview cell height, MVVM and clean Architecture and Prefetching Table Data From server or infinite scroll view 🌊 - Jelly is a library for animated, non-interactive & interactive viewcontroller  transitions and presentations with the focus on a simple and yet flexible API.
🌊 - Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexible API.

Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexibl

🌊 - Jelly is a library for animated, non-interactive & interactive viewcontroller  transitions and presentations with the focus on a simple and yet flexible API.
🌊 - Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexible API.

Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexibl

🏞 A simple iOS photo and video browser with optional grid view, captions and selections written in Swift5.0
🏞 A simple iOS photo and video browser with optional grid view, captions and selections written in Swift5.0

Introduction 🏞 MediaBrowser can display one or more images or videos by providing either UIImage objects, PHAsset objects, or URLs to library assets,

A waterfall grid layout view for SwiftUI.
A waterfall grid layout view for SwiftUI.

WaterfallGrid A waterfall grid layout view for SwiftUI. Features Irregular grid of content. Columns number different per device orientation. Spacing a

A flexible grid layout view for SwiftUI
A flexible grid layout view for SwiftUI

πŸ“± GridStack A flexible grid layout view for SwiftUI. WWDC20 Update Apple ο£Ώ released LazyVGrid and LazyHGrid at WWDC20. If you are fine to only suppor

A simple iOS photo and video browser with grid view, captions and selections.
A simple iOS photo and video browser with grid view, captions and selections.

MWPhotoBrowser A simple iOS photo and video browser with optional grid view, captions and selections. MWPhotoBrowser can display one or more images or

A grid layout view for SwiftUI
A grid layout view for SwiftUI

Update July 2020 - latest SwiftUI now has built-in components to do this, which should be used instead. FlowStack FlowStack is a SwiftUI component for

The most powerful Grid container missed in SwiftUI
The most powerful Grid container missed in SwiftUI

Grid Grid view inspired by CSS Grid and written with SwiftUI We are a development agency building phenomenal apps. Overview Grid is a powerful and eas

A Swift library for Panasonic AMG88 Grid-EYE thermopile sensors.

AMG88xx A Swift library for the Panasonic AMG88 family of sensors. Summary This library can read temperature data from the AMG88 thermopile sensor. Us

Grid and Circular Menu for iOS.
Grid and Circular Menu for iOS.

IGCMenu IGCMenu library gives easy way to create Grid and Circular menu in app. This is light weight and highly customisable menu.Support iOS 7 and ab

Grid-based app for macOS Catalyst (Mac Idiom) with navigation stack
Grid-based app for macOS Catalyst (Mac Idiom) with navigation stack

Catalyst Grid App Simple Catalyst example (Mac idiom) of a grid-based app with a push/pop navigation stack. Includes back button in toolbar that auto-

Full aspect ratio grid layout for iOS
Full aspect ratio grid layout for iOS

Greedo Layout for iOS A library that computes what size the UICollectionView cells should be to display images in a variable height fixed aspect ratio

Simple Catalyst example (Mac idiom) of a grid-based app populated with photos, with dynamic cell layout switching
Simple Catalyst example (Mac idiom) of a grid-based app populated with photos, with dynamic cell layout switching

Catalyst Photo Grid Simple Catalyst example (Mac idiom) of a grid-based app populated with photos that can animate its cells between two different lay

SwiftUI Grid layout with custom styles
SwiftUI Grid layout with custom styles

SwiftUI Grid SwiftUI Grid view layout with custom styles. Features ZStack based layout Vertical and horizontal scrolling Supports all apple platforms

LoremPicsum - Simple UIKit based app for displaying grid of pictures

LoremPicsum - Simple UIKit based app for displaying grid of pictures

Catalyst example of a grid-based video app that opens videos in secondary windows
Catalyst example of a grid-based video app that opens videos in secondary windows

Simple Catalyst example (Mac idiom) of a grid-based app populated with videos. On macOS, double-clicking a video opens it in a new playback window. Keyboard navigation is fully supported via the UIKit Focus Engine.

Owner
Brian Coyner
Principal Software Engineer and Mobile Software Engineering Team Lead at National Information Solutions Cooperative (NISC)
Brian Coyner
A flexible grid layout view for SwiftUI

?? GridStack A flexible grid layout view for SwiftUI. WWDC20 Update Apple ο£Ώ released LazyVGrid and LazyHGrid at WWDC20. If you are fine to only suppor

Peter Minarik 620 Nov 11, 2022
πŸŽ› QGrid: The missing SwiftUI collection view.

[NOTE] If you'd like to see QGrid in action, check out this demo of QDesigner (see video below). Install QDesigner: https://apps.apple.com/us/app/qdes

Q Mobile 1.5k Dec 23, 2022
Display list of Marvel comic Characters and its detail view

Marvel Universe Display list of Marvel comic Characters and its detail view Installation Dependencies in this project are provided via Xcodegen (proje

null 1 Oct 19, 2021
Use Yelp API to fetch restuarants around a location and show them in a table view

Yelp Use Yelp API to fetch restuarants around a location and show them in a table view - Infinite scrolling, Prefetching, Image Caching. Design Patter

null 0 Nov 1, 2021
Using UI Table View

News-App Table View와 Table view controller Table View : Table의 크기λ₯Ό 지정할 수 μžˆλ‹€. Table View Controller: μ „μ²΄μ˜ λ·°κ°€ ν•˜λ‚˜μ˜ ν…Œμ΄λΈ” Table View Table view κ΅¬μ„±μš”μ†Œ κ²°μ •ν•˜κΈ° μ–΄λ–€

Jiwon 0 Dec 9, 2021
Typed, yet Flexible Table View Controller

ConfigurableTableViewController Simple view controller that provides a way to configure a table view with multiple types of cells while keeping type s

Arek Holko 270 Oct 15, 2022
An easy-to-use UITableViewCell subclass that implements a swippable content view which exposes utility buttons (similar to iOS 7 Mail Application)

SWTableViewCell An easy-to-use UITableViewCell subclass that implements a swipeable content view which exposes utility buttons (similar to iOS 7 Mail

Christopher Wendel 7.2k Dec 31, 2022
Objective-C library for drag-n-drop of UITableViewCells in a navigation hierarchy of view controllers.

ios-dragable-table-cells Support for drag-n-drop of UITableViewCells in a navigation hierarchy of view controllers. You drag cells by tapping and hold

Anders Borum 49 Aug 23, 2022
Generic table view controller with external data processing

FlexibleTableViewController Swift library of generic table view controller with external data processing of functionality, like determine cell's reuse

Dmytro Pylypenko 9 May 20, 2018
Simple timeline view implemented by UITableViewCell

TimelineTableViewCell TimelineTableViewCell is a simple timeline view implemented by UITableViewCell. The UI design of TimelineTableViewCell is inspir

Zheng-Xiang Ke 1.3k Dec 25, 2022