仿写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];
}