2019-03-01

    MobileLab: Creating iOS views programmatically in Xcode

    The challenge of this week's assignment is to build the interface programmatically with Swift, which means without any help from Xcode storyboard and GUI tools. Coming from a front-end development background, with expectation of styling objects using straightforward cascading descriptions, I was not expecting building layout in Swift to be so complicated at all. Putting border on only one side is not one line of padding-top description, and positioning footer sticked to bottom is not position: fixed.

    Don't take it wrong, I'm not complaining about Swift. I was just shocked by the difference. I mean, this is programming right? You step into an alien land nervously without knowing the language. And you try to learn and see if you can get along with the land in the progress. Good news is, your knowledge base accumulated from previous experience is not useless. It helps you see the pattern and rules in new field faster and easier. So just keep diving in to the unknown world and keep swimming.

    Takeaways

    Credit notes

    First of all, I'd like to have a new and great coding credit pattern in my code. So I try to implement following pattern to document the vital references in the code.

    credit-notes.png

    Using child view controllers

    The first challenge I had was adding a sticky footer at the bottom of the view. I thought there's a native footer component coming with UITableView, but there's no such thing. So I follow this How to use child View Controllers in Swift 4.0 programmatically | RexBlog to get a UIView as entry point with footer built into it, and added a subview of UITableView as a child view controller. This way, the footer is detached from the tableview, hence sticked at the bottom of the view.

    Typecasting variables

    As I tried to instantiate UIView with variables as parameters in CGRect function, I got errors like this:

    cgrect-params-vars.png

    I was confused in the first place, then I figured that I had to typecast the value to required type of CGFloat to pass it as parameter.

    cgfloat-typecast.png

    Custom page transition

    To implement a customized page transition, CATransition can help you with that. I put the snippet of code from How to present view controller from right to left in iOS using Swift - Stack Overflow in two views that required transition in my case, but there might be a cleaner way to do that.

    Constraints

    Adding constraints was incredibly confusing. I don't think Apple's official document is friendly to beginners, and googling only threw tons of different ways to do it, which made it more confusing. Luckily, I found this super helpful post iOS UITableView 100% Programmatically in Swift that shows how to build a view from scratch step by step. Following the instructions really cleared things up for me.

    Along the way of writing tons of constraints code, I suddenly felt like writing a PHP file with HTML, CSS and JS jammed together. It's quite overwhelming. Wonder if there's any helper library or tools making this easier.

    Debug mode

    During the process of development, I kept thinking "damn, web development is way easier with debug tool in browsers". But I didn't try to find out if there's such functionality in Xcode, until I was stuck by an event listening issue. I had trouble on listening to a tapping event on a button, so I asked teacher Sebastian for help. He then introduced me the debug more in Xcode, which was one of the exciting moments I have in coding life. With the help of the mode, I found that there's a view blocking the button. Setting the userInteraction to be false solved the issue.

    view-container-disable-to-unblock

    Beautiful way to create elements

    I like this way of creating elements. Cleaner and easier to read.

      let mainContainer: UIView = {
          let view = UIView()
          view.translatesAutoresizingMaskIntoConstraints = false
          view.clipsToBounds = true
    
          return view
      }()  
    

    Summary

    This was a painful but fruitful Swift programming experience. Now I get the basic knowledge of the layout pattern, I can focus more on design and program in the future.