Let's design the screen that will accept the factors of the model we created as input. The screen will have seven input boxes to accept the factors, one button, and an output textbox to display the predicted result:

Let's work on the storyboard that is required for the app. What is a storyboard? A storyboard displays the screen of content and the transitions between that content. It gives us a visual representation of the application's UI. We get a WYSIWYG (short for what you see is what you get) editor where we can see the changes in real-time.

To open the storyboard, select the Main.storyboard option in the project navigator. This will open a canvas where we can design the screen. We can now add elements and design the canvas:

The same can also be coded instead of using the drag-and-drop approach. To do so, start by defining the text fields that are used as input in the ViewController class:

@interface ViewController ()<UITextFieldDelegate>
{
 UITextField* bizropfeild,*roomsfeild,*agefeild,*highwaysfeild,*taxfeild,*ptratiofeild,*lstatfeild;
}
@end

Then, within the CreateView method, we implement the design of each text field. The following is the sample for the first couple of text fields; the same approach can be used for the rest of the text fields. The completed project code is available in the chapter2_ios_prediction folder.

First, create a header text field, Estimate the value of real estate:

UILabel *headerLabel = [[UILabel alloc]initWithFrame:CGRectMake(10, 20, self.view.frame.size.width-20, 25)];
 headerLabel.font = [UIFont fontWithName:@"SnellRoundhand-Black" size:20]; //custom font
 headerLabel.backgroundColor = [UIColor clearColor];
 headerLabel.textColor = [UIColor blackColor];
 headerLabel.textAlignment = NSTextAlignmentCenter;
 headerLabel.text=@"Estimate the value of real estate";
 [self.view addSubview:headerLabel];
 
 
 UIView *sepratorLine =[[UIView alloc]initWithFrame:CGRectMake(0, 50, self.view.frame.size.width, 5)];
 sepratorLine.backgroundColor=[UIColor blackColor];
 [self.view addSubview:sepratorLine];

Next, create another text field, Enter real estate details:

UILabel *detailLabel = [[UILabel alloc]initWithFrame:CGRectMake(10, 55, self.view.frame.size.width-20, 25)];
 detailLabel.font = [UIFont fontWithName:@"SnellRoundhand-Black" size:18]; //custom font
 detailLabel.backgroundColor = [UIColor clearColor];
 detailLabel.textColor = [UIColor blackColor];
 detailLabel.textAlignment = NSTextAlignmentLeft;
 detailLabel.text=@"Enter real estate details";
 [self.view addSubview:detailLabel];

Next, create a field to enter the input for a proportion of non-retail business in acres:

 UILabel *bizropLabel = [[UILabel alloc]initWithFrame:CGRectMake(5, 85, self.view.frame.size.width-150, 35)];
 bizropLabel.font = [UIFont fontWithName:@"TimesNewRomanPSMT" size:12]; //custom font
 bizropLabel.backgroundColor = [UIColor clearColor];
 bizropLabel.numberOfLines=2;
 bizropLabel.textColor = [UIColor blackColor];
 bizropLabel.textAlignment = NSTextAlignmentLeft;
 bizropLabel.text=@"Bizrope, The proportion of non-retail business acres per town";
 [self.view addSubview:bizropLabel];
 
 bizropfeild = [[UITextField alloc] initWithFrame:CGRectMake(self.view.frame.size.width-140, 85, 130, 35)];
 bizropfeild.delegate=self;
 bizropfeild.layer.borderColor=[UIColor blackColor].CGColor;
 bizropfeild.layer.borderWidth=1.0;
 [self.view addSubview:bizropfeild];
 

Now create a field to enter the input for the average number of rooms per dwelling:

UILabel *roomsLabel = [[UILabel alloc]initWithFrame:CGRectMake(5, 125, self.view.frame.size.width-150, 35)];
 roomsLabel.font = [UIFont fontWithName:@"TimesNewRomanPSMT" size:12]; //custom font
 roomsLabel.backgroundColor = [UIColor clearColor];
 roomsLabel.numberOfLines=2;
 roomsLabel.textColor = [UIColor blackColor];
 roomsLabel.textAlignment = NSTextAlignmentLeft;
 roomsLabel.text=@"ROOMS, the average number of rooms per dwelling";
 [self.view addSubview:roomsLabel];
 
 roomsfeild = [[UITextField alloc] initWithFrame:CGRectMake(self.view.frame.size.width-140, 125, 130, 35)];
 roomsfeild.delegate=self;
 roomsfeild.layer.borderColor=[UIColor blackColor].CGColor;
 roomsfeild.layer.borderWidth=1.0;
 [self.view addSubview:roomsfeild];

Then, create a button to hit the API:

UIButton *estimateButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
 [estimateButton addTarget:self action:@selector(estimateAction)
 forControlEvents:UIControlEventTouchUpInside];
 estimateButton.layer.borderColor=[UIColor blackColor].CGColor;
 estimateButton.layer.borderWidth=1.0;
 [estimateButton setTitle:@"Estimate" forState:UIControlStateNormal];
 [estimateButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
 estimateButton.frame = CGRectMake(self.view.frame.size.width/2-80, 375, 160.0, 40.0);
 [self.view addSubview:estimateButton];