DEV Community: Fabrício Masiero

UITableView with multiple kinds of cells (also works on UICollectionView)

Fabrício Masiero — Wed, 27 May 2020 17:29:13 +0000

Hi everyone =D  

I will show in this article how to use multiple types of cells in your UITableView or UICollectionView.
A lot of developers do that in the wrong way, using sections or rows to present another kind of cell.

This tutorial will be separated on 3 fronts:

1 - Create a model
2 - Register cells on your controller
3 - Organize it on cellForRow

Creating a model

First of all, I create a simple model to populate my table.

The secret of this model is the enum VehicleType. That changes everything!

Creating and register cell on table

After that, I create 3 kinds of cell:

Bike Cell

Car Cell

And finally, Motorbike Cell

And create an array of vehicles:

Set cell on cellForRow

Ok, we are almost done! What we need to do right now is configure our cellForRow atIndexPath or itemForRow atIndexPath.
Write an switch case to determine what kind of cell table will present. Like this example:

But, if you saw, each cell has a different size. Ok, let's do the same thing on heightForRow atIndexPath

And that's it! Simple, beautiful, and very easy!

I don't prepared a beautiful layout on these cells, but, take a look, we have 3 different cells on the same Table or Collection:

Download source code here =D

I hope I have helped everyone looking for this change.
If you would like to extend the discussion, call me on Twitter

Happy Coding :)

WWDC or AltConf?

Fabrício Masiero — Wed, 06 May 2020 19:53:22 +0000

First of all, I would like to introduce myself, I am Fabrício Masiero, I have been working with iOS for over 8 years and today I lead a team in the largest education company in Brazil.

Why is presentation important? Because it can help you choose the ideal event. I will explain it throughout the text.

Every iOS Developer dreams of going to one of these events and I will share my experiences in each one.
My first event was in 2016, the last year at the Moscone Center — San Francisco. I went to AltConf alone, knowing nothing and nobody. The event itself was not as famous as it is today, the talks took place inside a cinema, they had limited space and little infrastructure. It was amazing, I learned a lot and met a lot of interesting people.

The following year, I went with a friend. He went to WWDC and I went to AltConf. It was in that year that I understood what were the differences between the events, even though I had never participated in WWDC until then.

In those years, I had autonomy and the possibility to use in practice everything I learned in the events

In 2018, my company sponsored WWDC. I felt the chill in my belly again when I first went to AltConf. I did everything that a first-time dub needs to do: catch queues, wake up early for the keynote and choose all the talks he was interested in advance.
I learned a lot, I met a lot of people (including Tim) and it was totally incredible.

Okay, now I need to put what I learned into practice… But can you put it all into production? Can you use all the news I learned, day by day? Even more, referring to Brazilian users who do not always update at the same speed as Apple products are launched.

No, unfortunately not. Many of the novelties depend on something. Whether iOS updated, or device or any other reason.

WWDC is awesome! Able to bring some indescribable feeling to be there, see everything I saw on Apple LiveStream and learn all these new technologies.

AltConf is awesome too! Able to introduce you to great programming talents, such as the creator of Alamofire or Fastlane. The good thing about Alt’s talks is that the content is more palpable, the speakers show everyday examples, develop frameworks that make the developer’s life easier for today.

This year, 2019, I’m going to AltConf again. This time the company was unable to sponsor and I am going on my own at Alt. I particularly liked WWDC, because that is my profile.
I have a great friend who was also in both and he prefers AltConf a thousand times. In 2018 he was even one of the invited speakers.

The question is simple, participate in both. These are incredible events, but each one has a different focus.

Never been to any event? Go! You don’t have to go to WWDC (if money and lottery are impediments), just go to AltConf, meet people, feel what it’s like to be with that crowd that week. Worth every penny.

PS *: Join the parties and have fun

A hug

Fabrício Masiero

How to turn your old app into dark theme based on iOS 13+?

Fabrício Masiero — Wed, 06 May 2020 19:47:37 +0000

My app supports iOS 9 to the latest released by Apple (13) and I would like it to be dark theme and light theme. It's possible?
Searching for WWDC articles I noticed that the way Apple does is using

Colors.assets ###

PRETTY! I created a color asset in the app and started setting it up. But… what I feared came true. Support only for the. iOS 11+. Great Scott!

Color Document ##

I had to think of other ways to do something sustainable and work.
Starting with creating an extension called

Color.swift

Use Color Literal for fuller and more native viewing. All app colors should be there, organized, and standardized 👌. Say goodbye to colorWithHex() 😎 💁

