A demo shows storyboard's powerful

This article reprinted to http://www.cocoachina.com/ios/20150330/11440.html

Today, I'm going to show you how skilled the use of storyboard and AutoLayout can improve your development speed and efficiency by completing a demo that has been deleted by long cell.

Delete an animation

Don't say much nonsense, create a single View application.

To storyboard Select our only Viewcontroller, find the menu bar of Xcode, edit->embed in-> Navigationcontroller. This time storyboard will automatically generate a navigationcontroller for you and speak Viewcontroller as Rootviewcontroller.

Click Navigationbar in Viewcontroller. The right Panel finds these properties

Find Title

Change title to City.

Navigationbar's title

has been shown as city.

Pull a tableview to Viewcontroller, and the constraint changes to this.

Constraints of TableView

Right-click on our TableView and set delegate and DataSource to our Viewcontroller.

Right-click TableView

Set up agents and data sources

Now, since delegate and DataSource are set up, some of the methods that must be implemented must be written in Viewcontroller.

At this time we have one cell missing, check tableview and find the right panel.

Add a cell prototype

At this time there will be a blank cell in our tableview, and we'll start with a system-customized basic style. Change identifier to Basiccell

Basiccell

Then, we're going to implement TableView's proxy method

Run.

Run effect

It takes no more than 2 minutes. How long will all the handwritten code take?

There are a few things we need to do in order to achieve the kind of cell in the first picture.

1. Add a two view in the cell, the bottom view is dedicated to the shadow, the second view is on top and has rounded corners. (Why have a view specifically to show shadows do not understand the self-Baidu). And the first view width is smaller than the second view.

2. The second view must have a imageview and two labels, this very simple pull-line constraints on it.

Direct.

First change the type of our cell to custom. Then change the identifier to "Customcell". Create a new class that inherits from UITableViewCell, It's called Customtableviewcell. is associated with the cell in our storyboard. (These operations believe that everyone will put.)

First add a shadow View (Shadowview). Drag a view directly onto our cell.

Add a container view (Containerview) to put our ImageView and two labels.

With this constraint you can see that our container view is significantly larger than the shadow view.

Then place our pictures and two labels as follows.

Here without care label constraints, need to pay attention to only ImageView, the first to ImageView add the following constraints.

This means that the top and bottom viewpadding with the container is 0, the left margin is 0, then the right button is selected ImageView, pull a line to our container view. This menu appears

Check equal Width, then go to the right to find our constraint, double click, the content changed to.

This constraint means that the width of the ImageView remains at three-tenths of the width of the parent view.

Now our cell's. h file is like this.

That block is my callback, you can use delegate here.

The. m file is so.

In addition to the gesture of that method is not too understood, the other is very simple, is to set some properties of the shadow, add to the cell Contentview set a long press gesture.

The meaning of the Chang ' an gesture method is to make a callback when the user moves to a certain level by pressing the cell.

The code in our Viewcontroller is like this.

OK, here, all our code is done. How long will it take you to write it all in code?

The address of the demo.

A demo shows storyboard's powerful