UIButton Basic Tutorial

UIButton Basic Tutorial

Buttons are simple elements that take finger taps as input. In other words, a button (sometimes known as a command button or push button) is a user interface element that provides the user a simple way to trigger an event like searching for a query at a search engine, interacting with dialog boxes, confirming an action.

In order to present button function we are going to add one to our “HelloWorld” application.

To do that open the MainController.java file on NetBeans and add the code below between img.setImage(UIImage.imageNamed(“logo.png”)) and mainView.addSubview(title)

public class ViewController extends UIViewController { 
  
    @Override 
    public void loadView() { 
        UIView mainView = new UIView(); 
        mainView.setBackgroundColor(UIColor.whiteColor()); 
  
        UILabel title; 
        title = new UILabel(new CGRect(0, 390, 320, 40)); 
        title.setText("Hello World!"); 
        title.setTextAlignment(UITextAlignment.Center); 
  
        UIImageView img = new UIImageView(new CGRect(75, 80, 170, 220)); 
        img.setImage(UIImage.imageNamed("logo.png")); 
  
        UIButton button = UIButton.buttonWithType(UIButtonType.System); 
        button.setTitle("Button", UIControlState.Normal);  
        button.setFrame(new CGRect(110, 430, 100, 50)); 
        
        button.addTarget(new UIControlDelegate() { 
  
            @Override 
            public void exec(UIControl uic, UIEvent i) { 
                title.setText("Hello back"); 
            } 
        }, UIControlEvents.TouchUpInside); 
        
        mainView.addSubview(button); 
        mainView.addSubview(title); 
        mainView.addSubview(img); 
  
        setView(mainView); 
  
    } 
} 

As you see in the snapshots above, we have a button right bellow the label “HelloWorld!” which on click changes it to: “Hello Back”

Let’s explain what we did:

An instance of the UIButton class implements a button on the screen. Although it does not need initialization you may need to define the type of button you want to create. To do souse the buttonWithType() method. This method takes as parameter UIButtonType.System that creates the default button in any environment. If you want to use another type of button you can choose among ContactAdd, Custom, DetailDisclosure, infoLight, infoDark or System.

The setTittle method takes two parameters and has two basic functions.The first parameter sets the text that will appear on the button while the second one sets the button’s state.

The setFrame method describes the position and size of the button by taking a CGRect parameter.

The addTarget method takes an action and an event (exec()) as parameters and in this specific example describes what happens when the button is pressed.(UIControlEvents.TouchUpInside)

The second parameter is a UIEvent which in this case is the event of touching the button. The first parameter describes the action via the UIControlDelegateinterface, which contains only the exec method that we implement in order to define a specific function. In the above example we change the UILabel’s text to “Hello Back”.

To do that we need UILabel to have wider range, so we put the declaration outside of the loadView method.

Finally we add the button to the main view via the addSubView method.