InVision Studio – A Few Days Later – Early Access

I’ve had the InVision Studio “Early Access” version for a couple days now and to be honest I haven’t used it a lot.

The biggest problem is that there isn’t a component library of iOS interface bits and pieces. In other words, I can’t put a status bar or navbar or tabbar or table view into my app without building it from scratch. This really hampers my ability to do anything useful with the app.

DesignCode has a Sketch component library (available here: https://designcode.io/ios11-ui-kit) that’s pretty good. InVision Studio supports importing Sketch files, but importing the DesignCode file posed two problems. first, it doesn’t import properly because InVision Studio is a different app and has different capabilites than Sketch. So while there’s lots of stuff that IS imported, lots of it is just a bit off. The second problem is that InVision Studio doesn’t seem to support large files as well as Sketch does, because maneuvering around this large file is filled with a lot of lag, and it’s very hard to be productive when everything takes many seconds to do. And this is with a current 13″ MacBook Pro.

That said, I can still see the promise in this app. If the InVision folks come out with a native iOS component library, I’m sure it’ll work a lot better than trying to import a Sketch one. It would be nice if Apple provided one too – they already have one that supports Sketch and Adobe XD.

UICollectionView Boilerplate

Sometimes you just need some boilerplate code. And usually you need to look it up. So in order to save some time, I put together this code for a simple UICollectionView with nicely spaced cells:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
class ViewController: UIViewController, UICollectionViewDataSource /*, UICollectionViewDelegate */ {

    let kReuseIdentifier = "CollectionCellID"
    let kNumCellsPerRow:CGFloat = 3.0
    let kSpacer:CGFloat = 10.0
    var collectionView : UICollectionView!
   
    override func viewDidLoad() {
        super.viewDidLoad()

        let cellsPerRow: CGFloat = kNumCellsPerRow
        let minItemSpacing: CGFloat = kSpacer
        let containerWidth: CGFloat = self.view.bounds.width
        let itemWidth: CGFloat = (containerWidth - (cellsPerRow+1) * minItemSpacing) / cellsPerRow - 1  // -1 in case the screen width doesn't make it easy for us
        let inset = max(minItemSpacing, floor( (containerWidth - (cellsPerRow*itemWidth) - (cellsPerRow-1)*minItemSpacing) / 2 ) )
        let layout = UICollectionViewFlowLayout()
       
        layout.itemSize = CGSize(width: itemWidth, height: itemWidth)
        layout.minimumInteritemSpacing = minItemSpacing
        layout.minimumLineSpacing = minItemSpacing
        layout.sectionInset = UIEdgeInsets(top: minItemSpacing, left: inset, bottom: minItemSpacing, right: inset)

        self.collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: kReuseIdentifier)
        //collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.backgroundColor = self.view.backgroundColor
       
        self.view.addSubview(collectionView)
    }
   
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20
    }
   
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kReuseIdentifier, for: indexPath as IndexPath)
        cell.backgroundColor = UIColor.lightGray
        cell.layer.cornerRadius = 3.0
        return cell
    }
}

Here is the UICollectionView gist for it.

Embedding View Controllers

In John Sundell’s excellent article Using child view controllers as plugins in Swift, Mr. Sundell reminds us that Apple has given us the ability to compose UIViewController objects together, allowing multiple controllers to display in one view. He also gave us two helper functions to use, one to add a child view controller and the other to remove it. Here is the the function to add a child controller to another controller:

1
2
3
4
5
func add(_ child: UIViewController) {
    addChildViewController(child)
    view.addSubview(child.view)
    child.didMove(toParentViewController: self)
}

It is definitely a handy function. When I wanted to use it, however, it fell short. My parent view controller wasn’t displaying the child view controller full screen but rather just in a view – a smaller area than the full screen. So I modified the add function to be like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
func add(_ child: UIViewController, using container: UIView? = nil) {
    addChildViewController(child)
    if let container = container {
        container.addSubview(child.view)
    }
    else {
        view.addSubview(child.view)
    }
    child.didMove(toParentViewController: self)
}

func exampleUsage() {
    let parentController = MyViewController()
    // assume "MyViewController" contains a view "holder" that
    // we want the child to be placed in
    let childController = UIViewController()</p>
    parentController.add( childController, using: parentController.holder )
}

I don’t know if anyone else out there is experimenting with composing view controllers, but I hope you found my experience handy.

Gist Version of This Article

Adobe XD – My 7 Day Trial

