Workaround to hide/modify List separators in SwiftUI iOS13 and iOS14

Related tags

SwiftUI App SwiftUIListSeparator
Overview

Help support my open source work!

Buy Me A Coffee

iOS15

List finally supports setting list row separator color and style as of iOS15! They still don't support list inset because....reasons? Here is a quick tutorial of how to use the new functionality in iOS15 and if you need custom insets you can always hide the lines and then use a custom Divider on each cell. Now this hack of repo can die the slow painful death it deserves. https://www.hackingwithswift.com/quick-start/swiftui/how-to-adjust-list-row-separator-visibility-and-color

Disclaimer

So while this project seems to work fairly well for many implementations it is clear that depending on specific setups sometimes the underlying UIKit code backing the SwiftUI list changes and ends up breaking this workaround. If it is not working my current suggestion would be to log an issue with specifics and instead do something along the lines of:

if #available(iOS 14, *) {
   LazyVStack { content() }
} else {
   List { content() }
}

func content() -> some View {
 //Table rows go here
}

SwiftUI List Separator

View extension to hide/modify List separators in SwiftUI iOS13 and iOS14.

Swift Version License Platform PRs Welcome

SwiftUI List lacks the customizations necessary to hide/modify row separator lines. There are known workarounds with setting appearance for UITableView but many times this sets it for all UITableViews in the app and this workaround has also stopped working in iOS14. This project allows full customization of the separators on List and has been tested and works in both iOS13 and iOS14 when compiled with either Xcode 11 or Xcode 12.

Requirements

  • iOS 13.0+
  • Xcode 11.0+

Installation

Manually

  1. Download and drop List+Separator.swift in your project.
  2. Congratulations!

Swift Package Manager

https://developer.apple.com/documentation/xcode/adding_package_dependencies_to_your_app

Usage example

Show the standard single divider line (Note: this is equivalent to the sytem default so omitting is the same thing)

List { <content> }
    .listSeparatorStyle(.singleLine)

Hide separators on the List

List { <content> }
    .listSeparatorStyle(.none)

Show a single divider line with configurable color and insets

