仿写ZARA总结
前言
本文主要是用来总结仿写ZARA中遇到的一些问题，以及ZARA中学习到的一些新知识。
无限轮播图
这里我们先给出无限轮播图的效果图。
在ZARA的首页中我们要实现一个自动无限轮播图，这部分内容的无限轮播图根据他的名字可以看出他有两个重点，一个是怎么实现一个无限轮播，我们先讲一下有关无限轮播图的内容。无限轮播图并不是意味着他是无限张图片，而是通过相关的代码实现一个无限轮播的效果,我通过按下面的方式摆放我们的图片，这时候我们的UISCrollVIew通过底层相关代码来实现我们的无限轮播的效果。
在之前的学习过程中我们知道了UIScrollView的一些的协议函数，我们通过一个- (void)scrollViewDidScroll:(UIScrollView *)scrollView这个函数可以获取我们的UIScrollVIew的位置，我们可以在我们的视图滑到倒数第二张照片的后面的时候，我们直接通过这个代码来修改我们的位置，这样就可以实现一个视觉上无限轮播图的效果，在第二张图片的位置我们在向前滑动时候，然后一下子将这个UIScrollView的位置改到倒数第二张的位置，这样我们就可以在视觉上展示出一个无限轮播图的效果。
这里给出我们的相关代码来帮助理解
self.scrView.pagingEnabled = YES;
//可以开启滚动的效果
self.scrView.scrollEnabled = YES;
self.scrView.showsVerticalScrollIndicator = NO;
self.scrView.showsHorizontalScrollIndicator = NO;
for (int i = 0; i <= 5; i++) {
NSString* str = [NSString stringWithFormat:@"20%d.jpg", (i % 3) + 1]; //这样实现一个按顺序摆放图片
UIImage* image = [UIImage imageNamed:str];
UIImageView* iView = [[UIImageView alloc] initWithImage:image];
if (i == 5) { // 在最后一张图片的情况下我们给他添加到最前面
iView.frame = 0, [UIScreen mainScreen].bounds.size.height / 4, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height / 1.9);
} else { // 其他照片正常给他添加
iView.frame = CGRectMake([UIScreen mainScreen].bounds.size.width * (i + 1), [UIScreen mainScreen].bounds.size.height / 4, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height / 1.9);
}
[self.scrView addSubview:iView];
}
[self.view addSubview:self.scrView];
然后我们在实现一个相关的协议函数，来处理滑到最后一张图片和第一张图片的两种情况
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat contentOffsetX = scrollView.contentOffset.x;
CGFloat width = [UIScreen mainScreen].bounds.size.width;
CGFloat contentWidth = scrollView.contentSize.width;
if (contentOffsetX >= contentWidth - width) { // 滑到倒数第一张图片时候，调整到倒数第二张照片的位置
[scrollView setContentOffset:CGPointMake(width, 0) animated:NO];
} else if (contentOffsetX <= 0) { // 滑动到第一张图片的时候在进行一个特判，调整到第一张照片的位置
[scrollView setContentOffset:CGPointMake(contentWidth - 2 * width, 0) animated:NO];
} else {
self.page.currentPage = (contentOffsetX / width) - 1;
}
}
分栏控制器与UIScrollView
这里我通过两个分栏控制器来实现我们的第二个页面，这个页面的内容比较简单，我们仅仅只用将两个UI控件的协议函数链接起来，我们就可以实现这个部分的内容。
同样我们先给出实现效果
这里我们可以看到我们通过分栏控制器和我们的一个UIScrollView来实现一个两个控件的协同。内容较为简单结合代码理解。
UIScorllView的协议部分
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat offsetX = scrollView.contentOffset.x;
CGFloat width = self.view.frame.size.width;
NSInteger index = offsetX / width + 0.5;
if (_segControl.selectedSegmentIndex != index) {
_segControl.selectedSegmentIndex = index;
}
}
NSInteger index = offsetX / width + 0.5;这部分代码比较重要，这部分代码可以让我们在滑动到一半的时候自动调整到相应位置
，正如gif中所显示，我们滑到一半的时候上面的分栏控制器就已经改变了。
UISegmentedControl的协议部分
-(void)segmentControlValueChanged {
NSUInteger index = _segControl.selectedSegmentIndex;
CGFloat newX = (self.view.bounds.size.width) * index;
_scroView.contentOffset = CGPointMake(newX, _scroView.contentOffset.y);
}
这部分内容和上面的内容类似，实现两个UI控件的结合。
自定义cell
这部分是我的一个自定义cell的内容，我这里主要是实现换头像功能，以及设计自定义cell实现这个效果。
这部分换头像的内容是通过一个照片墙的来实现的，然后在给照片墙上的每一个imageView添加一个手势识别器，然后给手势识别器提供相应的换头像的协议函数，从而解决这部分换头像的函数。
UITapGestureRecognizer* tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(press:)];
tap.numberOfTapsRequired = 1;
tap.numberOfTouchesRequired = 1;
[iView addGestureRecognizer:tap];
-(void)press:(UIGestureRecognizer*) tap {
UIAlertController* alert = [UIAlertController alertControllerWithTitle:@"换头像" message:nil preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction* action1 = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
[self.delegate changeImageView:tap.view.tag];
[self.navigationController popViewControllerAnimated:YES];
}];
UIAlertAction* cancel = [UIAlertAction actionWithTitle:@"cancel" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
;
}];
[alert addAction:cancel];
[alert addAction:action1];
[self presentViewController:alert animated:YES completion:nil];
//[_delegate changeImageView:tap.view.tag];
//[self.navigationController popViewControllerAnimated:YES];
}