After the problems with Gravit Designer, I looked around for another app design program that I could use to design my app. I’m still waiting on InVision Studio, which looks like it could be a game changer, but I don’t have it yet. It was supposed to launch in January, and I guess they’re still polishing some features.

I turned to Adobe XD. I didn’t think there was a demo, but there is! Sketch has a 30 day trial, but Adobe XD’s trail period is only seven days. So I downloaded and tried it out for seven days.

Long story short, XD is a lot better than Gravit. The masking stuff was tricky to use, but I was glad it was there, and I used it extensively to make things like a circular image. I wish that I could tint images that I imported. Sometimes working with grouped items doesn’t work as seamlessly as it should. The prototyping stuff was nice – I could save the file on my Mac, and just load it up in the sister iOS app and check it out on my device. There didn’t seem to be any responsive design stuff – I had to choose one size to work on. Maybe I just missed it.

The trial period was only six days. While I learned a lot about the app in six days, I feel that the one month trial that Sketch provides is a better to gauge the actual capabilities of the app. It felt like I was just getting into XD when I couldn’t use it anymore.

I’m still waiting for InVision Studio, and then I’ll make my final decision!

Gravit Designer – My Thoughts

I’ve only been using Gravit Designer for a few days, but I’m going to abandon it. It’s too frustrating to use. I have a couple examples.

When you login to the website to view a design on an iOS device, the design doesn’t render accurately. Drop shadows, for example, don’t work. Which makes looking at a design with a critical eye impossible on my iPhone or iPad.

I tried copy/pasting a small image to use elsewhere on the same page of the design. I couldn’t move the image! What happened instead was that I was moving the bounding box or something, and I could not grab the actual image. This was very frustrating.

At this stage I’ve given up on Gravit. I am anxiously waiting to try our InVision App Studio. I hope I get my invite soon. In the meantime I think I’ll check out Figma.

Looking for Design Software

I am working on a new app. WAY beginning stages. I think I’ll do it right and design it all up beforehand instead of winging it like I used to do. So I’m looking for some good software that’ll help me. Preferably something easy to use and not too expensive, and that gets the job done. (My background: I know Photoshop well enough to create decent YouTube thumbnails. LOL. )

I would really like a feature where I could replace the whole colour scheme, so I can test out different themes. So I’ve been looking around for such software, and it looks like there’s nothing that does that, so I guess that aspect of design will be that much harder.

I’ve looked at Sketch, which seems to be the industry standard. It’s not bad, but there’s something about the workflow that rubs me the wrong way. I just can seem to do what I want as quickly as I want.

I tried Gravit Designer too. It’s much like Sketch when it comes to workflow, but it has even more problems. It’s web based, which is cool because you can use it anywhere, but sucks because the Mac version is obviously just a web app. Yuck. But it’s free, so I’ve been trying it out.

Figma I just discovered, and it’s web based as well. I still need to do some more investigation.

I just signed up for the InVision Studio beta (here: beta), we’ll see how long it takes me to get it in. But I have high hopes. It’s a native app that’s free, looks pretty cool.

Those are the options I’m looking at right now. We’ll see how this goes…

Podcasts + Castro

http://is5.mzstatic.com/image/thumb/Music128/v4/34/ab/8b/34ab8b67-ced5-549d-6eb9-baf8a962892a/source/170x170bb.jpgRecently I switched to using Castro as my podcast app. I find it much nicer to use than other podcast apps I’ve tried, which includes Downcast, Overcast, and Apple’s podcast app. The drag and drop is wonderful, and I love the inbox feature. Plus it has an elegance that the other apps lacked (IMHO).

But now that I’m using a better podcast app, I’m subscribing to even more podcasts, and I don’t have time to listen to them all! I can’t spend my whole life listening to podcasts. I’m going to have to be a lot more selective, I guess.

BTW, the makers of Castro have a really great podcast which any iOS developer would probably enjoy. It’s called “Supertop Podcast”. I highly recommend it.

Wat. Swift has a Never Type?

I use hole-driven development all the time, so discover that fatalError() returns this new type I’ve never heard of – “Never” – a “bottom type”, is pretty cool. I’ve never heard of Never or bottom types before. But they sure will come in handy from now on.

In a nutshell, it lets you do a fatalError() in temporary functions where returning a complicated-to-construct return value is too much bother. Like so:

func unfinishedFunction() -> ComplicatedType
{
   fatalError("so I don't need to construct a ComplicatedType")
}

Nice, huh?

http://alejandromp.com/blog/2018/1/30/hole-driven-development-swift-fatalerror