黑马程序员技术交流社区
标题: 今天不做点什么嘛？来吧，技术交流《活动结束》 [打印本页]
作者: Melody丶Zhy 时间: 2015-8-20 12:14
标题: 今天不做点什么嘛？来吧，技术交流《活动结束》
本帖最后由 Melody丶Zhy 于 2015-8-21 10:04 编辑
首先先扯会蛋，哈哈！2015年1月1日注册的论坛，也就是那时候左右认识的黑马，这已经是认识黑马的第232天，有人该问了，靠认识这么久都没考上黑马，这是什么鬼？？ 好吧，因为我还没报名。。暑假开学上大四课设完了才能离开学校。。。当然在大学的都知道学校会和好多培训组织签约，去他们那培训可以大三课程不用上，学校直接把去培训课程学生的大三成绩全部弄为优秀（好多同学去都是为了提高绩点你懂得），这也是我为什么选择去黑马的原因，我要的是和愿意为自己之后的路打拼的人在一起努力奋斗，而不是去和部分人只是为了提高绩点。选择黑马其实还有很多原因，毕竟人都是有感情的，认识都200多天了，哈哈。在这200多天我也没闲着，网上找各种资料学习，只要你用心找黑马的资料还是能找到的。但是我想说的是编程思想很重要，去黑马就是要学大牛们的思想，和一堆大牛每天都奋斗在Mac上的情形，想想还是挺刺激的！对了目前论坛有同学准备11月去黑马的没，楼主目前准备11月份去，寻找志同道合的朋友，欢迎私信我~~~
下面进入正题，今天不会都过节去了吧。。。。好吧、就来一个图片轮播器的教学吧~
最终做好的样子如下图，能每隔2s向右进行换图，我想大家都见到过
（有点凌乱了。。论坛添加图片怎么不是直接添加上来？）
有几点注意点
- 楼主已经默认你会用Xcode创建project
- 楼主已经默认你会在Main.storyboard拖控件
需要用到的控件
- UIScrollView也就是滚动的那个
- UIPageControl也就是图片下面那几个小点
- NSTimer就是定时器让其自动换页的
下面开工
- 在Main.storyboard拖一个UIScrollView放在屏幕上，在UIScrollView下面放一个UIPageControl（注意是下面而不是在UIscrollView上放，如果放到UIScrollView上将看不到UIPageControl）
- 进行连线，将其连到ViewController.m中的@interface ViewController () 和@end中间
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@end
3. 下面我们要在ViewDidLod中把一个UIImageView加到scrollView中。同时我们要将5张图片放到Images.xcassets中，代码如下
// 广告图片总数
int count = 5;
CGSize size = self.scrollView.frame.size;
for (int i = 0; i < count; i++) {
NSString *imageName = [NSString stringWithFormat:@"img_%02d", i + 1];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *iconView = [[UIImageView alloc] initWithImage:image];
[self.scrollView addSubview:iconView];
// 设置frame
CGFloat x = i * size.width;
iconView.frame = CGRectMake(x, 0, size.width, size.height);
}
这里要注意的就是5个UIimageView的尺寸，宽和高都一样，唯独不一样的就是他的X，需要1张1张图片往后排
4. 设置scrollView的滚动范围以及设置分页，代码如下
// 设置滚动范围
self.scrollView.contentSize = CGSizeMake(count * size.width, 0);
// 滚动条不显示
self.scrollView.showsHorizontalScrollIndicator = NO;
self.scrollView.showsVerticalScrollIndicator = NO;
// 设置分页
self.scrollView.pagingEnabled = YES;
// 设置pagecontrol
self.pageControl.numberOfPages = count;
上面代码中滚动条不显示那两行代码是因为UIScrollView默认是有横竖滚动条的，那两行代码分别让水平的和竖直的的滚动条不显示，一定要让scrollView设置分页否则那个分页器不会跟着走，最后设置pageControl的页数
- 论坛限制发送自己看看能不能在回复中把后面的步骤补上，本来都写好了的。。。。。
弄到这里我发现官网的UI基础视频中好像有这个图片轮播器。。。那么。。我也发出去吧，后续来点核心动画的小demo吧。。
声明：楼主也很水，只是提前学到了一些，很乐意跟大家分享
关于奖励：楼主这还60左右的黑马币，准备今天分给大家，只要回既送黑马币，不能重复1个字，每人只给一次
这里我把，怎么创建项目的截图，和做好的图片轮播器，已经需要用的素材图片，压缩起来发给大家
-
屏幕快照 2015-08-20 上午10.01.36.png
(122.87 KB, 下载次数: 36)
图片轮播器
-
-
demo.zip
1.89 MB, 下载次数: 180
图片轮播器
作者: Melody丶Zhy 时间: 2015-8-20 12:15
5. 设置scorllView的代理，代理大家都应该熟悉了把，首先要在@interface ViewController ()后面遵循代理 代码如下
@interface ViewController () <UIScrollViewDelegate>
然后在ViewDidLod中设置谁遵循这个代理 那当然是ViewController了 代码如下
// 设置代理
self.scrollView.delegate = self;
好了下面开始实现UIScrollView的代理方法了
我们需要用的代理的方法有3个分别是
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
第一个是scrollView滚动时调用的方法，第二个是开始拖拽时调用的方法， 第三个是结束拖拽时调用的方法
首先我们先想scrollView滚动时是不是拖拽到一半以上松手就能到下一张图片，答案肯定是的。那么就来写这个方法，代码如下
// 正在滚动时
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
int page = (scrollView.contentOffset.x + scrollView.frame.size.width / 2) / scrollView.frame.size.width;
self.pageControl.currentPage = page;
}
这里计算page页数用到了我们非常熟悉的把一个数 / 多少得到的数 比如112 / 10 等于多少 很明显是 11 这样就能很好通过尺寸把该显示的页面算出来，对了忘了说contentOffset是什么意思了，这个就可以理解为是拖拽的距离
6. 现在要实现定时器功能了，让其自动翻页，首先要在@interface ViewController () @end中定义一个定时器timer 代码如下
@property (nonatomic, strong) NSTimer *timer;
有人会问为什么要定义这个，因为后面不止一方法需要用到这个timer
定义个定义一个定时器方法，代码如下
- (void)addTimer
{
NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
self.timer = timer;
// 消息循环
NSRunLoop *runLoop = [NSRunLoop currentRunLoop];
[runLoop addTimer:timer forMode:NSRunLoopCommonModes];
}
这是一个定时器的方法，里面创建了定时器，并加入了消息循环中，这里面要设置定时器2s之后应该执行哪个方法，很显然要让它2s之后进行翻页啊，那么我们就来写下这个方法nextImage，代码如下
- (void)nextImage
{
// 当前页码
NSInteger page = self.pageControl.currentPage;
if (page == self.pageControl.numberOfPages - 1) {
page = 0;
} else {
page++;
}
CGFloat offsetX = page * self.scrollView.frame.size.width;
[UIView animateWithDuration:1.0 animations:^{
self.scrollView.contentOffset = CGPointMake(offsetX, 0);
}];
}
这个方法中首先先定义一个page来保存当前的page，然后进行判断如果是最后一张要将页面换成0（这个并不完美会直接从最后一张往回到第一张，但我学习视频的那个老师没有给出解决方法）其他的进行page加1 设置完page数那么我们需要让其自动滚动啊，那我们就来设置scrollView的offset，定义offsetX 等于page数乘以scrollView的宽度，这样正好能移动到下一个视图，同时给移动加一个动画
之后在ViewDidLod中调用此方法，代码如下
[self addTimer];
7. 下面来到UIScrollView的代理方法中，其中还有两个代理方法我们没有实现，就是开始拖拽和结束拖拽的方法，代码如下
// 开始拖拽的时候调用
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
// 停止定时器
[self.timer invalidate];
}
// 结束拖拽的时候调用
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
[self addTimer];
}
这里的开始拖拽是要把定时器停止，不然你拖拽不动也会翻页，所有要把定时器停止，把定时器停止了，那我们要向让其在动起来，那么就要让其在开启，要在结束拖拽时开始定时器。
如果你到这一步了，那么恭喜你的图片轮播器就做好了！
作者: tangbinbin 时间: 2015-8-20 12:33
大神你是学计算机专业的吧？
作者: quebei198721 时间: 2015-8-20 12:37
你也是大牛吧，让我们这些26号入基础班的情何以堪。。。
作者: MoonLove 时间: 2015-8-20 12:59
膜拜大神
作者: Melody丶Zhy 时间: 2015-8-20 13:01
谔谔 自动化专业。。只是慢慢学习的。。慢慢的你就发现这不算什么了。。
作者: Melody丶Zhy 时间: 2015-8-20 13:03
。。。这些后面都不算什么，只能说闻道有先后，学到就知道其实没什么的
作者: Melody丶Zhy 时间: 2015-8-20 13:04
都是根据视频学的。。时间问题，并不是大神，，
作者: 984326157 时间: 2015-8-20 13:37
俺也不是计算机专业的，机械专业
作者: 15095185209 时间: 2015-8-20 14:04
刚开始接触，感觉楼主懂得好多啊！
作者: Melody丶Zhy 时间: 2015-8-20 14:20
提前先学着点，没有坏处，可以先看着啊
作者: Melody丶Zhy 时间: 2015-8-20 14:22
你准备什么时候去？
作者: tangbinbin 时间: 2015-8-20 15:40
我也是机械专业的，工作一年刚辞了，，，
作者: 81516741 时间: 2015-8-20 17:46
这是啥啊。看不懂啊，刚刚才开始学习的
作者: 81516741 时间: 2015-8-20 17:47
这是啥啊看不懂啊刚刚才开始学习的
作者: smilejoke 时间: 2015-8-20 19:10
膜拜大神，解释很清晰
作者: 960743995 时间: 2015-8-20 19:29
唯有膜拜
作者: Melody丶Zhy 时间: 2015-8-20 19:46
好好学，之后就知道了。。。看样我不应该发这些。。
作者: wowthe1st 时间: 2015-8-20 20:18
靠，在校生这么牛，想当初我大学毕业的时候，helloworld都写不出来。。。
自惭形秽啊。。如今毕业5年了，目前也就学了OC基础。。
作者: Melody丶Zhy 时间: 2015-8-20 20:40
不不不，我也是突然觉悟的，大一的时候c语言60飘过的人，当时什么都不懂，最近半年才开始学的
作者: 45824430 时间: 2015-8-20 20:44
哇塞我也来看看
作者: MoonLove 时间: 2015-8-21 08:27
嗯，我现在也在自学视频，准备11月的就业班，顺利的话我们就是同班的喽。
作者: 企业部-阿狗老师 时间: 2015-8-21 08:52
大神 我也是11月的就业班啊
到时候带我飞啊！
作者: wanghui001001 时间: 2015-8-21 09:25
哇，棒棒的
作者: tr2e 时间: 2015-8-21 09:48
新人 来顶 。 祝早日入学
作者: tr2e 时间: 2015-8-21 09:51
还有就是 技术分 怎么获取？
作者: Melody丶Zhy 时间: 2015-8-21 10:01
靠，终于找到同类了，是北京嘛？
作者: Melody丶Zhy 时间: 2015-8-21 10:02
是北京黑马嘛？ 为的就是找同类
作者: MoonLove 时间: 2015-8-21 21:13
本帖最后由 MoonLove 于 2015-8-21 21:15 编辑
必须的，先加个好友吧，到时候求带飞啊。
作者: 毛强 时间: 2015-8-21 21:19
头像很贴切，骑的是黑马吗？
作者: Melody丶Zhy 时间: 2015-8-21 23:46
哈哈
作者: 企业部-阿狗老师 时间: 2015-8-22 08:30
今天就要去黑马了 哥们 到时候一起加油啊
作者: 你是我的小苹果 时间: 2015-8-22 09:01
这是UI的内容？UI的学习资源哪里有啊？
作者: Melody丶Zhy 时间: 2015-8-22 09:20
官网有基础
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
