利用UISlider和 UIImageView实现跑图

原创 2015年11月17日 22:12:58

**UISlider 滑块
知识点:
初始化:initWithFrame:(CGRect)frame
核心方法:
- (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;
// 设置滑块的初值 最大值 最小值
// 如果想设置初始位置 需要先把最大最小值设置上 再给初值才会发生变化
// 把图片的名字拼接出来
// 格式化拼接需要用到占位符
UIImageView(跑图制作)的对象还可以实现动画的效果,就是将很多图片放在一个数组中实现跑图功能
animationDuration 设置图片数组
animationImages 设置时间间隔
animationRepeatCount 设置动画的次数
startAnimating 开始动画
stopAnimating 关闭动画**

工程

其中设置跟视图控制器就不说了,主要代码是在根视图控制器中:
RootViewController.m

#import "RootViewController.h"

@interface RootViewController ()
//  属性方便取值赋值 或者也可以使用tag
@property (nonatomic,strong)UIImageView *imgView;

@end

@implementation RootViewController
- (void)dealloc{
    [_imgView release];
    [super dealloc];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    //  声明一个滑块用于控制UIImageView 动画的速度
    UISlider *slider = [[UISlider alloc]initWithFrame:CGRectMake(100, 100, 200, 50)];
    //  设置相关属性和方法
    //  设置滑块和进度条的颜色
    slider.thumbTintColor = [UIColor orangeColor];
    slider.minimumTrackTintColor = [UIColor blueColor];
    slider.maximumTrackTintColor = [UIColor greenColor];
    //  设置滑块和进度条的图片
    UIImage *img1 = [UIImage imageNamed:@"01-refresh"];
    UIImage *img2 = [UIImage imageNamed:@"02-redo"];
    UIImage *img3 = [UIImage imageNamed:@"03-loopback"];
    UIImage *img4 = [UIImage imageNamed:@"12"];
    UIImage *img5 = [UIImage imageNamed:@"13"];

    //  这里可以不是镂空图,但是得尽量一点
    [slider setThumbImage:img1 forState:UIControlStateNormal];
    [slider setThumbImage:img2 forState:UIControlStateHighlighted];
    [slider setThumbImage:img3 forState:UIControlStateSelected];
    slider.minimumValueImage = img4;
    slider.maximumValueImage = img5;

    //  设置滑块的最大值和最小值
    //  由于这里是控制图片播放速度的,所以最大值不要太大
    slider.minimumValue = 0;
    slider.maximumValue = 10;

    //  设置滑块初始的位置
    //  这里需要注意的点就是你得先声明最大最小值,在设置初始位置,不然你的初始位置及其默认是0;
    slider.value = 5;

    //  为滑块添加事件 用来控制跑图的速度
    [slider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];

    //  添加到视图
    [self.view addSubview:slider];
    //  释放
    [slider release];

    //  实现跑图
    //  创建一个图片数组
    NSMutableArray *imgArray = [NSMutableArray array];
    //  跑图一般都是一套的图,命名是应该使用统一规则,还得具有联系性,这样可以使用循环创建
    for (int i = 1; i <= 10; i++) {
        UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]];
        //  将照片添加到图片数组中
        [imgArray addObject:img];
    }

    //  创建一个imageView 用于显示跑图
    self.imgView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 150, 200, 300)];
    //  设置相关属性
    self.imgView.animationImages = imgArray;
    //  这个周期是显示完所有图片的时间  默认一秒钟播放三十张
    //  self.imgView.animationDuration = 5;
    //  默认是0  无限循环
   // self.imgView.animationRepeatCount = 2;

    //  动画开始
    [self.imgView startAnimating];

    //  添加导视图
    [self.view addSubview:self.imgView];
    //  释放
    [_imgView release];



}

//  实现action方法
- (void)sliderAction:(UISlider *)slider
{
    //  用滑块控制速度,也就是控制他的动画周期
    self.imgView.animationDuration = slider.value;
    //  每次值的改变都需要,重新开始动画
    [self.imgView startAnimating];
    //  需求  最大位置停止,显示一张图片 并且将滑块设置成选中状态
    if (slider.value == slider.maximumValue) {
        [self.imgView stopAnimating];
        UIImage *img = [UIImage imageNamed:@"11.jpg"];
        self.imgView.image = img;
        slider.selected = YES;
    }else
    {
        slider.selected = NO;
    }

}



- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

三维图
window->跟视图->imageView.和slider
window->跟视图->image
* 效果图*
这里写图片描述
这里写图片描述
这里写图片描述

图片下载链接:
http://pan.baidu.com/s/1mgvU1hY

[TwistedFate]滑块UISlider 跑图UIImageView

UISlider初始化及设背景色UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(40, 100, 300, 20)]; sl...

【IOS 开发】基本 UI 控件详解 (UISegmentedControl | UIImageView | UIProgressView | UISlider | UIAlertView )

.一. 分段控件 (UISegmentedControl)控件展示 : 1. UISegmentedControl 控件属性(1) Style 属性Style 属性 :      -- Plain :...

UIButton+UIImageView+UISlider+UISwitch操作总结

iOS控件简单总结

进击的KFC:UI(六)UISegmentControl,UISlider,NSTimer,UIImageView

一.pragma mark ————- UISegmentedControl 分段按钮———————————–继承于UIControl 1.初始化 UISegmentedControl...

UI连载五--常用UI控件—Label、Button、UITextField、UIImageView、UISlider、UISwitch、UIActivityIndicatorView等

#pragma mark -UILabel - (void)_initLabel {     UILabel *textLable = [[UILabel alloc] initWith...

黑马程序员_iOS 的基础控件之UILabel,UISlider,UIImageView

iOS,Android,Java培训,期待与您的交流 iOS应用开发的一项内容就是用户界面的开发。不管应用程序实际包含的逻辑有多复杂,如果这个应用程序没有提供友好的图形用户界面,將很难吸引用户。作为一...

iOS编程--------UIControl的作用及其子类UISegmentedControl的使用 / UISlider的使用 / UIImageView的使用

// // AppDelegate.h // UI06_UIControl,controlSubClass // // Created by l on 15/9/8. // Copyright...

UI - UISegmentedControl、UISlider、UIImageView、UISwitch

// UIControl的子类(8个): // UITextField // UIPageControl // UISlider // UIButton // UI...

UI基础之-UIImage,UIImageView, UISegmentedControl,UISlider

一  UIImageView和 UIImage 1.  UIImage 继承自 NSObject,是用来保存图片资源的 UIImageView继承自 UIView, 用来显示图片的控件,相当于一个相框...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用UISlider和 UIImageView实现跑图
举报原因:
原因补充:

(最多只允许输入30个字)