About Javier Calatrava Llavería

Why you go at work? There are myriads of valid answers. Mine is because Computer Science is my passion and there is nothing better than working in something that you like. That profession allowed working in great companies. But even better was being able to learn for great professionals, some of them without telling me a word showed to me which was the next professional step to take. Doing a professional career is like drawing a painting, the final result will depend on the colors that you use or the experiences that you chose.

A dropdown view with Autolayout (and a few lines of code)

The aim of this post is just to explain how simple is to make a drowdown view controller using Autolayout (… and a few lines of code also). But believe be, the magic is done by Autolayout. At the end you will have a view controller that will allow to drop down the upper view:

Final

Setup the project

Create a brand new Single View Application project:

Screen Shot 2015-12-23 at 13.46.09

Be sure that Language is swift:

Screen Shot 2015-12-23 at 13.49.35

In the default View controller add two views, one in the top-half and the other in the bottom-half. Finally add a button in the middle of two views:

Screen Shot 2015-12-23 at 14.04.24

I have added some color in the view components just for better clarification.

Autolayout

Top subview. Add the following 5 constraints:

Screen Shot 2015-12-23 at 14.07.19

 

Bottom subview. Add the following 4 constraints:

Screen Shot 2015-12-23 at 14.09.26

 

Button. Add the following 3 constraints:

Screen Shot 2015-12-23 at 14.12.02

Screen Shot 2015-12-23 at 14.13.52

 

Button – Bottom subview. For the following constraint do not forget select Top subview and Button.

Screen Shot 2015-12-23 at 14.15.52

And apply the following constraint:

Screen Shot 2015-12-23 at 14.18.58

Autolayout is giving to you a warning because he excepts that Button and Top subview would be bottom alligned.:

Screen Shot 2015-12-23 at 14.19.40

Our intention is leave the buttom in the middle of two views, so we have to update constraint:

Screen Shot 2015-12-23 at 14.25.10

 

… and a few lines of code

Outlets

 

Now link outlets:

  • btnFoldButton to the button
  • cnsUpperViewHeight to the Top view height constraint.

 

Add pan gesture recognizer to Button:

What we do in the gesture recognizer is just calculate new value for cnsUpperViewHeight constraint, the hard work is performed by autolayout.

 

Finally

Let’s make some make up, just adding some picture at the top subview and a map at the bottom view.

For the picture and the map add the following constraints:

Screen Shot 2015-12-23 at 14.46.35

 

For the map do not forget the import MapKit in the view controller code:

Screen Shot 2015-12-23 at 14.53.20

Finally run the project:

Screen Shot 2015-12-23 at 14.56.24

 

Pan the button and you will see how top view is compressed, giving more room for bottom view.

You can also download the sample project from gitHub.

Variant

If what you really want is just shift the upper view and avoid compress effect on the top view, just remove the top constraint on the picture that is placed at the top subview:

 

Screen Shot 2015-12-23 at 15.03.23

This will be what you get:

Screen Shot 2015-12-23 at 15.04.26

Useful links:

Break up massive view controllers (Swift)

Introduction

MODEL-VIEW-ADAPTER DESSING PATTERN. It is quite common in iOS programming that view controllers begin to grow and at the middle of development you discover that you have a view controller class with hundreds or even thousands of line. This is the common scenario where the view controller, apart from dealing with its controllers (uitableviews, uitableviews, hierarchy of views,…), has also to process data for being properly presented attend to notifications.

 

The aim of this post is to explain an approach for breaking up view controllers into different design classes and provide them different responsibilities for practically leave the view controller with the responsibility of setup its view controller and filling its ui controllers when necessary.

Class design

MVC approach

MVC

This approach is the most convenient case that the amount of information that you have to present in the view is quite reduced.

MVA approach

mva

 

This other is the most convenient when you have to deal with more than one dataSource in the same view controller, and also the origin of the data to show come from different sources (a data base, internet request, some costing data process,…).

Responsibilities:

View. As always, show the content views.

View Controller. In this approach, setup its uicontrols (tableviews, collection views, a view hierarchy, …) and attend its events. This is not something new, but what is new is that is responsible of being delegate of an Adaptor class and implement its delegated methods. Those delegated methods are basically informing view controller that there is new data to show in the view.

ModelView. Is the model data to be shown in the view.

