iOS开发学习（二）：控件学习

最新推荐文章于 2024-09-08 16:15:28 发布

原创最新推荐文章于 2024-09-08 16:15:28 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios开发 #控件 #label #app

iOS Development 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了iOS开发中的基本控件，包括Slider、SegmentedControl和Switch的使用方法及实例代码，帮助初学者快速掌握这些控件的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面了解了iOS的基本知识，并且写了一个简单的app，从现在的文章开始就正式进入iOS的学习中了。先学习以下iOS的基本控件。

Slider控件：

1.新建一个项目，选择single view application。

2.添加一个slider和一个label

slider类似一个滑块，上下或者左右滑动来改变数值。

设置属性：

选中slider的情况下，查看attributes inspector，在attributes inspector中的Slider栏下有几个数值需要注意

其中0表示Slider的滑块滑到最左边时的数值（最小值），100表示Slider的滑块滑到最右边时的数值（最大值），50表示Slider的初始值，设置完成后，slider控件会根据设置的值自动调整位置。

添加完slider和label的图如下：

我们下面要做的就是拖动slider，能够使得label中显示slider的数值。

因为要修改label的数值，所以我们需要为它添加outlet，slider活动然后修改label的值，所以我们需要为slider添加action，添加action和outlet的方法上文已经说过了。

选中label，按住control键拖动到UIExample1ViewController.h中去。在弹出的框框里，为Outlet取一个名字叫做labelOutlet，单击return，完成添加。

选中slider，按住control键拖动到UIExample1ViewController.h中去。在弹出的框框里，为action取一个名字叫做sliderAction，单击return，完成添加。

添加code：

在sliderAction事件中添加以下代码：

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

OK,编译运行，可以看到随着slider的拖动，label就会显示不同的数值。

2.Segmented Control And Switch

我们在上面的情况下接着添加控件。

1. Segmented Control可以有多个值进行选择，每个选择就可以代表一个页面。例如下面这样：

1）添加segmented control，然后调整它的位置以及宽度。如下图：

2）添加二个imageview 到界面上，我们要点击segmented control的first的时候，显示下面的一个label和一个slider，点击second和third的时候都显示两个画面。这3页面只能有一个显示，其余2个都隐藏。

添加2个imageview 到界面上，设置属性为hidden。并且导入图片，添加好图片。

并且给这两个imageview创建outlet

3）下面我们就是实现segmentd control的action事件，根据选择的segment，来选择show出来不同的界面。

segmented control的事件我们上面已经添加完成了，直接＋code：

- (IBAction)controlAction:(id)sender {
    if ([sender selectedSegmentIndex ] == 0 ) {
        firstImageView.hidden = YES;
        secondImageview.hidden = YES;
    }
    else if ( [sender selectedSegmentIndex ] == 1){
        firstImageView.hidden = NO;
        secondImageview.hidden = YES;
    }
    else{
        firstImageView.hidden = YES;
        secondImageview.hidden = NO;
    }
}

第一个if语句标示当选择第一个segment的时候，隐藏两个imageview，后面都类似功能。

执行程序：

Ok，基本的功能算是已经实现了。

2.添加3个switch到界面上，如下：

3.添加outlet和action

为3个switch添加outlet ，3个switch共用一个action，segmented control使用一个action。如何使得3个switch共用一个action看上文。添加完成之后的.h文件如下：

#import <UIKit/UIKit.h>

@interface UIExample1ViewController : UIViewController
- (IBAction)sliderAction:(id)sender;
@property (weak, nonatomic) IBOutlet UILabel *lableOutlet;
@property (weak, nonatomic) IBOutlet UISwitch *firstSwitch;
@property (weak, nonatomic) IBOutlet UISwitch *secondSwitch;
@property (weak, nonatomic) IBOutlet UISwitch *thirdSwitch;
- (IBAction)switchAction:(id)sender;
- (IBAction)controlAction:(id)sender;

@end

.m文件如下：我这里没有自动添加属性，所以我都是自己写的。不知道是什么原因导致的没有自动添加。

#import "UIExample1ViewController.h"

@interface UIExample1ViewController ()

@end

@implementation UIExample1ViewController

@synthesize lableOutlet;
@synthesize firstSwitch;
@synthesize secondSwitch;
@synthesize thirdSwitch;
.....
- (IBAction)switchAction:(id)sender {
}

- (IBAction)controlAction:(id)sender {
}
@end

实现switchAction

- (IBAction)switchAction:(id)sender {
    UISwitch * whichSwitch = (UISwitch * ) sender;
    BOOL seeting = whichSwitch.isOn;
    [ firstSwitch setOn:seeting animated:YES];
    [ secondSwitch setOn:seeting animated:YES];
    [ thirdSwitch setOn:seeting animated:YES];
}

因为3个switch都关联到了这个action，如果任何一个switch改变的话，都会出发这个aciton。在该方法中，首先将sender强制转换成UISwitch类型，这样就可以使用UISwitch定义的属性了，isOn用来判断Switch的状态是打开还是关闭（Switch仅有的2种状态），最好根据触发事件的Switch状态，将另一个switch也设置成相同的状态，程序中为了方便，并没有判断到底是哪个switch触发了该Action，只是简单的将2个switch设成相同的状态而已。setOn方法是根据后面的BOOL型参数的值来设置Switch的状态是打开还是关闭（ON，OFF）。

animated是指当Switch从一种状态切换到另一种状态后，其滑块是否有活动效果，如果是YES，则滑块滑动的慢点，给人的感觉滑块是慢慢移动过去的，如果设成NO，滑块会很快地改变位置，滑动的速度很快。

运行程序可以看到，3个switch状态都是一样的，如果有一个switch改变了，其余2个也都跟着改变。

打完手工。