Learn iOS development from scratch (v): iOS controls (2), Slider

Here you continue to learn about other iOS controls, the controls you'll use this time with sliders, and, of course, some control labels that you've used before.

This time we're not building a new project, and of course if you're willing to recreate a new one, we're still using the previous item control fun.

In the previous article, our final results are as follows

We have added a imageview,2 label and 2 TextField, and now we continue to add additional controls on that basis.

1) Add slider and label
slider is similar to a slider, sliding around (or up or down) to change the value, found in the object library slider< BR style= "margin:0px; padding:0px; " >
drag into the interface and stretch it to the length you like

2) Set the properties of the slider
With the slider selected, see Attributes Inspector, there are several values under the slider bar in Attributes Inspector.

1 indicates the slider slider to the leftmost value (minimum), 100 indicates slider slider to the rightmost value (maximum), 50 for the slider's initial value, after the setting is complete, the slider control automatically adjusts the position according to the value set.

3) Add label
Add a Label control on the side of the slider to display the current value of the slider and add the finished image as

i) for the uniformity of the interface layout, align the newly added label and the top 2 labels to the right (with 3 labels selected, and then select Editor>align>right Edges in the menu bar, or shortcut command +]).
II) Change the contents of the label to 50 (after the label is selected, click the Return key on the keyboard), and the slider's initial value is the same.
III) Locate the alignment in Attributes inspector, and align the label text to the right.
IV) Be sure to make the newly added label longer than 50 because the slider has a maximum value of 100, so if the label length and 501 are straight, the label will not display when the slider of the slider moves to the far right.
Well, the property of the label is also set to complete, and the following starts adding outlet and action.

4) Add outlet to label, add action to slider
Because when we slide the slider, the label displays the current value of the slider in real time, and in order to change the value of the label, we need a outlet to point to the label and then use outlet to change the value of the label.

Add the method is very simple, select the label, control-Drag to BIDViewController.h, in the popup box, for outlet to take a name called Sliderlabel, click Return, complete the Add.

add action, click the slider, Control-drag to BIDViewController.h, and in the popup box, change connection to "Action", Take a name for the action called Sliderchanged, and click Return to complete the addition.
Note the event option, where the" Value Changed "is selected, This means that when the position of the slider changes, the song action is triggered.

Add the following BIDViewController.h:

#import<UIKit/UIKit.h>@interfaceBidviewcontroller: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 as follows:

#import "BIDViewController.h"@implementationBidviewcontroller@synthesizeNameField;@synthesizeNumberfield;@synthesizeSliderlabel;-(Ibaction) sliderchanged: (ID) Sender {}

5) Add code
Add the following code to the Sliderchanged

-(Ibaction) sliderchanged: (ID) Sender {UISlider*slider = (UISlider *) sender; intProgressasint = (int) roundf (Slider.value); Sliderlabel.text= [NSString stringWithFormat:@"%d", Progressasint];}

6) Compile run
Normally there is no problem with the program, the iphone emulator will run and then slide the slider, and the value of the label will change depending on the position of the slider.
initial screen of program operation

Slide the slider, and the label value changes.