暑假第一周总结博客

本周主要学习内容为学习全部视频,建立无限轮播图,自定义cell。

无限轮播图实现逻辑

轮播图的子视图是以数组的形式储存的,我们可以建立一个数组对这个数组进行操作,改变轮播图中子视图的位置。

接下来是关键,我们设置用户进入后位于第二页,当用户尝试翻到第一页时,我们将数组最后一页的视图取出数组,放到第一页。这样,原本的第一页就变成了第二页,用户从第二页翻到第一页的行为就变成了从第三页翻到第二页。最后用户虽然视觉上“前翻”了一页,实际上还位于第二页,重复上述操作,使用户有一种无限轮播的错觉。

创建数组:

 for (int i = 0; i < 3; i++) {
        // 获取图片名字
        NSString* imageName = [NSString stringWithFormat:@"%d.jpeg", i + 1];
        // 将图片名字放入图片数组中
        [_imageNames addObject:imageName];
    }
    
    for (int i = 0; i < 3; i++) {
        // 创建图片视图
        UIImage* image = [UIImage imageNamed:[_imageNames objectAtIndex:i]];
        UIImageView* imageView = [[UIImageView alloc] initWithImage:image];
        // 设置视图位置
        imageView.frame = CGRectMake(self.myScreen.bounds.size.width * i, 0, self.myScreen.bounds.size.width, self.myScreen.bounds.size.height - 83);
        
        [scrollView addSubview:imageView];
        
        [_imageViews addObject:imageView];
    }

更新视图:

- (void) insertImageToImageView {
    [_imageViews enumerateObjectsUsingBlock:^(UIImageView* _Nonnull imageView, NSUInteger idx, BOOL* _Nonnull stop) {
        imageView.image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForAuxiliaryExecutable:_imageNames[idx]]];
    }];
}

根据翻页方式的不同,处理细节上会有一些不同

按钮:

由于实际偏移量未改变,视图会随着数组顺序的更改直接变化,没有动画。为了达成动画效果,我们在更改数组顺序后,更改轮播图的偏移量,使轮播图显示到第三页,也就是修改前的第二页,此时用户屏幕显示的视图并没有发生改变,然后我们正常设置偏移量转到第二页,这样就有了动画效果。

- (void) pressPageButtonLeft {
    // 将最后一个元素移动到第一个
    id lastObject = [_imageNames.lastObject mutableCopy];
    
    [_imageNames removeLastObject];
    
    [_imageNames insertObject:lastObject atIndex:0];
    
    // 更新视图
    [self insertImageToImageView];
    // 重制偏移量
    self.scrollView.contentOffset = CGPointMake(self.myScreen.bounds.size.width * 2, 0);
    // 移动视图
    [self.scrollView setContentOffset:CGPointMake(self.scrollView.contentOffset.x - self.myScreen.bounds.size.width, 0) animated:YES];
    _timer.fireDate = [NSDate dateWithTimeIntervalSinceNow:2.0f];
}

// 向右翻页
- (void) pressPageButtonRight {
    // 将第一个元素移动到最后一个
    id firstObject = [_imageNames.firstObject mutableCopy];
    
    [_imageNames removeObjectAtIndex:0];
    
    [_imageNames addObject:firstObject];
    
    // 更新视图
    [self insertImageToImageView];
    // 重制偏移量
    self.scrollView.contentOffset = CGPointMake(0, 0);
    // 移动视图
    [self.scrollView setContentOffset:CGPointMake(self.scrollView.contentOffset.x + self.myScreen.bounds.size.width, 0) animated:YES];
    _timer.fireDate = [NSDate dateWithTimeIntervalSinceNow:2.0f];
}

手势

手势翻页的同时就带有了自定义的动画,问题在于如何判断手势。我们使用偏移量来判断,开始轮播图的偏移量应该处于第二页,x应正好等于屏幕的宽。如果x被用户划到0,则用户是在左翻,如果x被划到2倍的屏幕宽以上,则用户在右翻。在用户翻完后,我们改变视图顺序即可

- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
    if (self.scrollView.contentOffset.x <= 0) {
        id lastObject = [_imageNames.lastObject mutableCopy];
        
        [_imageNames removeLastObject];
        
        [_imageNames insertObject:lastObject atIndex:0];
        
    } else if (self.scrollView.contentOffset.x >= 2 * self.myScreen.bounds.size.width) {
        id firstObject = [_imageNames.firstObject mutableCopy];
        
        [_imageNames removeObjectAtIndex:0];
        
        [_imageNames addObject:firstObject];
        
    } else {
        return;
    }
    [self insertImageToImageView];
    
    self.scrollView.contentOffset = CGPointMake(self.myScreen.bounds.size.width, 0);
}

 

计时器


计时器的翻页与按钮基本相同,需要注意避免计时器和按钮或手势同时翻页鬼畜,所以要添加几个函数。反别是在用户按下按钮或屏幕时停止计时器,和松开后重启计时器。

