iOS——ZARA仿写项目
iOS——ZARA仿写项目总结文件结构思路MVC框架重点需要实现的内容无限轮播图UIPageControl与页面联动segmentControl与ScrollView联动多界面传值更新头像文件结构思路搭建文件结构前我们需要弄清楚MVC框架都需要哪些内容我们从内容入手分析需要展示三个界面——首页我的分类所以需要使用TabBar嵌套Navigation的方式实现在SceneDelegate中创建-(void)scene:(UIScene*)scene willConnectToSession:(UISceneSession*)session options:(UISceneConnectionOptions*)connectionOptions{UIWindowScene*windowScene(UIWindowScene*)scene;self.window[[UIWindow alloc]initWithWindowScene:windowScene];ZAHomeViewController*home[[ZAHomeViewController alloc]init];UINavigationController*homeNav[[UINavigationController alloc]initWithRootViewController:home];homeNav.tabBarItem[[UITabBarItem alloc]initWithTitle:首页image:[UIImage systemImageNamed:house]tag:0];//控制器1ZACategoryViewController*cate[[ZACategoryViewController alloc]init];UINavigationController*cateNav[[UINavigationController alloc]initWithRootViewController:cate];cateNav.tabBarItem[[UITabBarItem alloc]initWithTitle:分类image:[UIImage systemImageNamed:cart]tag:0];//控制器2ZAProfileViewController*prof[[ZAProfileViewController alloc]init];UINavigationController*profNav[[UINavigationController alloc]initWithRootViewController:prof];profNav.tabBarItem[[UITabBarItem alloc]initWithTitle:我的image:[UIImage systemImageNamed:person]tag:0];//控制器3UITabBarController*bar[[UITabBarController alloc]init];bar.viewControllers[homeNav,cateNav,profNav];//三个navigation塞进tabbar里面self.window.rootViewControllerbar;[self.window makeKeyAndVisible];}以下是文件结构MVC框架项目/ ├── Controller/ │ ├── ZACategoryViewController.h │ ├── ZACategoryViewController.m │ ├── ZAHomeViewController.h │ ├── ZAHomeViewController.m │ ├── ZAProfileViewController.h │ ├── ZAProfileViewController.m │ ├── ZAUserDetailViewController.h │ └── ZAUserDetailViewController.m │ ├── Model/ │ ├── ZAFuncModel.h │ ├── ZAFuncModel.m │ ├── ZAProfileModel.h │ └── ZAProfileModel.m │ └── View/ ├── ZAFuncCell.h ├── ZAFuncCell.m ├── ZAProfileCell.h └── ZAProfileCell.m我们先给出文件的结构接着我会解释为什么这样设计从Model入手我们知道Model要用于为需要复用的数据整理打包成一个数据结构所以“我的”界面的tableView的信息就需要单独打包成Model而且需要将个人信息与下面展示的界面分开所以Model需要两个h/m文件对应的View直接配套Model不多赘述对于Controller首先需要三个h/m文件来完成首页我的分类的UI控制其次需要点击头像进入cell界面多接一个即可大体思路如此下面我针对需要实现的重点内容进行讲解重点需要实现的内容无限轮播图具体内容可以查看笔者这篇文章iOS——无限轮播图学习我们针对这里数据的初始化进行简单讲解-(void)setupPicture{self.picture[005,001,002,003,004,005,001];NSArray*strDataself.picture;UIImageView*prevnil;for(NSInteger i0;istrData.count;i){UIImageView*imageView[[UIImageView alloc]init];imageView.image[UIImage imageNamed:strData[i]];[self.scrollView addSubview:imageView];[imageView mas_makeConstraints:^(MASConstraintMaker*make){make.top.bottom.equalTo(self.scrollView);make.width.mas_equalTo(self.view.bounds.size.width);if(i0){make.left.equalTo(self.scrollView);}elseif(istrData.count-1){make.left.equalTo(prev.mas_right);make.right.equalTo(self.scrollView);}else{make.left.equalTo(prev.mas_right);}}];previmageView;}}首先创建数组这里的数组内容是每个图片的名字图片需要被放在Assets里面接着设置prev这一步的目的是保证每张图片可以紧贴着上一张图片当然也可以写死坐标但这样不够灵活也不够轻松可以看到我们只需要单独约束第一章和最后一张的左右紧贴ScrollView剩余图片只保证左边紧贴上一张图片(prev)的右边即可UIPageControl与页面联动-(void)setupPageControl{self.pageControl[[UIPageControl alloc]init];self.pageControl.numberOfPagesself.picture.count-2;self.pageControl.pageIndicatorTintColor[UIColor whiteColor];self.pageControl.currentPageIndicatorTintColor[UIColor grayColor];self.pageControl.currentPage0;[self.view addSubview:self.pageControl];[self.pageControl mas_makeConstraints:^(MASConstraintMaker*make){make.bottom.equalTo(self.scrollView).offset(-8);make.centerX.equalTo(self.scrollView);}];[self.scrollView setContentOffset:CGPointMake(self.scrollView.bounds.size.width,0)animated:NO];}上面是创建初始化pageControl下面讲解同步更新pageControl-(void)scrollViewDidScroll:(UIScrollView*)scrollView{CGFloat currXscrollView.contentOffset.x;CGFloat widthself.scrollView.bounds.size.width;if(currX0){[scrollView setContentOffset:CGPointMake(width*(self.picture.count-2),0)animated:NO];}elseif(currXwidth*(self.picture.count-1)){[scrollView setContentOffset:CGPointMake(width,0)animated:NO];}currXscrollView.contentOffset.x;self.pageControl.currentPagecurrX/width-1;}上方部分就是正常的无限轮播图的跳转逻辑注意看下面重新取了currX原因是当中间的跳转逻辑生效之后此时currX已经改变为了同步更新pageControl就要获得最新的currXsegmentControl与ScrollView联动segmentControl与ScrollView的创建与初始化这里不多赘述直接看联动逻辑-(void)scrollViewDidScroll:(UIScrollView*)scrollView{CGFloat currXscrollView.contentOffset.x;CGFloat widthself.scrollView.bounds.size.width;currXwidth/2;NSInteger indexcurrX/width;self.seg.selectedSegmentIndexindex;}-(void)setupSeg{self.seg[[UISegmentedControl alloc]initWithItems:[女士,男士,香水]];[self.seg addTarget:selfaction:selector(segChange)forControlEvents:UIControlEventValueChanged];//绑定滑动方法self.seg.selectedSegmentIndex0;self.navigationItem.titleViewself.seg;}-(void)segChange{NSInteger indexself.seg.selectedSegmentIndex;CGFloat widthself.scrollView.bounds.size.width;[self.scrollView setContentOffset:CGPointMake(index*width,0)animated:YES];//更新图片位置}第一个方法currX width / 2;是为了保证滑动到一半的时候更新segmentControl多界面传值更新头像这里我使用的是代理传值也就是在ZAProfileCell.h里面声明协议让Controller执行-(void)exchangePicture:(NSString*)picture{ZAProfileModel*model[[ZAProfileModel alloc]init];model.picturepicture;model.userNamedyyxs;model.subTitleName秋雨梧桐叶落莳;[self.section replaceObjectAtIndex:0withObject:model];NSIndexSet*set[NSIndexSet indexSetWithIndex:0];[self.tableView reloadSections:set withRowAnimation:UITableViewRowAnimationFade];}//------------------------------------------分割线#importUIKit/UIKit.h#importZAProfileModel.hNS_ASSUME_NONNULL_BEGINinterfaceZAProfileCell:UITableViewCellproperty(nonatomic,strong)ZAProfileModel*model;-(void)configWithModel:(ZAProfileModel*)model;endNS_ASSUME_NONNULL_END
)
