Starting from scratch, I learned iOS development (5): IOS controls (2), Slider

Source: Internet
Author: User

Next, we will continue to learn about other IOs controls. The controls used this time include slider, and of course there are some labels that have been used before.

We will not create a new project this time. Of course, if you want to create a new project, you can use the previous project control fun.

As shown in the last article

We added an imageview, two labels, and two textfields. Now we continue to add other controls.

1) Add slider and label
Slider is similar to a slider. It slides between the left and right sides (or up and down) to change the value. In the object library, find the slider

Drag it to the interface and stretch it to your favorite length, as shown in figure

2) Set slider attributes
When slider is selected, check attributes inspector. There are several values in the slider column of attributes inspector.

1 indicates the value (minimum value) When Slider's slider slides to the leftmost side, 100 indicates the value (maximum value) When Slider's slider slides to the rightmost side, and 50 indicates the initial value of slider, after the setting is complete, the slider control automatically adjusts the position based on the set value.

3) Add a label
Add a label control on the side of the slider to display the current value of the slider.

I) To ensure uniformity of the interface layout, align the newly added label and the two labels above with the baseline on the right (three labels are selected at the same time, select editor> align> right edges in the menu bar, or press the shortcut key command +]).
Ii) change the label content to 50 (select the label and click the return key on the keyboard), which is consistent with the initial value of slider.
Iii) locate alignment in attributes inspector to align the label text to the right.
Iv) Make sure that the length of the newly added label is greater than 50 because the maximum value of the slider is 100. Therefore, if the label length and 50 keep, when the slider moves to the rightmost, the label cannot be displayed.
Now, the label attributes are set. Add outlet and action.

4) add outlet for the label and action for the slider
Because when we slide the slider, the label will display the current value of the slider in real time. To change the label value, we need an outlet to point to the label and then use outlet to change the label value.

The method to add is simple. Select the label, press and hold the control key, and drag it to bidviewcontroller. H. In the pop-up box, name the outlet as sliderlabel, and click return to complete the adding.

Add action, select the slider, and hold down the control key to the bidviewcontroller. h, in the pop-up box, change connection to "action", name the action sliderchanged, and click return to complete the addition.

Note the event option. Here, "value changed" is selected, that is, when the position of the slider changes, the song action is triggered.

The added bidviewcontroller. H is as follows:

#import <UIKit/UIKit.h>@interface BIDViewController : UIViewController@property (weak, nonatomic) IBOutlet UITextField *nameField;@property (weak, nonatomic) IBOutlet UITextField *numberField;@property (weak, nonatomic) IBOutlet UILabel *sliderLabel;- (IBAction)textFieldDoneEditing:(id)sender;- (IBAction)backgroundTap:(id)sender;- (IBAction)sliderChanged:(id)sender;@end

Bidviewcontroller. m is as follows:

#import "BIDViewController.h"@implementation BIDViewController@synthesize nameField;@synthesize numberField;@synthesize sliderLabel;......- (IBAction)sliderChanged:(id)sender {}

5) Add code
Add the following code in sliderchanged

- (IBAction)sliderChanged:(id)sender {    UISlider *slider = (UISlider *)sender;    int progressAsInt = (int)roundf(slider.value);    sliderLabel.text = [NSString stringWithFormat:@"%d", progressAsInt];}

The code is quite understandable. When the slider position changes, sliderchanged is triggered. In sliderchanged, the sender is converted to a uislider object, and the current value of the slider position is obtained, then, assign the current value to the label.

6) Compile and run
Command + B Compilation
Command + R run
Under normal circumstances, the program will not have any problems, the iPhone simulator will run, and then slide the slider, the label value will change with the slider position.

Initial program running Screen

Slide the slider to change the label value.

 

Control fun 2

 

P.s. this article begins to focus on the newly added content. Some of the content that is the same as the previous one is omitted here. It is just a simple description. If you can't understand it, you can read the previous articles or leave a message to me. I will reply one by one. Thank you!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.