关闭

【学习ios之路:UI系列】ios中常见的几种控件.(UISlider,UISwitch,UIStepper,UISegmentedControl)

标签: ios控件
1287人阅读 评论(0) 收藏 举报
分类:

一.滑块控件(UISlider)  效果如下

注:系统原来效果如下

具体功能运用:

①创建滑块控件(UISlider),设置控件大小,并添加到window视图上,后释放

 UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(20, 30, 280, 100)];
 [self.window addSubview:slider];
 [slider release];
②设置最大值,最小值,以及开始时滑动条所在的位置

    //设置最大值10
    [slider setMaximumValue:10];
    //设置最小值0
    [slider setMinimumValue:0];
    slider.value = 5;//当前位置是4.显示效果如上图.
③设置滑动条的颜色,即滑动前和滑动后的颜色

  slider.minimumTrackTintColor = [UIColor orangeColor];//设置移动前线条的颜色
  slider.maximumTrackTintColor = [UIColor blackColor];//设置移动后线条的颜色
    
④设置滑动控件左右的图片
slider.minimumValueImage = [UIImage imageNamed:@"1@2x.png"];//设置滚动条最左边的图片
slider.maximumValueImage = [UIImage imageNamed:@"3@2x.png"];//设置滚动条最右边的图片
⑤设置手指点击时按钮的颜色

slider.thumbTintColor = [UIColor grayColor];//设置中间按钮移动按钮的颜色
⑥将按钮换成图片,正常状态下

[slider setThumbImage:[UIImage imageNamed:@"4@2x.png"] forState:UIControlStateNormal];
⑦移动时触发的响应事件

1).触发状态为:UIControlEventValueChanged,当触发时,slider.value的值会随之改变

2)当UISlider的进度值发生改变时,会自动调用self的function:方法,并且将UISlider作为第一个参数传入.

 [slider addTarget:self action:@selector(function:) 
                                       forControlEvents:UIControlEventValueChanged];
⑧其他功能

//设置轴迹图片
- (void)setMinimumTrackImage:(UIImage *)image forState:(UIControlState)state;
- (void)setMaximumTrackImage:(UIImage *)image forState:(UIControlState)state;
//通过状态获取点击按钮的图片
- (UIImage *)thumbImageForState:(UIControlState)state;
//通过事件触发状态获取足迹图片.
- (UIImage *)minimumTrackImageForState:(UIControlState)state;
- (UIImage *)maximumTrackImageForState:(UIControlState)state;

//获取当前状态时的对应要的图片
UIImage *image = slider.currentThumbImage; 
<span style="font-size:18px;"></span><pre name="code" class="objc">UIImage *image = slider.currentMinimumTrackImage; 
UIImage *image = slider.currentMaximumTrackImage;



二.开关控件(UISwitch) 效果如下


开关控件的常见操作:

①创建开关控件,设置大小,添加到视图上,并释放

UISwitch *switchView = [[UISwitch alloc] initWithFrame:CGRectMake(50, 100, 280, 100)];
[self.window addSubview:switchView];
[switchView release];
②设置开关状态

BOOL setting =  switchView.isOn;//获得开关状态
[switchView setOn:setting animated:YES];//设置开关状态
③设置颜色

  //<span style="font-size:14px;">开关控件切换槽<span class="s6"> </span>颜色</span>.如将上面的绿色替换成橘黄色
  switchView.onTintColor = [UIColor orangeColor];
  //设置按钮的颜色
  switchView.thumbTintColor = [UIColor redColor];
  //<span style="font-size:14px;">开关控件外部的颜色</span>
  switchView.tintColor = [UIColor purpleColor];
④设置图片(在ios7 中无效果)

switchView.onImage = [UIImage imageNamed:@"1@2x.png"];
    
switchView.offImage = [UIImage imageNamed:@"3@2x.png"];
    
⑤开关控件触发的事件处理

[switchView addTarget:self action:@selector(switchTag:)
                                   forControlEvents:UIControlEventValueChanged];
实现代码如下switchTag:

- (void)switchTag:(UISwitch *)switchTag {     
        BOOL setting = switchTag.isOn;
        [swithch setOn:setting animated:YES];
        if (setting)
        {
            NSLog(@"on");
        }else
        {
            NSLog(@"off");
        }
  }
三.计数器控件(UIStepper)效果如下


创建功能如下

①创建计数器控件,并释放

UIStepper *step = [[UIStepper alloc] init];
step.frame = CGRectMake(50, 300, 300, 300);
[self.window addSubview:step];
[step release];
②设置最大值和最小值,以及每次加减时的值

   每按一次减号,value就会自动减去一定的数值(数值大小由stepValue决定)
   每按一次加号,value就会自动增加一定的数值(数值大小由stepValue决定)

    step.maximumValue = 1;
    step.minimumValue = 0.1;
    step.stepValue = 0.1;//每次增减的值
③设置是否循环和是否连续

step.continuous = YES;//默认是yes
step.wraps = YES;//判断是否循环,即到最大值后又从最小值开始.
④设置颜色,如上图的紫色

 step.tintColor = [UIColor purpleColor];//设置按钮的颜色;
 [step setBackgroundColor:[UIColor orangeColor]];//设置背景颜色
 [step setBackgroundImage:[UIImage imageNamed:@"1@2x.png"]
                                               forState:UIControlStateNormal];

