Swift开发之头部图片轮播器
来源:互联网 发布:新能源汽车数据 编辑:程序博客网 时间:2024/05/17 22:23
今天来记录一下用原生的UIScroller,代码写头部视图的图片轮播器,意义在于自己总结,欢迎大家点评。。
首先我说说我的思路:先创建一个UIView的对象,然后再创建UIScrollView和UIPageControl的对象分别加入到view的子控件中,实现图片轮播主要用到了3个对象,分别是:scrollview、pageControl和image。
scrollView:主要设置图片轮播器中内容区域
pageControl:跟随图片的移动而移动
image:用来装载图片对象
实现的步骤:
1、创建头部视图和滚动视图,并设置其相关属性
// 添加头部视图 self.headView = UIView(frame:CGRectMake(UIScreen.mainScreen().bounds.origin.x,UIScreen.mainScreen().bounds.origin.y, UIScreen.mainScreen().bounds.size.width, 220)) self.headView!.backgroundColor = UIColor.lightGrayColor() self.view.addSubview(headView!) // 头部图片轮播器 self.creatScrollView()创建滚动视图并设置相关属性的代码具体如下:
//1、创建滚动视图 func creatScrollView(){// 初始化滚动视图并添加到头部视图 self.scrollView = UIScrollView(frame: CGRectMake(UIScreen.mainScreen().bounds.origin.x,UIScreen.mainScreen().bounds.origin.y, UIScreen.mainScreen().bounds.size.width, 220)) self.scrollView!.backgroundColor = UIColor.lightGrayColor() self.headView!.addSubview(scrollView!) // 设置图片的宽和高 let height = self.scrollView!.frame.size.height let width = self.scrollView!.frame.size.width // 设置滚动视图的内容区域,以及允许分页功能 self.scrollView!.contentSize = CGSizeMake(5 * width, height) self.scrollView!.pagingEnabled = true self.scrollView?.showsVerticalScrollIndicator = false self.scrollView?.showsHorizontalScrollIndicator = false // 设置滚动视图的代理 self.scrollView!.delegate = self // 创建分页控制器 self.creatPageControl() }
2、创建分页控件,并设置其相关属性
分页控件的主要作用就是图片滚动时其原点也跟随图片显示不同的样式,目的在于告诉用户当前图片是第几张
//2、创建分页控制器 func creatPageControl(){// 创建分页控制器 self.pageControl = UIPageControl(frame: CGRectMake(150, 200, 100, 20)) // 设置分页的页码数和当前页码 self.pageControl!.numberOfPages = 5; self.pageControl?.currentPage = 0; // 设置选中页码点的颜色和未选中页码点的颜色 self.pageControl!.currentPageIndicatorTintColor = UIColor.blackColor() self.pageControl!.pageIndicatorTintColor = UIColor.grayColor() // 将分页控制器添加到滚动视图中 self.headView?.addSubview(self.pageControl!)
3、通过循环创建图片视图
// 创建5个图像视图 for i in 0..<5 { self.image = UIImage.init(contentsOfFile: NSBundle.mainBundle().pathForResource("s\(i + 1)", ofType: "jpg")!)!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal) let start : CGFloat = CGFloat(i) let imageView : UIImageView = UIImageView(frame: CGRectMake(start * self.scrollView!.frame.size.width, 0, self.scrollView!.frame.size.width, self.scrollView!.frame.size.height)) imageView.image = self.image! self.scrollView?.addSubview(imageView)
4、创建图片定时轮播的定时器
定时器创建如下:
// 创建定时器,每3秒滚动一次 NSTimer.scheduledTimerWithTimeInterval(3.0, target: self, selector: #selector(HomeViewController.pageNumberChanged(_:)), userInfo: nil, repeats: true)
定时器调用的方法:图片依次往右循环,当当前图片为最后一张图片时,默认跳转到第一张,给用户的感觉就是图片一直在轮播
// 图片轮播器的定时器方法 func pageNumberChanged(sender : AnyObject){// 判断如果页数为最后一页,就从头开始 if self.pageControl?.currentPage == self.pageControl!.numberOfPages - 1 { self.pageControl?.currentPage = 0 }// 依次往后滚动视图 else{ self.pageControl?.currentPage += 1 } // 设置图片显示 let page : CGFloat = (CGFloat)((self.pageControl?.currentPage)!) let x = page * (self.scrollView?.frame.width)! self.scrollView?.contentOffset = CGPointMake(x, 0); }
5、遵守UIScrollViewDelegate
主要实现scrollViewDidScroll这个代理方法,
// MARK:-----UIScrollViewDelegate----- func scrollViewDidScroll(scrollView: UIScrollView) { //每一个滚动视图的宽度 let wid = scrollView.frame.size.width //当前页码 let pageNumber : CGFloat = scrollView.contentOffset.x / wid self.pageControl?.currentPage = (Int)(pageNumber) }6、具体实现效果
以上就是利用swift语言实现的简易的图片轮播器,代码比较基础,后面会继续封装,会更加完善。。未完待续。。。
0 0
- Swift开发之头部图片轮播器
- iOS开发之UITableView点击头部控件图片旋转问题
- iOS初级开发之封装头部视图带图片旋转<继承UITableViewHeaderFooterView>
- Swift开发之UIButton作为蒙板实现图片缩放
- swift之图片浏览器
- 头部图片
- iOS开发之-swift
- iOS开发之Swift
- swift开发之Alamofire
- swift:无限图片轮播器
- Swift开发之 ---- Swift宏定义
- iOS开发之图片轮播器
- 【IOS开发】swift版的AFNETworking之Alamofire的用法 图片上传
- Swift开发教程--如何播放图片动画
- iOS Swift图片选择SDK开发设计
- 网页头部图片自适应
- swift开发之http请求
- iOS开发之 swift视频教程
- 密码学基础
- 判断一个数组是不是二元查找树后序遍历的结果
- 问题:double free or corruption
- shopnc开启缓存, 配置 redis,windows redis 安装,wampserver php 添加 redis 扩展
- 伸展树Splay
- Swift开发之头部图片轮播器
- 某些下拉刷新变波浪的效果实现思路
- Apache+Mysql+PHP环境配置详细过程
- 马克鳗
- ENet 配置bug
- POJ 1862
- $.ajax()方法详解
- UNIX网络编程——基本SCTP套接字编程
- Java开发中的23种设计模式详解(一)