关闭

随意细解:UI -- UISegmentedControl、UISlider

标签: ui界面图片
345人阅读 评论(0) 收藏 举报
分类:

UISegmentedControl

分段按钮:
每个分段按钮控制一个界面,每个界面是一个控制器来控制,并且可以切换界面。
注:如果选用图片初始化,必须选用镂空图

这里写图片描述

常用方法

  • initWithItems:
    UISegmentedControl独有的初始化⽅法,⽤来创建多个分段

  • setTitle: forSegmentAtIndex:
    为指定下标的分段设置title

  • selectedSegmentAtIndex
    被选中的segment下标
  • tintColor
    segmentedControl条的颜⾊(含每个segment的颜⾊)
  • addTarget: action: forControlEvents:
    给UISegmentedControl添加事件,controlEvent为UIControlEventValueChanged。

代码演示

UISegmentedControl *segmentControl = [[UISegmentedControl alloc]initWithItems:itemArr];
segmentControl.backgroundColor = [UIColor yellowColor];
segmentControl.frame = CGRectMake(20, 50, 300, 50);
// 设置默认选中(索引从0开始)
segmentControl.selectedSegmentIndex = 0;
// 修改选中的颜色
segmentControl.tintColor = [UIColor grayColor];
// 修改中间段的宽度
[segmentControl setWidth:200 forSegmentAtIndex:1];
[self.view addSubview:segmentControl];
[segmentControl release];

UISlider

滑块控件,通常⽤于控制视频播放进度,控制⾳量等。滑块提供了⼀系列连续的值,滑块停在不同的位置,获取到滑块上的值也不同。

这里写图片描述

常用属性

  • minimumValue

    设置滑块的最⼩值

  • maximumValue

    设置滑块的最⼤值

  • value

    设置滑块的当前值

  • minimumTrackTinkColor

    定义划过区域的颜⾊

  • addTarget: action: forControlEvents:

    给UISlider添加事件,controlEvent为UIControlEventValueChanged。

代码演示

UISlider *slider = [[UISlider alloc]initWithFrame:CGRectMake(30, 100, 300, 30)];
    slider.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:slider];
    // 设置轨迹颜色
    slider.minimumTrackTintColor = [UIColor greenColor];
    slider.maximumTrackTintColor = [UIColor cyanColor];
    // 设置滑动按钮颜色
    slider.thumbTintColor = [UIColor yellowColor];
    // 02-redo\01-refresh\03-loopback均为图片名
    [slider setThumbImage:[UIImage imageNamed:@"02-redo"] forState:(UIControlStateNormal)];
    [slider setThumbImage:[UIImage imageNamed:@"01-refresh"] forState:(UIControlStateHighlighted)];
    [slider setThumbImage:[UIImage imageNamed:@"03-loopback"] forState:(UIControlStateSelected)];
    slider.minimumValueImage = [UIImage imageNamed:@"01-refresh"];
    slider.maximumValueImage = [UIImage imageNamed:@"03-loopback"];
    // 设置滑块的初值、最大值、最小值
    // 如果想设置初始位置,需要先把最大最小值设置上,再给初值,才会发生变化
    slider.minimumValue = 0;
    slider.maximumValue = 10;
    slider.value = 1;
    // 添加滑动事件
    [slider addTarget:self action:@selector(sliderAction:) forControlEvents:(UIControlEventValueChanged)];

    [slider release];

UIImageView

动画

这里写图片描述

常用属性

  • image

    设置图片

  • animationImages

    设置⼀组动态图⽚

  • animationDuration

    设置播放⼀次⼀组动态图⽚的时间

  • animationRepeatCount

    设置重复次数

  • startAnimating

    开始动画

  • stopAnimating

    结束动画

代码演示

用UIImageView创建一个动画(跑图),slider控制 动画播放的事件间隔,并且 slider滑动到最大值,停止动画。

在viewDidLoad方法中:

// imageView动画(跑图)
    self.imageView = [[UIImageView alloc]initWithFrame:CGRectMake(30, 200, 300, 200)];
    self.imageView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:self.imageView];
    [self.imageView release];


    // 构建一个图片数组
    NSMutableArray *imageArr = [NSMutableArray array];
    for (int i = 1; i < 10; i++) {
        // 把图片名字拼接出来
        NSString *name = [NSString stringWithFormat:@"%d",i];
        UIImage *image = [UIImage imageNamed:name];
        [imageArr addObject:image];
    }

    // 设置imageView播放动画的数组
    self.imageView.animationImages = imageArr;
    // 设置时间间隔 (播放完整一次10秒)
    self.imageView.animationDuration = 10;
    // 设置重复次数( 0 代表无限次)
    self.imageView.animationRepeatCount = 0;
    // 让动画开始
    [self.imageView startAnimating];

添加点击事件:

- (void)sliderAction:(UISlider *)slider
{
    NSLog(@"%.0f", slider.value);

    if (slider.value == slider.maximumValue) {
        [self.imageView stopAnimating];
        // 为了美观,停止的时候添加一张占位图
        self.imageView.image = [UIImage imageNamed:@"005.jpg"];
    }else{
        self.imageView.animationDuration = 10 - slider.value;
        [self.imageView startAnimating];
    }
}
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13595次
    • 积分:662
    • 等级:
    • 排名:千里之外
    • 原创:55篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类