51st Day As An iOS Developer With No Experience

51st Day As An iOS Developer With No Experience

TUESDAY - November 10, 2015.

I can still remember my first and second days in the company. My manager gave me a task, a simple task. I need to familiarise myself with Mac and Xcode, and in the second day, I started doing a simple app that navigates to two other screens. The app was like a calculator. I really have no experience (professionally) in any programming languages. I didn't know anything about building a production level applications for clients. What I knew before I started working as an iOS Dev was merely drag and drop vb.NET, C#.NET. Oh, I also know Arduino and PHP (basics of course, duh!).

Every typical aspiring programmers know some basics of several programming languages, but they do not know how to use it in real life, I mean in corporate world. How companies use these technologies. Ok, so back to my story,  2nd day, I didn't know how to layout my freakin views. I googled and googled and googled. Back then, my idea was to edit the values of the .frame properties of my views (e.g buttons) and then re-compile the app and see how it goes. Ah what a waste of time. If the seniors only taught me how to layout properly, I could've learned a lot more knowledge than I have (currently) right now, Nov 10. Haha! Oh I started working in September 3, 2015.

What I learned today was the VFL. What is a VFL? It means Visual Format Language. I believe this is used in autolayout in iOS.

To give you an idea what is a VFL, take a look at the picture below:

photo from cnblogs

You can see the UI at the first row, that is the visual you'll see in your app/device. The second row is the representation of how you'll layout your views, in this case, the buttons. Next, the third row, is the VFL itself. You see, VFL is the code. Yes, VFL is used in iOS Programmatically. If you need autolayout in iOS using XIB or Storyboards, then use Constraints in Interface Builder.

I'll give you now a short and quick tutorial in this VFL. First, a very example of VFL code.

    // CONSTRAINTS
    NSDictionary *views = NSDictionaryOfVariableBindings( bottomButton);
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[bottomButton(50)]-10.0-|" options:0 metrics:0 views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20.0-[bottomButton]-20.0-|" options:NSLayoutFormatAlignAllCenterX metrics:0 views:views]];

The code above will layout the view that is declared inside the NSDictionary, the bottomButton. Ok? Before anything else, the bottomButton will be placed, using this code, below the screen of our iOS device, but with a little bit space at its bottom and at its both sides. So going on, the next line indicates that we are talking about VERTICALLY. See the @"V:[ part of the code? V represents Verical, and H is Horizontal. This line will layout our button with the height of 50 and with a margin of 10.0 between the button and the super view. The super view is the whole screen.

How do I know that there is a margin between the superview and the bottomButton? The part
bottomButton(50) indicates that we are adding a specific value to the length or to the width of the button.

Next, the part -10.0- is the value BETWEEN, and the pipe | means the superview. The edge of the superview. Got it? So without a further effort, the last line indicates that we are adding our bottomButton horizontally to the view with 20.0 points margin to its both sides.

Easy, right? Just kidding. VFL is a pain in the brain. Haha! So if this one helped you, please subscribe and share.