Adaptor. Is the responsible for starting the processes for retrieving data and providing it to Model Data. Once there is some data to show is provided to viewcontroller via delegate.

AsyncOperation1,…n. Are asynchronous operation for retrieving data from elsewhere. In the worst case scenario this action will take time.

As you can see the View Controller get slimmer by moving part of the code that it performed in MVC approach to Adaptor and AsyncOperation classes.

The template

For proving you that concept you can take this sample project that implements what I have exposed.

 

 

Custom uitableview cell in Swift

The aim of this post is to show how to build a Custom SWIFTed TableViewCell view cell. I have found several shallow examples with the default cell. But soon you will discover that will not fit a real sample project situation. I have found several difficulties from moving to Swift, that took me more time than I expected and that pushed me also to write this post.

The custom table view cell

I have just created a new Single View Project Application  in the default view controller  and added a new NSObject class that extends from uitableviewcell.

Captura de pantalla 2015-07-10 a las 18.54.54

 

Captura de pantalla 2015-07-10 a las 18.56.24

 

The storyboard

I have added a table view controller and a tableview cell with an image view and a label.

Captura de pantalla 2015-07-10 a las 19.02.50

Now is time to setup the custom table view cell. Firstly the  new  class associated to the cell:

Captura de pantalla 2015-07-10 a las 19.07.15

And secondly set the cell identifier:

Captura de pantalla 2015-07-10 a las 19.07.40

The View Controller

Now it is time for connecting the storyboard with the source code. Lets start off with the main view controller:

I have mapped the tableview to tbvData, and added the minimum uitableview delegates. The table view is filled with 3 elements contained in two arrays (items and images).

The table view cell

In the custom cell I have added an image view and a label as an example. This is the code that  configures the cell:

 

Finally

Captura de pantalla 2015-07-11 a las 14.58.34

You can get also find the code here

Singleton dessing pattern in a template (Swift)

The aim of this post is just complement Singleton design pattern in a template post , but in Swift.

Singleton implementation class

 

Not that in Swift ‘dispatch_once’ is no longer necessary, as in Objective-C. Static constants in Swift, internally does it. So this is an issue that you do not have to worry about.

Template usage

This is how the pattern is used.

 

Conclusion

As you can see Swift language structure facilitates a lot Singleton design pattern implementation. You can get the project source code used for writing this post here.

NSUserDefaults best practices

Following previous post and observing in many projects how NSUserDefaults settings are handled I have decided to write this NSUserDefaults best practices.

If you look for information about how to set/get any value in the default storage you will get this:

and for getting the value:

Easy, Is not it? The problem appears when there are many attributes deal with with the sets and gets scattered along the code and you want set break points for trapping when this attribute is being accessed.

Proposal

What I propose is to wrap this functionality in a single class that concentrates all the attributes that we want to get/set from the default storage system.

This is the declaration .h:

Its implementation .m:

The class is implemented as a singleton and for each attribute are overwritten set (and get) methods. In that way in a unique place the attribute is set (and get) into (from) the storage system.

And its usage:

The access to the attribute is more clean and in a unique class file we have all the system storage functionality concentrated. You can download the project used for writing this post here.

 

 

 

 

Trap when a class property is set/get

Trap when a class property is set/get

The aim of this post is just explain in a simplified way how to trap when a class property is set/get. The most typical scenario where this mechanism is used is when you have to do some calculations before returning a property value (in case or get) or when you have some tasks when is being set a new property value (in case of set). This mechanism is also very useful when somethings does not go as you expect  with an attribute.

 

The syntax

The syntax is quite straightforward. If I have a property called xxxx, then the methods that you have to overwrite are setXxxx and Xxxx.  It has been added the prefix ‘set’ followed by the first uppercase letter attribute name, ant the rest as it is. Let me show you an example for better understanding, this is the property declaration:

… And those are the overwritten methods:

Let’s play with it

I have created a sample singe view project, and in the ViewController class viewDidLoad method I have added the following chunk:

And this is the log:

You can find the sample project that I have use for writing this post here.

 

Notification mechanism simplified (swift)

The aim of this post is to explain and provide an example about notification mechanism simplified (,but not simplistic) in swift. The first thing that you need to be clear is when to use this mechanism and when delegate mechanism.

Both mechanism help to decouple view controllers. Notifications offer the advantage that multiple objects can observer one notifications.  In delegate mechanism the communication is direct (through a protocol method implementation) with the delegate class.

