Posts

SwiftUI UIKit – part3: push data to UIViewController

Image
This is already part 3 of a small series of articles about the SwiftUI and UIKit interaction. You can read the part1 and part 2 on my blog. This article is about pushing data and triggering actions from the SwiftUI to the UIViewController. The examples presented by Apple about interfacing with UIKit , shows a coordinator conforming to a protocol and having it as a delegate for a view or a view controller. However, I was not able to find any information on how to push back data into the View Controller, as result of actions performed by the user in the SwiftUI view. Therefore, in this article, I will try to show exactly this; I will be covering also the very cool feature of adding a custom overlay to a map view. So let’s dive into the sample. 1. Custom overlay This article will not really get into the details about creating the overlay. I am pretty sure there are more interesting examples on the internet, however for illustration purposes, I will create a circle, with the color

SwiftUI UIKit – part2: embed SwiftUI in UIViewController

Image
In a previous post , I was showing you how to embed a UIViewController into a SwiftUI view. For this example, I used a map view, touching some of the basic functionality of MapKit as well. In this article, I will try the opposite exercise: embed SwiftUI into a ViewController and call it inside other View Controller. Apple made it very simple to combine SwiftUI and UiKit. In this way, a developer can use existing UiKit functionality, controls and view controllers in SwiftUI views. And vice versa, your shiny brand new SwiftUI view can be called from UIView controller. If you remember the previous post, I was showing you an example of a search bar and a map view. Whenever a search was performed, if at least one relevant item was found, a pin was added to the list. But what if there are multiple results? Well, in this case, I want to show a view displaying all those results, to let my user select which one he or she actually intended to search for. And the one that is selected will be a

SwiftUI: handling images in Dark theme

Image
One of the latest exciting addition announced by Apple at WWDC 2019 is dark mode for IOS . Basically, the app can display different colors if ran on dark comparing to light color scheme. The colors of your app can be defined in your assets, specifying a different color for dark and for light scheme, under the same color name. It is not as easy with images. Therefore handling images in Dark theme can be a really useful feature for your bag of tricks. I recently ran into the very comprehensive collection of icon images from Icons8 . They offer thousands of drawings that can be easily used in your app, providing a rich visual experience for the users. However, there is s slight issue regarding this: the default colouring of the images is black on a white background. Of course I could invert them in Photoshop and provide 2 versions of the same image; however, this would make my image maintenance more difficult. Therefore I decided to implement a simple class, a replacement for Image,

SwiftUI - interacting with UIKit - part1: map view

Image
SwiftUI comes with good integration with existing UIKit framework. It is possible to achieve SwiftUI interaction with UIKit by wrapping UIViewControllers into SwiftUI views and the other way around, embed SwiftUI views into view controllers. In this post, I will show you an example of how to include the MapKit functionality in your SwiftUI app, wrapping a view controller. The purpose of this demo is to create a view, containing a search bar and a map view. The user types in a place in the search bar; the first result in the list of results retrieved by the map search is added to the map as a pin. Finnaly , I will show how to interact with the outside view by creating a delegate for the controller. 1. Start with a view controller I create a view controller and I programatically include all the elements that I want to show in my view: a search bar and a map view: class MapViewController: UIViewController { var mapView: MKMapView! fileprivate var searchBar: UI

SwiftUi: modal views to the custom navigation framework

Image
After presenting a way to implement custom navigation views in a previous post , now it is time to add the support for modal views. As a demonstration of the concept, I will be showing an ImagePicker modally, using this technique. In a previous post , I have presented a simple framework for achieving navigation, covering some features that lack in the current navigation view of SwiftUI; namely visual customisation and ability to push views or unwind the stack programatically. During this post, I will be exploring even further, adding support for modal views. So to recap, this is how the NavigationStack and NavigationHost classes were looking like at the end of the previous post: final class NavigationStack: ObservableObject { @Published var viewStack: [NavigationItem] = [] @Published var currentView: NavigationItem init(_ currentView: NavigationItem ){ self.currentView = currentView } func unwind(){

SwiftUI: Custom navigation

Image
SwiftUI Custom navigation component motivation: Building a custom navigation component for SwiftUI is a useful addition to SwiftUI community. After the release of SwiftUI, until now (beta 5 of xcode 11), one of the pain points experienced by the Swift developer was the customisation of the navigation bar. Precisely, changing the colour of the bar, the colour or font of the text, the look of the back button seem to be impossible or quite cumbersome tasks. Also navigating programatically is something that you cannot do with the out-of-the-box API provided by Apple. I have seen solutions involving changing the global appearance of the navigation bar: UINavigationBar.appearance().backgroundColor = .green or solutions trying to open the destination of the navigation as modal; however none of those solutions are entirely satisfying my needs while developing an app. They feel like workarounds, rather than fully trustable solutions Therefore, I was thinking about a custom mad