Wonderful, but how would this work as dark mode? Simple, separate the colors that are dark themed and those that are not. For example, Plurall is my app name and purple is its color, it should not necessarily be dark themed.

The following is an example of colors that contemplate both theme types (can be scaled for more than that 👨‍💻)

But...Why this Colors?

I keep these variables above to the same extent and they are color changeable. The system understands perfectly when to use each one. But where did I get in those dark colors? Why them?

Well, I'm not officially a designer, I don't have this skill but I venture anyway ☺️.

But then, what about the dark colors? I used the Inverted Color technique (here a site that will help you invert the color - Invert Colors), so I can maintain the same contrast and visualization usability that my app had before Dark Mode, using colors that still talk to each other.
And why does Apple use full-black in its native apps? The high-end iPhones (iPhone X, iPhone XS, and iPhone 11 Pro) contain OLED screen and black is faithful, these screens can uses less battery in black pixels.

So, this is how I developed this feature for the app that can work from iOS 9. As seen in the code, it still does not work in the past iOS, this is a decision we still have to talk internally, but it is easy to implement this change.

I think it's time to show how the app is doing, right?

Side menu, I know, need to update this 😑

A Task Workflow(app for students)

Works also in WKWebKit 😎

There is only one "bad" side to this whole story, setting the colors manually 😒.

If you use XIB or Storyboard (like me) it will be more work, but nothing too painful. If you're one of those who does the whole layout via code, nothing changes for you, champion! Either way, you'll find a lot of it out there!

From this, I will talk with the design team and see what changes we can make for a better view, I can see some display failures, not respecting the 21: 1 or even 4.5: 1 contrast.
Apart from this visual change, what has changed?

Well, I revisited all the code (it's an old app, a lot of legacy stuff) and put it in my head: - Don't refactor complex things, fix force unwraps and other easy-to-maintain silly things.
So, I tweaked all the app colors (which were a mess,), tweaked small errors from XIBs and Storyboards, removed countless classes that weren't relevant, and again, the app colors are completely organized and visual.

I hope I have helped everyone looking for this change.
If you would like to extend the discussion, call me on Twitter

Happy Coding :)

How to add UIKit component on your SwiftUI project

Fabrício Masiero — Wed, 06 May 2020 19:32:30 +0000

A brief to how to add WKWebView on your SwiftUI view
First of all, there is no WebView component write in SwiftUI, so, how I add this component?

Yes, we need to add an UIKit component to a SwiftUI view 🤔
Ok, let's build a simple app in SwiftUI.

Xcode auto-generate a Hello World project, it's awesome, because it pretty easy to add WebView now!

Ok, finally lets work on some code

We need to create a ViewModel to treat the webview statement.

import Foundation
import WebKit

public class WebViewViewModel: NSObject {

    private let stringUrl: String
    public let webView: WKWebView

    init(stringUrl: String) {
        self.stringUrl = stringUrl
        self.webView = WKWebView()
    }
}

We create a ViewModel called WebViewViewModel with url and webview initializers. But, why?

url — is a string URL to you web site e.g google.com

webview — is a WKWebView object to store and control your component

and after this we need to perform a webview request to load the website, so add this on your ViewModel

public func request() {
    guard let url = URL(string: stringUrl) else {
        return
    }
    let urlRequest = URLRequest(url: url)
    webView.load(urlRequest)
    if webView.navigationDelegate == nil {
        webView.navigationDelegate = self
    }
}

And last but not least add WKNavigationDelegate to your ViewModel

extension WebViewViewModel: WKNavigationDelegate {
    public func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {

    }
    public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

    }
}

Our ViewModel is completed! Now we need to add this webview on our SwiftUI view, back to ContentView class and add this UIViewRepresentable

struct WebView: UIViewRepresentable {

    let viewModel: WebViewViewModel

    func makeUIView(context: Context) -> WKWebView {
        return viewModel.webView
    }
    func updateUIView(_ uiView: WKWebView, context: Context) {
        viewModel.request()
    }
}

But… Whats is UIViewRepresentable? Basically is a instance to create and menage UIKit components, you can read more here and here.

Let's understand what that code does.

The function makeUIView is responsable to return your component.

The function updateUIView is responsable to tells your app state change.

Finally, the last thing we need to do is add our webview to our main view, like this:

struct ContentView: View {
    var body: some View {
        WebView(viewModel: WebViewViewModel(stringUrl: "https://tinyurl.com/w498z2l"))
    }
}

Yes, is simple like that!

You can download the source code here

I hope you enjoyed.
Bye bye =D