screen-shot

Hello again readers, we were just thinking a new category to our blog posts, so here we bring you a post on watchOS. Yes this post will guide you through the basics of how to develop an app for the Apple watch.

This post will help you create a simple table view which will display a label and a detail Interface controller which will contain the details of the cell selected in the table view.

Simulator Screen Shot Sep 27, 2016, 10.55.44 AM

Tables basically shows the list of data whose contents changes dynamically. The class from which it inherits is WKInterfaceTable class. Note that tables on watch OS supports only single columns.

The layout should be set in the interface of the watch extension and the data to be displayed should be displayed runtime.

Screen Shot 2016-09-27 at 11.07.36 AM

MainWC is the Scene which will be displayed first as the watch app launches, I have placed a row controller and a label in it called “Country Name”, give the outlet to this label in the row controller class. This will be the custom class for you row controller. You can add one or more row controllers in the Scene as per your requirement. The row controller is a template used for displaying the content in the app at run time.

For this first we need to determine the number of rows that will be displayed in the app. The method in which we pass the number of rows is setNumberOfRows:withRowType: and we can use this to iterate over the total number and add content on each row with rowControllerAtIndex:.

This is the array I have used to insert the data.

arrWeekDay = [[NSMutableArray alloc] initWithObjects:@"Sunday",@"Monday",@"Tuesday",@"Wednesday",@"Thursday",@"Friday",@"Saturday", nil];

[self.weekName setNumberOfRows:arrWeekDay.count withRowType:@"city"];
NSInteger rowCount = self.weekName.numberOfRows;
// Iterate over the rows and set the label for each one.
for (NSInteger i = 0; i < rowCount ; i++) {
    // Get the to-do item data.
    NSString* itemText = arrWeekDay[i];
    // Assign the text to the row's label.
    WeekDay* row = [self.weekName rowControllerAtIndex:i];
    [row.lblName setText:itemText];
}

Now the part is running the watch app. Go to the target selection in Xcode and select the watch extension. Set the device as specified, iPhone 7 + Apple Watch Series 2 (this will be shown if you have xcode 8, in Xcode 7.2 iPhone 7 will not be there.) Hit the play button.

You will be shown a new simulator specially made for watch, the watch app run there.

          Simulator Screen Shot Sep 27, 2016, 10.56.50 AM          Simulator Screen Shot Sep 27, 2016, 10.56.34 AM

Now we will see what can we do if we select the row of this table,

There is a similar method as for the iOS, didSelectRowAtIndexPath for the WatchOS called didselectrowatindex. This is how you use it,

-(void)table:(WKInterfaceTable *)countryName didSelectRowAtIndex:(NSInteger)rowIndex
{
    NSString *data = [arrCityName objectAtIndex:rowIndex];
    [self presentControllerWithName:@"detailWC" context:data];
}

Here the present controller with name will present the scene and the context will send the data to the next presenting controller. We can use this data in the next controller.

Here is have passed the selected day to the next controller and displayed it through the context in the next controller in a label.

zRun it again and select any day, a new interface will be presented, with the day you selected as the label in it.
Simulator Screen Shot Sep 27, 2016, 11.56.47 AM          Simulator Screen Shot Sep 27, 2016, 11.56.42 AM

Thats all about how to display data in tables in WatchOs, for further practice try to generate different results on the select, calculations with the help of the data from frameworks. Thanks.

Table view on the Wrist…!

Arpit Dhamane

I am a Computer Engineer, By profession i am iOS Developer. I like to explore & learn new things, R&D in new technologies, also there is a lot of SARCASM left in me to come out...!!! Feel free to contact me for any queries, i would be more than happy to help you out. I give my job description (in Hindi) as “Han Mai Keyboard Thokta Hun”.

Category: Uncategorized
491 views