My submission for the SwiftUISeries' Workarounds & Hacks challenge

Overview

SwiftUISeries Workarounds & Hacks

My submission for the SwiftUISeries' Workarounds & Hacks challenge

Preview

Problem Description

For a list in an app I'm working on, we wanted to display some key/value attributes for each element, but as there are many attributes to display, we wanted to have them in an horizontal ScrollView. However, we wanted to be able to easily scan and compare values between elements. So we decided to sync all ScrollView's scroll.

I had 2 issues to implement this design:

  • I needed to sync all key/values widths in "columns" accross all cells
  • I needed to somehow update the contentOffset of underlying UIScrollView as nothing can do that in SwiftUI. ScrollViewReader is too basic and can only scroll to a specific view, not to a precise offset.

Solution

Widths Sync

To sync all widths, I used a quite known technique of the GeometryReady to "read" the width of a view. But instead of storing it in a @State, I store it in a key:width dictionary inside a ObservableObject named WidthsStore.

All of this is done in a single syncWidth(key:) View operator that adds a ViewModifier responsible to get the WidthsStore, read the width, add it to the store, and get it back whenever it is updated to use it as a minWidth.

Scroll Sync

For this one, I decided to hookup in the UIKit hierarchy to find the closes UIScrollView with a technique similar to what Introspect does, by injecting a hidden UIViewController/UIViewControllerRepresentable that is only responsible of calling a given closure on specific events (e.g. viewDidAppear).

Once I've found the closest UIScrollView, I "register" in a shared environment object and setup some Rx bindings. I love to use RxCocoa for this kind of hacks because it allows me to listen tons of events without having to manually swap delegates or subsclass anything. It is especially helpful in SwiftUI where we can't subclass underlying classes.

Registered UIScrollView will report their contentOffset whenever it changed following a user interaction (isDragging). Other UIScrollView will listen this change and update their own contentOffset to keep it synced with other's.

You might also like...
Code Challenge - Using Alamofire is a Swift-based, HTTP networking library, also Codable for Data Model and Combine Framework .

Code Challenge ##Using Alamofire is a Swift-based, HTTP networking library, also Codable for Data Model and Combine Framework . Alamofire is one of th

US bank coding exercise challenge

USBankcodingexercise US bank coding exercise challenge This repo has two projects Project to demo MVVM design pattern problem statement - read data fr

Flipgrid Challenge
Flipgrid Challenge

FlipgridChallenge Overview The project follows MVVM-FlowViewController architecture that scales nicely as more screens/flows are added. I have added c

Birthdays App Challenge set by Chalkboard

Chalkboard Birthdays App Challange This is an app that utilises a web api to provide the user an ordered list of birthdays youngest to oldest How to i

iOS NBA Challenge Based on Xcode 12.4, PR2S Project By: Oscar Pastás

iOS NBA Challenge Based on Xcode 12.4, PR2S Project By: Oscar Pastás iOS This test app consists of a list of users Considerations This test should be

My winning contribution to Apple's Swift Student Challenge 2021

SynthApp My winning contribution to Apple's Swift Student Challenge 2021 This repository contains an Xcode project and the final Swift Playgrounds fil

Starter project for the iOS code challenge

iOS Base Project for Podium Take-Home Challenge Introduction We have provided two version of this base project: one using UIKit, one using SwiftUI. Th

Coding challenge for hiring process of Sicredi company
Coding challenge for hiring process of Sicredi company

Coding Challenge of Sicredi Screen Shots

Code challenge iOS - Movies app

Code challenge iOS - Movies app Project structure The Common folder contains sha

Owner
Jérôme Alves
iOS Software Engineer at @DataDog • Previously: @Heetch @Finalcad @deezer @Viseo • Speaker @FrenchKit 2019/2020
Jérôme Alves
[Accepted] My WWDC21 Swift Student Challenge submission

My WWDC21 Swift Student Challenge submission I made a playground book that teaches you the basics of ARKit through interactive lessons. It covers posi

Zheng 25 Nov 12, 2022
[Accepted] My WWDC2021 Swift Student Challenge submission chosen as one of the 350 winners!

Genetic Algorithms | WWDC21 This project was entirely built with SwiftUI. To direct download this Playground and run it on your Mac or IPad, click he

Fred Lacis 2 Dec 22, 2021
My Winning Submission for Apple's WWDC 2021 Swift Student Challenge

Symmetries This playground book gives a quick insight into the symmetry groups of 3-dimensional objects like the platonic solids. The user can play ar

David 4 Apr 23, 2022
'The Particle Binder' - Winning WWDC22 Swift Student Challenge submission!

The Particle Binder 'The Particle Binder' - Winning WWDC22 Swift Student Challenge submission! Welcome to The Particle Binder, the particle accelerato

David 8 Sep 26, 2022
iOS Tech Challenge - Take Home Challenge

iOS Tech Challenge - Take Home Challenge Thank you for your interest in taking the iOS Tech Challenge. Preparation Please, compile the project in Xcod

null 0 Oct 18, 2021
Challenge-M2Y-TM4 - A challenge provided by Mobile2You, with the purpose of analyzing knowledge about UI, API consumption

Challenge-M2Y-TM4 Um desafio proporcionado pela Mobile2You, com proposito de ana

Felipe Brigagão de Almeida 0 Jan 31, 2022
TakeHomeChallenge - iOS Tech Challenge - Take Home Challenge

iOS Tech Challenge - Take Home Challenge Thank you for your interest in taking t

Michael 0 Feb 1, 2022
WWDC2020 Swift Student Challenge - TheHackOfRayTracing playground book

wwdc2021 My wwdc2021 submission The HackOf RayTracing How to run Install swift playground from App Store on your Mac or iPad Double clik TheHackOfRayT

haoboxuxu 20 May 20, 2022
🎉 WWDC 2021 Swift Student Challenge Winner 🎉 Dance Party allows users to record choreography and play against other users to try and match the key poses!

?? Dance Party ?? ?? WWDC 2021 Swift Student Challenge Winner ?? Installation Steps (Works on iPad Only) Clone or Download Unzip the .playgroundbook.z

Alan Yan 7 Oct 17, 2022
The Feed API challenge with swift

The Feed API challenge - iOSLeadEssentials.com It's time to put your skills to the test! You are called to implement the RemoteFeedLoader to load a co

Andrew Marmion 0 Oct 28, 2021