Implementing the Volume View
In the volume view, the
application will accept input for the dimensions of a box (length,
width, height) and a sphere (radius) and calculate the volume of the
object based on these values. The interface elements will be largely
identical to the area view but will require an additional field (height)
for the box calculation. Begin the implementation by editing the VolumeViewController header.
Adding Outlets and Actions
With the exception of some
terminology changes required by our switch from 2D to 3D, the outlets
and actions that will be required in the volume view should be very
familiar:
boxWidth (UITextField): Field for entering the width of a box
boxLength (UITextField): Field for entering the length of a box
boxHeight (UITextField): Field for entering the height of a box
sphereRadius (UITextField): Field for entering the radius of a sphere
boxResult (UILabel): The calculated area of the rectangle
sphereResult (UILabel): The calculated area of the circle
summaryViewController (SummaryViewController): The instance of the summary view
calculate (method): Performs the area calculation
hideKeyboard (method): Hides the onscreen keyboard
Edit the
VolumeViewController.h file to include the necessary outlets and actions
for the view. When finished, your code should look like Listing 4.
Listing 4
1: #import <UIKit/UIKit.h> 2: #import "SummaryViewController.h"
3:
4: @interface VolumeViewController : UIViewController {
5: IBOutlet UITextField *boxWidth;
6: IBOutlet UITextField *boxHeight;
7: IBOutlet UITextField *boxLength;
8: IBOutlet UITextField *sphereRadius;
9: IBOutlet UILabel *boxResult;
10: IBOutlet UILabel *sphereResult;
11: IBOutlet SummaryViewController *summaryViewController;
12: }
13:
14: @property (retain, nonatomic) UITextField *boxWidth;
15: @property (retain, nonatomic) UITextField *boxHeight;
16: @property (retain, nonatomic) UITextField *boxLength;
17: @property (retain, nonatomic) UITextField *sphereRadius;
18: @property (retain, nonatomic) UILabel *boxResult;
19: @property (retain, nonatomic) UILabel *sphereResult;
20:
21: -(IBAction)calculate:(id)sender;
22: -(IBAction)hideKeyboard:(id)sender;
23:
24: @end
|
Because of the similarity
to the area view, we won’t go into detail on the individual lines.
Let’s move on to the volume view itself.
Creating the View
Like the layout of the area
view, the volume view will collect data, provide the user with a
Calculate button and, of course, display the results. Figure 9 shows a finished version of the view.
By the Way
The volume view includes
images to help users identify the values that they will need to enter.
If you didn’t drag the SphereVolume.png and BoxVolume.png images to your
Xcode resources when building the area view, this is a good time to add
them!
Open VolumeView.xib in
Interface Builder and drag four text fields to the view. For the volume
calculations, three fields should be grouped for length, width, and
height of the box. A single field is all that is required for the
sphere. Be sure to set the field attributes so that the keyboard
displayed is a number pad. Add labels to the view to identify each of
the fields for the user.
Position two additional UILabel
instances below the box/sphere input fields—these will be used for the
output of the calculations. Be sure to clear the default contents of
these labels, or set them to 0. Using the Attributes Inspector (Command+1), size all the labels and fields appropriately.
To add the images, drag
image views from the Library to the view. Set the contents of the image
views by opening the Attributes Inspector (Command+1) for each view and
choosing the BoxVolume.png or SphereVolume.png images.
Finish the view by adding
two buttons: the Calculate button at the bottom of the view and the
invisible button used to hide the keyboard. Remember to expand the “hide
keyboard” button to fill the view and send it to the back. Open the
Attributes Inspector (Command+1) for the button, and choose Custom for
the button type to make the button invisible.
Connecting Outlets and Actions
Connect
the fields, labels, and buttons in Interface Builder to the appropriate
outlets that you created in the VolumeViewController.h file.
Control-drag from the File’s Owner icon in the Document window to each
of the input fields and output labels; choose the appropriate outlet
when prompted.
To connect the button controls to the actions, Control-drag from the two UIButton instances to the File’s Owner, choosing the fitting calculate and hideKeyboard method when prompted.
Implementing the Volume Calculation Logic
Switch back to Xcode and edit the VolumeViewController.m file. As before, define the Pi constant at the top of the file:
Next, use the @synthesize directive to create the getters and setters after the @implementation directive:
@synthesize boxWidth;
@synthesize boxHeight;
@synthesize boxLength;
@synthesize sphereRadius;
@synthesize boxResult;
@synthesize sphereResult;
Create and edit the calculate
method to determine the volume of the two shapes. For the box, this is
length×width×height, and for the sphere, 4/3×Pi×R^3. Use the results to
populate the boxResult and sphereResult labels in the view. Our implementation of this method is provided in Listing 5.
Listing 5.
-(IBAction)calculate:(id)sender {
float floatBoxResult=[boxWidth.text floatValue]*
[boxLength.text floatValue]*[boxHeight.text floatValue];
float floatSphereResult=(4/3)*Pi*[sphereRadius.text floatValue]*
[sphereRadius.text floatValue]*[sphereRadius.text floatValue];
NSString *stringBoxResult=[[NSString alloc]
initWithFormat:@"%1.2f",floatBoxResult];
NSString *stringSphereResult=[[NSString alloc]
initWithFormat:@"%1.2f", floatSphereResult];
boxResult.text=stringBoxResult;
sphereResult.text=stringSphereResult;
[stringBoxResult release];
[stringSphereResult release];
[summaryViewController updateTotal];
}
|
By the Way
Because
only the logic for the calculations has changed, you should refer to
the area view calculation for a detailed description of the methods used
here.
Add the hideKeyboard method so that the user can dismiss the onscreen keyboard by touching the background of the view:
-(IBAction)hideKeyboard:(id)sender {
[boxWidth resignFirstResponder];
[boxLength resignFirstResponder];
[boxHeight resignFirstResponder];
[sphereRadius resignFirstResponder];
}
Finally, release the objects in the dealloc method:
- (void)dealloc {
[boxWidth release];
[boxHeight release];
[boxLength release];
[sphereRadius release];
[boxResult release];
[sphereResult release];
[super dealloc];
}