List { <content> }
    .listSeparatorStyle(.singleLine, color: .red, inset: EdgeInsets(top: 0, leading: 50, bottom: 0, trailing: 20)

Show a single divider line and hide the separator on empty rows in the footer

List { <content> }
    .listSeparatorStyle(.singleLine, hideOnEmptyRows: true)

Contribute

We would love you for the contribution to SwiftUIListSeparator, check the LICENSE file for more info.

Meta

Michael Schmidt – @FindMyClass – [email protected]

Distributed under the MIT license. See LICENSE for more information.

https://github.com/SchmidtyApps

Comments
  • Some separators still visible in long lists on iOS 14

    Some separators still visible in long lists on iOS 14

    Hi there,

    I think this is a very cool idea!

    It hides most of the separators of a list in iOS 14, but some of them stay visible if the list is long. I modified the example without separators from this repository to look like this:

    struct ListWithoutSeparator: View {
    var body: some View {
        List {
            ForEach(0..<30) { index in
                VStack {
                    Text("Item \(index)")
                }
            }
        }
        .listSeparatorStyle(.none)
        .navigationBarTitle(Text("None"))
    }
}

    and the result looks like this: Bildschirmfoto 2020-09-19 um 10 47 11

    I used Xcode 12 and iOS 14 on a simulator and on a real device. Is there a way to hide all separators?

    opened by stefanengel 4
  • effecting navigationView

    effecting navigationView

    It effecting navigation view in iOS 13. When I am scrolling my list, list overlapping navigation view You can check it in your sample code also. Increase the number of Rows and try it

    opened by pushpankfinoit 1
  • Hides some section headers in list

    Hides some section headers in list

    if you add a view.frame.height > 0, it works

    func handleDividerLineSubviews<T : UIView>(of view:T) {
        if view.frame.height > 0 && view.frame.height < ListConstants.maxDividerHeight {
            divider(view)
        }
...
}
    bug 
    opened by emelyanovkirill 0
  • Extra Separators Appear

    Extra Separators Appear

    Describe the bug A clear and concise description of what the bug is.

    To Reproduce Steps to reproduce the behavior:

    1. Scrolling the list to the bottom
    2. Extra separators appear

    Expected behavior Extra separators should not appear.

    Screenshots Simulator Screen Shot - iPhone 12 - 2021-02-07 at 13 55 22

    Smartphone (please complete the following information):

    • Device: iPhone 12
    • OS: 14.4
    • Browser [e.g. stock browser, safari]
    • Version [e.g. 22]
    bug 
    opened by halilyuce 0
  • Modifier not working on Lists embedded in V- or HStacks

    Modifier not working on Lists embedded in V- or HStacks

    Describe the bug The .listSeparatorStyle modifier is not working on Lists embedded in V- or HStacks on iOS 14.3, building with Xcode 12.3.

    To Reproduce Steps to reproduce the behavior:

    1. Use Previews or run the app on iOS 14.3 using Xcode 12.3.

    Expected behavior The modifier should apply to both Lists at top level and Lists embedded in V- or HStacks.

    Screenshots Cannot share screenshots due to NDA.

    Smartphone (please complete the following information):

    • Device: iPhone 12 Pro
    • OS: iOS 14.3
    • Version 1.0.0

    Additional context The modifier works correctly when applied to Lists at the top level or embedded in a NavigationView.

    bug 
    opened by Ast3r10n 0
  • Improve CPU/Memory Utilization

    Improve CPU/Memory Utilization

    Describe the bug The current solution redraws on every scrollview contentOffset update which temporarily spikes CPU usage while scrolling. Custom divider lines are also redrawn more than once causing an unnecessary memory footprint increase.

    To Reproduce Steps to reproduce the behavior:

    1. Scroll a long list up and down repetitively while monitoring CPU/Memory usage

    Expected behavior The CPU/Memory usage while currently reasonable should be dramatically improved by limiting redraw cycles

    bug 
    opened by SchmidtyApps 0
Owner
Michael Schmidt
Michael Schmidt
GitHub
Xylophone-iOS13 - Training project / sound, buttons, constraints

Xylophone-iOS13 Training project / sound, buttons, constraints Simulator.Screen.

Alexandr 0 Feb 2, 2022
Cookbook app that allows you to read, add and modify your recipes.

What-s-For-Dinner-iOS-App Cookbook app that allows you to read, add and modify your recipes. Features ?? ?? View You can see recipes divided into cate

Katie Saramutina 2 May 18, 2022
A small macOS menubar app designed to hide the dock on selected spaces.

HideMyDock A small macOS menubar app designed to hide the dock on selected spaces. Installation Manually You can download the latest version of .dmg f

Alexander Ushaev 42 Jan 2, 2023
Todo-list - Simple todo list app written in Swift

About TodoApp TodoApp is sinmple todo list app that I created in my free time, i

null 2 Aug 30, 2022
In this mini app covered the concepts like basics of SwiftUI and Navigations and Animations and List with CRUD functions and MVVM and App Launch and App icons adding and also applied persistence using UserDefaults Concept.

TodoList In this application used the concepts from the beginner level project of SwiftUI_Evolve_1 The following concepts covered in this mini app Swi

Sivaram Yadav 2 Dec 4, 2021
Basic Todo list application built using the new SwiftUI framework and Core Data

Dub Dub Do - A sample TODO List Application in SwiftUI Updated for Xcode 11.5 This is a basic app that lets you create a list of todos, mark them as i

Stephen McMillan 67 Sep 28, 2022
A to-do list app using SwiftUI and combine with restful api.

Todo Combine SwiftUI It's an experiment project for the brand new SwiftUI + Combine + restful API with dark mode Build follow restfult to-do-api to ru

jamfly 14 Feb 21, 2022
Shows a Pokémon list with its image and name with SwiftUI

TelepassDigitalTestIB Description General This project aims to develop an app, for Telepass interview process, that shows a Pokémon list with its imag

null 1 Jul 5, 2022
An example to-do list app using SwiftUI which is introduced in WWDC19

SwiftUITodo SwiftUITodo is an example to-do list application using SwiftUI which is first introduced in WWDC19 keynote. Requirements Xcode 11 Beta Swi

Suyeol Jeon 701 Dec 23, 2022
Todo list with SwiftUI

TodoList.Capstone Todo list with SwiftUI i did is a Todo-List you can create a new todo by providing its name and description and the deadline of the

areej Mashabi 0 Nov 14, 2021
SwiftUI movies list using The Movie Database (TMDB) API

MyMoviesList About MyMovieList is an application that uses The Movie Database (TMDB) API and is built with SwiftUI. It demo of some SwiftUI (& Combine

Arnaud 1 Dec 5, 2021
SwiftUIIndexedList - Add an index bar to a SwiftUI List or ScrollView

SwiftUIIndexedList Add an index bar to a SwiftUI List or ScrollView. Getting Sta

Ciaran O'Brien 25 Oct 27, 2022
Pull to refresh in SwiftUI for List, NavigationView

SwiftUI-PullToRefresh Pull to refresh implementation in SwiftUI for List and NavigationView This article helped me a lot: https://swiftui-lab.com/scro

Andras Samu 381 Nov 24, 2022
Aplikasi iOS Advanced Level To Do List dengan Firebase Auth, SwiftUI, MVVM Design Pattern, dan Firebase Firestore

Aplikasi Tasker adalah aplikasi iOS To Do List yang dibuat menggunakan Autentikasi Firebase / Firestore dan MVVM Design Pattern.

DK 10 Oct 17, 2022
iOS App to display game lists and details with the ability to add games to your favorites list and see metacritic ratings.

Game Data System - GDS Author: Heitor Silveira ([email protected]) iOS App to view games from various platforms, their description, release

Heitor Ugarte Calvet da Silveira 0 Oct 6, 2021
Reading List is an iOS app for iPhone and iPad which helps users track and catalog the books they read

Reading List Reading List is an iOS app for iPhone and iPad which helps users track and catalog the books they read. Reading List v2 As of version 2.0

Andrew Bennet 281 Jan 15, 2022
This is a repository with an app that shows a list of posts and where you can access the detail of each of them

PostsApp This is a repository with an app that shows a list of posts and where you can access the detail of each of them Dependencies You need to inst

Patricia Zambrano 1 Jun 21, 2022
iOS app that allows you to search for any comic character and save your favorites in a list.

iOS App: My Comics Swift exercise ¡Hola mundo! In my Swift learning journey my mentor and I decided to do an app using the Comic Vine API. This API gi

Silvia España Gil 5 Dec 13, 2022
A todo list iOS app developed with swift5 and coredata to persist data, this app help people organise their tasks on categories.

A todo list iOS app developed with swift5 and coredata to persist data, this app help people organise their tasks on categories. The app is simple, intuitive, and easy to use and update tasks informations.

null 1 Oct 10, 2022