designing yik yak ios app clone using xcode 6 and interface builder

10
This is the part 1 of the multipart series of Building an app every month in 2015 . In this month we will build a Yik Yak iOS app clone . Designing layouts for an iOS application Getting users location using CoreLocation Saving data to a cloud backend Parse. Fetching data around your location UITableViews and Customization. First and the foremost thing is go ahead install the app Yik Yak and play around with it to get a feel of how the application works. Yik Yak helps you to find what people are talking about around you. Around you is the key to the app being so viral these days. I personally feel that the apps which provides context like location are really interesting. With that said lets go ahead and create a single view application. Since we are going to build the app from scratch, delete the single view controller which you see in on the Main.storyboard. From the object library drag a Tableview controller, click on the is intial view controller checkbox , then go to editor embed in Navigation controller. iOS App Design using Xcode 6 and Interface Builder - Yik Yak clone Part 1 What you will learn as a iOS developer

Upload: shrikar-archak

Post on 16-Jul-2015

230 views

Category:

Mobile


1 download

TRANSCRIPT

This is the part 1 of the multipart series of Building an app every month in 2015. In this month we will build a Yik Yak iOSapp clone .

Designing layouts for an iOS applicationGetting users location using CoreLocationSaving data to a cloud backend Parse.Fetching data around your locationUITableViews and Customization.

First and the foremost thing is go ahead install the app Yik Yak and play around with it to get a feel of how the applicationworks.

Yik Yak helps you to find what people are talking about around you. Around you is the key to the app being so viralthese days. I personally feel that the apps which provides context like location are really interesting.

With that said lets go ahead and create a single view application. Since we are going to build the app from scratch, deletethe single view controller which you see in on the Main.storyboard.

From the object library drag a Tableview controller, click on the is intial view controller checkbox , then go toeditor embed in Navigation controller.

iOS App Design using Xcode 6 and Interface Builder - Yik Yak clone Part 1

What you will learn as a iOS developer

With the table view cell selected go to the size inspector and change the height to 100.

With the table view cell selected go to the attributed inspector and change the identifier to Cell

Drag 3 labels and a button from the object library and arrange it as shown below.

At this point we need to create two imageset in our image asset library which we will be using for our up and down arrowbuttons. Click on the Images.xcassets in the xcode and create a new image set. You can download the icons from here if

buttons. Click on the Images.xcassets in the xcode and create a new image set. You can download the icons from here ifyou want or you could use your own icons.

Click on the button. Delete the default title and change the image to up .

Hold alt and drag from the icon you just designed as shown in the image.. Make sure you change the background imageto down .

Drag a label in between the two button and change the text to 100

Lets align the buttons and label correctly at this point. For the up button the attributes should look something like this

For the label in between the buttons the attributes should look something like this

For the down button the attributes should look something like this

Lets add some autolayout constraints to these elements. Cmd+Click on the two button and the labels. Click on the pinicons and set the constraint on the right to 10. You should see add 3 constraints, click to add the constraints.

Similarly we will add constraint to the labels on the left side.

Also CTRL+ Drag from the 5m ago label to the left content view and select leading space to container margin.CTRL+Drag from the 5m ago to 4 replies label and select horizontal spacing.

At this point lets create our custom class for the UITableViewController and UITableViewCell. CMD+N to create a newCocoa touch file