// 创建定时器
- (void) createTimer {
    _timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(pressPageButtonRight) userInfo:nil repeats:YES];
}

- (void) scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    // 暂停timer
    _timer.fireDate = [NSDate distantFuture];
}

- (void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    // 启动timer
    _timer.fireDate = [NSDate dateWithTimeIntervalSinceNow:2.0f];
}


自定义cell

明析了注册和非注册的区别

注册下无需判断cell是否为空,而非注册需要这一判断。

自定义cell需要我们自定义一个继承自UITableViewCell的类,在这个类中添加我们需要的属性,在重写这个类的init方法。最后实现的UITableController协议方法,使其返回该类实例。

自定义:

@interface MyInformationCell : UITableViewCell

@property (nonatomic, weak) UIImageView* iconView;
@property (nonatomic, weak) UILabel* userName;
@property (nonatomic, weak) UILabel* accont;
@property (nonatomic, weak) UILabel* cueAccontCard;
@property (nonatomic, weak) UIView* userState;
@property (nonatomic, weak) UIView* userFriendsState;
@property (nonatomic, weak) UIImageView* QRCode;
@property (nonatomic, weak) UIButton* cradArrow;

// 创建用户状态按钮
- (void) createUserStateButton;
// 创建用户朋友状态按钮
- (void) createUserFriendsStateButtonWithNumberOfFriends:(NSInteger)numberOfFriends;

@end

重写init方法:

- (instancetype) initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        // 建立子控件
        UIImageView* iconView = [[UIImageView alloc] init];
        [self.contentView addSubview:iconView];
        iconView.frame = CGRectMake(25, 5, 60, 60);
        iconView.backgroundColor = [UIColor redColor];
        // 设置圆角
        [iconView.layer setMasksToBounds:YES];
        [iconView.layer setCornerRadius:10];
        _iconView = iconView;
        
        UILabel* userName = [[UILabel alloc] init];
        [self.contentView addSubview:userName];
        userName.frame = CGRectMake(95, 5, 200, 25);
        userName.font = [UIFont systemFontOfSize:20];
        _userName = userName;
        
        UILabel* accont = [[UILabel alloc] init];
        [self.contentView addSubview:accont];
        accont.frame = CGRectMake(95, 60, 100, 20);
        accont.font = [UIFont systemFontOfSize:15];
        accont.textColor = [UIColor grayColor];
        _accont = accont;
        
        UILabel* cueAccontCard = [[UILabel alloc] init];
        [self.contentView addSubview:cueAccontCard];
        cueAccontCard.frame = CGRectMake(95, 40, 100, 20);
        cueAccontCard.font = [UIFont systemFontOfSize:15];
        cueAccontCard.text = @"微信号:";
        cueAccontCard.textColor = [UIColor grayColor];
        _cueAccontCard = cueAccontCard;
        
        UIView* userState = [[UIView alloc] init];
        [self.contentView addSubview:userState];
        userState.frame = CGRectMake(95, 100, 60, 25);
        // 设置圆角
        [userState.layer setMasksToBounds:YES];
        [userState.layer setCornerRadius:10];
//        userState.backgroundColor = [UIColor redColor];
        _userState = userState;
        
        UIView* userFriendsState = [[UIView alloc] init];
        [self.contentView addSubview:userFriendsState];
        userFriendsState.frame = CGRectMake(160, 100, 250, 25);
        // 设置圆角
        [userFriendsState.layer setMasksToBounds:YES];
        [userFriendsState.layer setCornerRadius:10];
        _userFriendsState = userFriendsState;
        
        UIImageView* RQCode = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"RQ.png"]];
        [self.contentView addSubview:RQCode];
        RQCode.frame = CGRectMake(self.bounds.size.width + 10, self.bounds.size.height + 10, 20, 20);
        _QRCode = RQCode;
        
        UIButton* cradArrow = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [self.contentView addSubview:cradArrow];
        cradArrow.frame = CGRectMake(self.bounds.size.width + 30, self.bounds.size.height + 10, 20, 20);
        [cradArrow setImage:[UIImage imageNamed:@"jinrujiantou.png"] forState:UIControlStateNormal];
        _cradArrow = cradArrow;
        
    }
    
    return self;
}

实现协议方法:

- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 4;
}

- (NSInteger) numberOfSectionsInTableView:(UITableView *)tableView {
    return 4;
}

- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    NSString* cellName = @"Cardcell";
        // 尝试获取重复的单元格
        CardCell* cell = [_tableView dequeueReusableCellWithIdentifier:cellName];
        
        if (cell == nil) {
            cell = [[CardCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellName];
        }
        
        // 单元格赋值
        cell.cradName.text = _arrayDate[indexPath.section][indexPath.row];
        
        UIImage* image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld %ld.png", indexPath.section, indexPath.row]];
        [cell.iconCard setImage:image];
        
        return  cell;
}

最后在学习一个小的View圆角化:

// 设置圆角

        [iconView.layer setMasksToBounds:YES];
// 设置圆角半径
        [iconView.layer setCornerRadius:10];

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值