The example that I am going to present to shows the notification mechanism as a broadcast service. A timer periodically will launch a notification, on the other side there will be two classes (Alice and Bob) that will be intercepting the message.

As you can see in the code every 3 seconds is sent a notification that is intercepted by Alice and Bob class in the following way:

Is important to keep under control when to unsubscribe to the notification mechanism. In case of Alice is after receiving 3 messages and in case of Bob is when the class is removed from memory.

Once we run the project we should have to see the following in the log window:

logs

You can find the sample project here.

 

 

 

 

 

Key-Value Observing mechanism simplified

The aim of this post is to show how it works Key-Value Observing mechanism (KVO). KVO is a mechanism for transparently notifying observers of changes in object properties. In other words,  this mechanism will allow us to trap when some object property value is being modified.

Implementation

We will create a class that will hold the property to be observed:

Its implementation is the following:

As you can see the property is set to 3 in the class initialiser. Now we are going to implement the KVO mechanism in the ViewController. We will add the observer in the viewDidLoad Method:

As important as setup the observer is remove it when it is not necessary, I will add it in the dealloc method:

In the viewWillAppear method I will update property that is being observed:

The callback that is being called every time that the property is changed is the following:

When you will run the project you will see that the above function is called twice. Once during NewObject initialisation and the other during viewDidAppear.

kvo

And in the log screen:

You can download the code from here.

 

 

Singleton design pattern in a template

The aim of this post is to present Singleton design pattern in a template. I have seen some post and articles that showed the implementation key points separately, so this is why I have decided to write a mini-post showing an implementation template and its usage.

First of all, let’s define what a Singleton pattern is:

...the singleton pattern is a design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. The concept is sometimes generalized to systems that operate more efficiently when only one object exists, or that restrict the instantiation to a certain number of objects…. (Wikipedia)

Pattern implementation

This is my singleton implementation class:

I have added a local attribute (iLocalAttribute), for showing how to handle them, at the beginning I had to create them as static and for having access to them I had also to create static methods, but in a few lines I will explain how to avoid that.

The key point is the sharedInstance method:

  1. Declare a static variable to hold the instance of the class, ensuring it’s always available, but inside of  sharedInstance method context.
  2.  dispatch_once_t which ensures that the initialization code executes only once.
  3. Instance of MySingletonClass.
  4. Finally return the instance class.

Finally I have created a simple function that updates the local attribute and returns its value. As you can see neither the attribute nor the method are static.

This is the header class:

 

Pattern usage

This is my singleton implementation class:

 

 

Integrating FontAwesome on watchkit

The aim of this post is integrating FontAwesome on watchkit extension target. Font Awesome gives you scalable vector icons. This font has many advantages. First, a would dare to say that you will find the icon that you were looking for in its catalog. Second, that if you do not need more than one color, instead of placing an image resource you will be placing a character. Could y0u  figure it out how much space are you saving up?. And third, that you will not have problem on scaling because it is a vector image.

The base project

For setup the base project just follow the instructions from a previous post. You have to add the 3 necessary files for integrating font awesome, at the end of this post you will find the link to the project on GitHub.

Integrating FontAwesome on watchkit

 

And be sure that NSString+FontAwesome.m file is ready for the following targets.

targetsase

 

For both targets, be sure that:

1. In project properties>watchkitFontAweSome extension>BuildPhases>Copy Bundle Resources is included FontAwesome.ttf.

addfonttotarge

 

2. Add the following key array in the Info.plist file:

Fonts provided by application > Item 0 String FontAwesome.ttf

infoplist

 

You could also edit the source code and add the following xml snippet:

 Repeat the two steps for the other target.

Let’s code

Add a text label in the storyboard where we will print some icon with the new font:

interfacecontro

 

Link the label to an IBOutlet in InterfaceController.m

iboutlet2

Add the following snippet for adding some text to the label:

In my case I have decided to put it on the willActivate method from InterfaceController.m. Basically what I am doing here is setting an attributed text, where fa-cloud-upload is the name of the icon that I am interested in showing. Finally, I am setting FontAwesome for the first character of the string, the rest of the string is presented with the default font.

Run the target extension.

targetextension

 

 

If you did not missed any step you should have to see the following in the simulator:

demofont

As you can see the fa-cloud-upload symbol has been shown at the beginning of the text. You can also download this project from Github.