Zara 问题汇总

• 学习完UI第一个要写的小项目就是Zara，我的直观感受还是看完UI确实很早 ，但还是要多复习，不然暑假东西基本需要重新记忆。
• UI中教学的东西只是很小的一部分，但实际在写项目用起来的时候就是需要自己多查找，多搜索了，UI的教学只是简单的了解了怎么用，可能一个控件的许多函数都没讲但是需要用到，这时候就在CSDN或者掘金网多查，帮助很大

一.Zara的无限轮播视图

-

• 这种主页面是商品的软件我们手机上都有，第一个界面是产品的展示，关键是希望能够把产品完美的展现在用户面前，这时候就需要1无限轮播视图，就是滑动界面时候到了最后一个界面我们再滑动的时候会自动返回到第一个界面，这是很重要的一个思路！！！
• 写需求的时候肯定会时常用到UIScrollView。而说到UIScrollView，大家最先想到的肯定就是它上面的无限轮播功能。苹果在UIScrollView上并没有提供相应的方法让大家实现轮播，所以就需要通过代码进行处理来实现。

实现无限轮播

示意图

• 比如现在有3个产品的界面，我们要实现无限轮播就需要5个图片的位置，当滑到最后的图片（p4）的时候在最后一个产品图的后面加一个图片位置放上第一个产品图（p5）在第一个产品图（p2）的前面加一个位置放置最后一张图片（p1）

逻辑原理

• 简单的总结下就是3张图片在五个位置上来回换，从而实现无线轮播的原理
• 需要注意的是：我们给这5个图片位置标注序号分别从左向右1，2，3，4，5.
  接下来就是最后一步，在UIScrollView的代理方法里面写逻辑：判断UIScrollView的偏移量，当其滑动到首位时（显示的是最后一张图片），滑动停止，就把偏移量修改最后面图片的位置上（倒数第二张）。同理，当UIScrollView滑动到最后时（显示的是第一张图片），滑动停止，就把偏移量修改到第一张图片的位置上（正数第二张）。

这样就能实现无线轮播的效果了，思路和逻辑上述，看到的伙伴多去实践操作一下

二.Zara 产品界面按钮切换界面

![请添加图片描述](https://img-blog.csdnimg.cn/80aa0d1a818a4f5989dea4e2a03f290e.png

• 刚才的无线轮播是实现了滑动时候的无线轮播，就是用户可以用手滑动，接下来浅谈一下关于左右加两个按钮来实现滑动的效果
• UIButton的基础可以参考文章 UIButton基础And 带图片的Button

添加小箭头Button及其跳转界面的实现

• 添加带图片的Button代码如下不多解释，都是基础

// 左右切换button
    UIButton* btnLeft = [UIButton buttonWithType:UIButtonTypeCustom];
    UIButton* btnRight = [UIButton buttonWithType:UIButtonTypeCustom];
    btnLeft.frame = CGRectMake(0, (self.view.frame.size.height) / 2, 40, 40);
    btnRight.frame = CGRectMake(self.view.frame.size.width - 50, (self.view.frame.size.height) / 2, 40, 40);
    UIImage* icon1 = [UIImage imageNamed:@"UIbntL.jpeg"];
    UIImage* icon2 = [UIImage imageNamed:@"UIbtnR.jpeg"];
    [btnLeft setImage:icon1 forState:UIControlStateNormal];
    [btnRight setImage:icon2 forState:UIControlStateNormal];

    [btnLeft addTarget:self action:@selector(pressBtnLeft) forControlEvents:UIControlEventTouchUpInside];
    [btnRight addTarget:self action:@selector(pressBtnRight) forControlEvents:UIControlEventTouchUpInside];
1
2
3
4
5
6
7
8
9
10
11
12

• 注意，还有2句话我这里没写 ，是因为我写项目的时候遇到了一个小小的细节，如果把
  - [self.view addSubview:btnLeft]; [self.view addSubview:btnRight];;
  写到上述代码的后面运行的时候会看不到button 因为下面的无线轮播图把button盖住了，我的建议是把这两句话写到最后 ，这样button是在无线轮播的上面，方便我们看到

实现button点击事件

-(void) pressBtnLeft {
    NSLog(@"pressBtnLeft");
    int page = _scrollView.contentOffset.x / self.view.frame.size.width;
    _scrollView.contentOffset = CGPointMake(self.view.frame.size.width * (page - 1), 0);
    if (page == 0) {
        _scrollView.contentOffset = CGPointMake(self.view.frame.size.width * 5, 0);
        page = 5;
    }
}
-(void) pressBtnRight {
    NSLog(@"pressBtnRight");
    int page = _scrollView.contentOffset.x / self.view.frame.size.width;
      _scrollView.contentOffset = CGPointMake(self.view.frame.size.width * (page + 1), 0);
      if (page == 7){
      _scrollView.contentOffset = CGPointMake(self.view.frame.size.width * 1, 0);
      }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样第一个界面的需求就基本完成了

三.实现微信界面的TableView

• 这里 “我的界面” 需要实现和微信一样的效果，刚开始比较头大，就是因为学的UITbaleView教学了简单的使用，不知道加图片什么怎么弄，先看一下效果图。
• 🌹刚开始我以为几个简单的UIImageButton就能解决，结果不是 ，这里需要详细学习UItableVIew的用法才能了解。

设置带图片的UItableVIewCell

• 思路：因为不能一个一个Cell创建是在很麻烦，所以这里我觉得可以用if else 或者Switch case break语句

 UITableViewCell* cell;
    if (indexPath.row == 0) {
        NSString* strId = @"Personal Page";
        if (cell == nil) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:strId];
        }
        // cell赋值
        cell.textLabel.text = @"服务";
        // cell附加图样式
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        cell.selectionStyle = UITableViewCellSelectionStyleDefault;

        cell.imageView.image = [UIImage imageNamed:@"UIWechat7.jpeg"];
        cell.backgroundColor = [UIColor whiteColor];
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 部分代码如上，这样子就可以分别实现我们的需要的效果，图片可以在网上查找

网上的图片大小太大了怎么设置

• 如果我们找到的小图标太大了，放上去是这样的
• 于是有如下代码方便我们如调整大小（网上查找）

在这里插入代码 // 设置tableViewcell----图片大小的方法
        CGSize itemSize = CGSizeMake(100, 100);
              UIGraphicsBeginImageContextWithOptions(itemSize, NO, UIScreen.mainScreen.scale);
              CGRect imageRect = CGRectMake(0.0, 0.0, itemSize.width, itemSize.height);
              [cell.imageView.image drawInRect:imageRect];
              cell.imageView.image = UIGraphicsGetImageFromCurrentImageContext();
              UIGraphicsEndImageContext();片
1
2
3
4
5
6
7

UITableView的点击事件-didSelectRowAtIndexPath

• 相当于点开任意一个TableView可以跳转界面
• 根据参数可以选择我们需要的indexPath.row

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    // 不加此句时，在二级栏目点击返回时，此行会由选中状态慢慢变成非选中状态。
    // 加上此句，返回时直接就是非选中状态。
    if (indexPath.row == 0) {
        UIViewServe* UIViewServe1 = [[UIViewServe alloc] init];
        [self.navigationController pushViewController:UIViewServe1 animated:YES];
    } else if (indexPath.row == 4) {
        UIViewFriends* UIViewF = [[UIViewFriends alloc]init];
        [self.navigationController pushViewController:UIViewF animated:YES];
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

• 继续完成网易云的仿写