⑤其它操作

//设置背景图片,再某个状态时
- (void)setBackgroundImage:(UIImage*)image forState:(UIControlState)state 
//在某个状态时,获取背景图片,
- (UIImage*)backgroundImageForState:(UIControlState)state
⑥数字控件的事件处理

 [step addTarget:self action:@selector(stepTag:) 
                                 forControlEvents:UIControlEventValueChanged];
//事件响应方法实现
- (void)stepTag:(UIStepper *)stepper {
    [self.window viewWithTag:200].alpha = stepper.value;
} 
四. 选项卡控件UISegmentedControl,效果图如下

实现操作如下:

   NSArray *arr = [NSArray arrayWithObjects:
                       @"轻拍", @"长按", @"轻扫", @"平移", @"捏合", @"旋转", nil];
    UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] 
                                                         initWithItems:arr];
    segmentedControl.frame = CGRectMake(10, 40, 300, 40);
    [segmentedControl addTarget:self action:@selector(function:) 
                             forControlEvents:UIControlEventValueChanged];
    [self.window addSubview:segmentedControl];
    
   
其他操作

- (void)removeSegmentAtIndex:(NSUInteger)segment animated:(BOOL)animated;
- (void)removeAllSegments;//输出所有选项卡
  <span style="font-size:18px;"></span><pre name="code" class="objc"> segmentedControl.tintColor = [UIColor orangeColor];//设置边框颜色
    <span style="font-size:18px;"></span><pre name="code" class="objc"><pre name="code" class="objc"> NSInteger count  = segmentedControl.numberOfSegments;//计算个数










0
0
查看评论

UIStepper - 步进控件

UIStepper - 步进控件继承关系 NSObject ->UIResponder -> UIView ->UIControl -> UIStepper 概述UIStepper界面包括一个“+”按钮和一个“-”按钮,通过这两个按钮来增加和减小值,通常用于对特定范围...
  • go_fishing
  • go_fishing
  • 2016-03-25 16:15
  • 1031

IOS中的UISegmentedControl控件实现多行文本

默认的UISegmentedControl控件只能显示单行的文本,超过部分会用...代替,如果想启用多行文本,请使用以下代码。我是在MainBoardStroy中添加UISegmentedControl控件的,因此在对应的controller的viewDidLoad方法中添加如下代码: for(U...
  • hardstone1
  • hardstone1
  • 2017-06-16 09:28
  • 369

iOS学习笔记43——iOS6下自定义UI控件外观效果

尽管iOS原生的UI控件就已经有很不错的显示效果,但是App开发者仍然希望自己的产品与众不同,所以自定义UI外观成了每个App产品开发必做之事。今天就来做一个在iOS6下实现自定义UI的demo,内容及Demo来源于国外iOS博客raywenderlich,先看看美化前后效果差别(左边为美化前,右边...
  • tangren03
  • tangren03
  • 2013-04-05 16:33
  • 10341

iOS个人整理09-UIControl与子类:UIControlEvents事件,UISwitch

一、UISwitch 二、UISlider 三、UISegmentedControl
  • u010330109
  • u010330109
  • 2016-01-15 15:59
  • 355

UI 数字输入控件UIStepper

//在iOS5中新增了一个数字输入控件UIStepper,它可以递进式输入数量。UIStepper继承自UIControl,它主要的事件是UIControlEventValueChanged,每当它的值改变了就会触发这个事件 UIStepper *stepper=[[UIStepper alloc...
  • u010856537
  • u010856537
  • 2015-04-15 09:37
  • 1113

UISegmentedControl ,UIStepper,UISwitch,UISlider综合应用(实例需求)

需求:
  • duoduo_333
  • duoduo_333
  • 2014-08-28 22:50
  • 740

UI - UISegmentedControl、UISlider、UIImageView、UISwitch

// UIControl的子类(8个): // UITextField // UIPageControl // UISlider // UIButton // UISegmentedControl // UISwitch // UIDatePicker...
  • qq_16999801
  • qq_16999801
  • 2015-12-26 21:53
  • 199

IOS 开发-UI初级 (三)控件:UISwitch, UIActivityIndicatorView,UISlider,UISegmentedControl

标题中写到的控件在开发都是一些常用的控件,他们的效果如下图: 除了标题中的控件之外,这次还会更进一步的了解UILabel,UIButton和UITextField的一些属性和用法 1·UITextField :键盘的弹出与回收,边框,以及清除按钮等UITextField * textFie...
  • l947818238
  • l947818238
  • 2016-04-09 11:04
  • 593

iOS 小知识-设置UISwitch的颜色

效果图如下 lazy var mySwitch:UIView = { let sw = UISwitch.init() sw.onTintColor = UIColor.red return sw; }() lazy var m...
  • taishanduba
  • taishanduba
  • 2016-09-21 22:37
  • 6439

iOS UISwitch 设置默认为开,添加事件

#import "ViewController.h" @interface ViewController () @end @implementation ViewController ...
  • u011312237
  • u011312237
  • 2017-04-25 17:08
  • 255
    个人资料
    • 访问:87083次
    • 积分:1483
    • 等级:
    • 排名:千里之外
    • 原创:63篇
    • 转载:6篇
    • 译文:0篇
    • 评论:9条
    最新评论