暑假第一周——ZARA仿写

前言

结束了UI的基础学习,现在综合运用开始写第一个demo,在实践中提升。


首页:无限轮播图

先给出效果:
请添加图片描述
无限轮播图,顾名思义可以无限轮播下去。这五张图片的滑动是没有视觉上的跳转的。并且按钮也可以正确切换图片。
原理部分:
以三张图为例
在这里插入图片描述
我们在首和尾分别制作最后一页和第一页的假页,当移动到假页时,使用取消动画的方式跳到真正的页数,即可实现无限轮播图。
下面给出关键代码:

- (void) scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self clearTimer];
    //获取当前页数
    NSInteger currentIndex = scrollView.contentOffset.x / scrollView.frame.size.width;
    //假页移动
    if (currentIndex == 0) {
        scrollView.contentOffset = CGPointMake(scrollView.frame.size.width * 5, 0);
    } else if (currentIndex == 6) {
        scrollView.contentOffset = CGPointMake(scrollView.frame.size.width * 1, 0);
    }
    [self addTimer];
}

还需要注意的是在效果图中我们还加入了定时器定时滚动。在滚动协议的开始和结束要分别关掉重启定时器,以保证定时器只有一个,也可用单例模式来实现。按钮的代码和定时器的代码与此都相似,这里给出定时器代码:

- (void) scrollToNextImage
{
    NSInteger currentIndex = scrollView.contentOffset.x / scrollView.frame.size.width;
    [scrollView setContentOffset:CGPointMake(scrollView.frame.size.width * (currentIndex + 1), 0) animated:YES];
    if (currentIndex == 0) {
        scrollView.contentOffset = CGPointMake(scrollView.frame.size.width * 5, 0);
    } else if (currentIndex == 6) {
        scrollView.contentOffset = CGPointMake(scrollView.frame.size.width * 1, 0);
    }
}

商城:分类

这页的效果较简单,主要将滚动视图与分栏控件联系起来。
请添加图片描述
这里给出实现代码:

-(void) scrollViewDidScroll:(UIScrollView *)_scrollView
{
    CGFloat contentOffsetX = _scrollView.contentOffset.x;
    
    NSInteger selectedIndex = (double)(contentOffsetX / _scrollView.frame.size.width ) + 0.5;
    
    UISegmentedControl *segmentedControl = (UISegmentedControl *)self.navigationItem.titleView;
    
    if (selectedIndex != _segControl.selectedSegmentIndex) {
        _segControl.selectedSegmentIndex = selectedIndex;
    }
}

-(void)segmentedControllerScrollView:(UISegmentedControl*)_segControl
{
    NSInteger selectedIndex = _segControl.selectedSegmentIndex;
    
    
    CGFloat offsertX = selectedIndex * self.scrollView.bounds.size.width;
    
    CGFloat offsertY = self.scrollView.contentOffset.y;
    
    [self.scrollView setContentOffset:CGPointMake(offsertX, offsertY) animated:YES];
}

需要注意的点为此处代码:

NSInteger selectedIndex = (double)(contentOffsetX / _scrollView.frame.size.width ) + 0.5;

当视图移动超过屏幕一半的时候视图就会移动到下一张,此时分栏空间的位置也要改变。


我的:自定义cell

在这里插入图片描述
图片中每个单元格都是自定义cell,具体的创建在之前已经说过。在此不再赘述,更- 复杂的内容在下个app的仿写中学习


总结

ZARA为暑期的热身项目之一,写完后对之前的UI学习有了一个大体的认识。加深了对控件使用的理解。

相关推荐

  1. C组暑假第一次训练题解

    2024-07-20 18:46:02       24 阅读
  2. 仿Vue的{{}}语法

    2024-07-20 18:46:02       37 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 18:46:02       123 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 18:46:02       131 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 18:46:02       109 阅读
  4. Python语言-面向对象

    2024-07-20 18:46:02       117 阅读

热门阅读

  1. 直播类小程序发展前景的分析

    2024-07-20 18:46:02       29 阅读
  2. hadoop学习系列--环境安装

    2024-07-20 18:46:02       24 阅读
  3. 代码随想录训练营【贪心算法篇】

    2024-07-20 18:46:02       27 阅读
  4. 脱机输入/输出就是允许CPU和IO设备并行

    2024-07-20 18:46:02       26 阅读
  5. Python语言的优势所在

    2024-07-20 18:46:02       22 阅读
  6. Xubuntu22.04 终端命令调用图形设置工具

    2024-07-20 18:46:02       22 阅读
  7. 远程连接VScode到云服务器 ECS

    2024-07-20 18:46:02       22 阅读
  8. SQL Server邮件通知:数据库通信的自动化利器

    2024-07-20 18:46:02       24 阅读
  9. Elasticsearch 统计订单销售高峰时间段

    2024-07-20 18:46:02       27 阅读
  10. Vue 自定义组件编写 案例实战

    2024-07-20 18:46:02       22 阅读
  11. 音视频环境搭建

    2024-07-20 18:46:02       25 阅读
  12. 编织文字的魔法:探索WebKit的CSS文本效果

    2024-07-20 18:46:02       31 阅读