Getting ready

We used buttons in Chapter 1, Development Tools, to discuss how to use Interface Builder to add controls to the user interface. In this recipe, we will describe the UIButton class in more detail. Open the FirstViewApp project, which we created in the previous recipe, in Xamarin Studio. Increase the height of the view, which we added, to cover the whole device screen in Interface Builder and save the document.

How to do it...

Perform the following steps:

How it works...

In this recipe, we have added a button to the user interface. This button changes the background color of its superview. Furthermore, we have accomplished this without using Interface Builder at all.

Let's see now what the code does. We create the following field that will hold the button object:

// A button to change the view's background color
UIButton buttonChangeColor;

In the CreateButton method, we create the button and set some properties. The method is shown in the following code:

// Create the appropriate rectangles for the button's frame
RectangleF viewFrame = this.subView.Frame;
RectangleF buttonFrame = new RectangleF (10f, viewFrame.Bottom - 200f, viewFrame.Width - 20f, 50f);

First, we assign the view's frame to a new variable named viewFrame. Then, we create a new RectangleF object named buttonFrame. This object will be assigned to the button's Frame property. Now that we have a frame for our button, we can initialize it as shown in the following code snippet:

// Create the button.
this.buttonChangeColor = UIButton.FromType (UIButtonType.System);
this.buttonChangeColor.Frame = buttonFrame;

The button is initialized with the UIButton.FromType(UIButtonType) static method. This method takes one parameter of the UIButtonType type and returns predefined types of buttons that are included in iOS SDK. The UIButtonType.System button enumeration value used here is the default type of button without any borders or background. After the buttonChangeColor object is initialized, we set its frame to the RectangleF value we created earlier.

Now that we have provided an initialization code for the button, we will set its titles (that's right, more than one) as shown in the following code:

// Set the button's titles
this.buttonChangeColor.SetTitle ("Tap to change view color", UIControlState.Normal);
this.buttonChangeColor.SetTitle ("Changing color...", UIControlState.Highlighted);

We call the UIButton.SetTitle(string, UIControlState) method twice. This method is responsible for setting the button's title for each given button state. The string parameter is the actual title that will be shown. The second parameter is an enumeration of the UIControlState type. This parameter indicates the different control states that apply to controls. These control states are as follows:

So, with the UIButton.SetTitle(string, UIControlState) method, we have set the title that will be displayed when the button is in its default state and the title that will be displayed while the button is being tapped.

After this, we set the button's handler for the TouchUpInside event and add it as a subview to subView using the following code:

this.buttonChangeColor.TouchUpInside += this.ButtonChangeColor_TouchUpInside;
// Display the button
this.subView.AddSubview (this.buttonChangeColor);

Inside the buttonChangeColor_TouchUpInside event, we change the background color of the view according to the Boolean field that we have declared, as shown in the following code:

if (this.isYellow) {
  this.subView.BackgroundColor = UIColor.DarkGray;
  this.isYellow = false;
} else {
  this.subView.BackgroundColor = UIColor.Yellow;
  this.isYellow = true;
}

This is done by setting the view's BackgroundColor property to the appropriate UIColor class instance we want, as shown in the preceding highlighted code. The UIColor object is a class with many different static methods and properties that allow us to create different colored objects.

When you compile and run the app on the simulator, notice the view's color change when you tap the button. Also notice how the button's title changes while the mouse cursor (or a finger on the device) is "touching" the button.

There's more...

In this recipe, we used the UIButton.FromType(UIButtonType) static method to initialize the button. A brief description of each of the enumeration flags of UIButtonType are as follows:

Changing the appearance of buttons

For creating custom buttons with the UIButtonType.Custom type, use the UIButton class' SetBackgroundImage and SetImage methods. They both accept one UIImage and one UIControlState parameter so that different images for different control states can be set. When setting images for buttons, be sure to set the UIButton.ContentMode property accordingly, irrespective of whether creating a custom button or not.

The functionality provided by the SetImage and SetBackgroundImage methods can also be accomplished in the corresponding Image and Background fields in the Attributes tab of the Inspector pad in Interface Builder. Select the state for which to set the desired image(s) from the drop-down list box and set the path to the image file, as shown in the following screenshot:

See also