UITableView中cell点击的绚丽动画效果

本人视频教程系类   iOS中CALayer的使用

效果图:

源码:

YouXianMingCell.h 与 YouXianMingCell.m

//
//  YouXianMingCell.h
//  CellAnimation
//
//  Created by YouXianMing on 14/12/27.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface YouXianMingCell : UITableViewCell

@property (nonatomic, strong) UILabel *name;

- (void)showIconAnimated:(BOOL)animated;
- (void)hideIconAnimated:(BOOL)animated;

- (void)showSelectedAnimation;

@end
//
//  YouXianMingCell.m
//  CellAnimation
//
//  Created by YouXianMing on 14/12/27.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "YouXianMingCell.h"

@interface YouXianMingCell ()

@property (nonatomic, strong) UIImageView *iconView;
@property (nonatomic, strong) UIView      *lineView;
@property (nonatomic, strong) UIView      *rectView;

@end

@implementation YouXianMingCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {

        _rectView                   = [[UIView alloc] initWithFrame:CGRectMake(262, 23, 35, 35)];
        _rectView.layer.borderWidth = 1.f;
        _rectView.layer.borderColor = [UIColor grayColor].CGColor;
        [self addSubview:_rectView];

        // 图标
        _iconView       = [[UIImageView alloc] initWithFrame:CGRectMake(260, 20, 40, 40)];
        _iconView.image = [UIImage imageNamed:@"icon"];
        _iconView.alpha = 0.f;
        [self addSubview:_iconView];

        // 文字
        _name           = [[UILabel alloc] initWithFrame:CGRectMake(30, 10, 300, 60)];
        _name.font      = [UIFont fontWithName:@"HelveticaNeue-Thin" size:30];
        _name.textColor = [UIColor grayColor];
        [self addSubview:_name];

        _lineView                 = [[UIView alloc] initWithFrame:CGRectMake(30, 70, 0, 2)];
        _lineView.alpha           = 0.f;
        _lineView.backgroundColor = [UIColor redColor];
        [self addSubview:_lineView];
    }

    return self;
}

- (void)showIconAnimated:(BOOL)animated {
    if (animated) {
        _iconView.transform = CGAffineTransformMake(2, 0, 0, 2, 0, 0);

        [UIView animateWithDuration:0.5
                              delay:0
             usingSpringWithDamping:7
              initialSpringVelocity:4
                            options:UIViewAnimationOptionCurveEaseInOut
                         animations:^{
                             _iconView.alpha     = 1.f;
                             _iconView.transform = CGAffineTransformMake(1, 0, 0, 1, 0, 0);

                             _lineView.alpha     = 1.f;
                             _lineView.frame     = CGRectMake(30, 70, 200, 2);

                             _name.frame         = CGRectMake(30 + 50, 10, 300, 60);

                             _rectView.layer.borderColor  = [UIColor redColor].CGColor;
                             _rectView.transform          = CGAffineTransformMake(0.8, 0, 0, 0.8, 0, 0);
                             _rectView.layer.cornerRadius = 4.f;
                         }
                         completion:^(BOOL finished) {

                         }];
    } else {
        _iconView.transform = CGAffineTransformMake(1, 0, 0, 1, 0, 0);
        _iconView.alpha     = 1.f;

        _lineView.alpha     = 1.f;
        _lineView.frame     = CGRectMake(30, 70, 200, 2);

        _name.frame         = CGRectMake(30 + 50, 10, 300, 60);

        _rectView.layer.borderColor  = [UIColor redColor].CGColor;
        _rectView.transform          = CGAffineTransformMake(0.8, 0, 0, 0.8, 0, 0);
        _rectView.layer.cornerRadius = 4.f;
    }
}

- (void)hideIconAnimated:(BOOL)animated {
    if (animated) {
        [UIView animateWithDuration:0.5
                              delay:0
             usingSpringWithDamping:7
              initialSpringVelocity:4
                            options:UIViewAnimationOptionCurveEaseInOut
                         animations:^{
                             _iconView.alpha     = 0.f;
                             _iconView.transform = CGAffineTransformMake(0.5, 0, 0, 0.5, 0, 0);

                             _lineView.alpha     = 0.f;
                             _lineView.frame     = CGRectMake(30, 70, 0, 2);

                             _name.frame         = CGRectMake(30, 10, 300, 60);

                             _rectView.layer.borderColor  = [UIColor grayColor].CGColor;
                             _rectView.transform          = CGAffineTransformMake(1, 0, 0, 1, 0, 0);
                             _rectView.layer.cornerRadius = 0;
                         }
                         completion:^(BOOL finished) {

                         }];
    } else {
        _iconView.alpha     = 0.f;

        _lineView.alpha     = 0.f;
        _lineView.frame     = CGRectMake(30, 70, 0, 2);

        _name.frame         = CGRectMake(30, 10, 300, 60);

        _rectView.layer.borderColor  = [UIColor grayColor].CGColor;
        _rectView.transform          = CGAffineTransformMake(1, 0, 0, 1, 0, 0);
        _rectView.layer.cornerRadius = 0;
    }
}

- (void)showSelectedAnimation {
    UIView *tmpView         = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 80)];
    tmpView.backgroundColor = [[UIColor yellowColor] colorWithAlphaComponent:0.30];
    tmpView.alpha           = 0.f;

    [self addSubview:tmpView];

    [UIView animateWithDuration:0.20 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
        tmpView.alpha = 0.8f;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.20 delay:0.1 options:UIViewAnimationOptionCurveEaseOut animations:^{
            tmpView.alpha = 0.f;
        } completion:^(BOOL finished) {
            [tmpView removeFromSuperview];
        }];
    }];
}

@end

控制器源码:

//
//  ViewController.m
//  CellAnimation
//
//  Created by YouXianMing on 14/12/27.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "ViewController.h"
#import "YouXianMingCell.h"

static NSString *YouXianMingCellFlag = @"YouXianMingCell";

@interface ViewController ()<UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, strong) UITableView    *tableView;

@property (nonatomic, strong) NSMutableArray *dataArray;
@property (nonatomic, strong) NSMutableArray *chooseArray;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 初始化数据源
    _dataArray   = [NSMutableArray array];
    _chooseArray = [NSMutableArray array];

    [_dataArray addObject:@"NoZuoNoDie"];
    [_dataArray addObject:@"YouXianMing"];
    [_dataArray addObject:@"LifeIsCoding"];
    [_chooseArray addObject:@(NO)];
    [_chooseArray addObject:@(NO)];
    [_chooseArray addObject:@(NO)];

    // 初始化tableView
    self.tableView                = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    self.tableView.delegate       = self;
    self.tableView.dataSource     = self;
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    [self.tableView registerClass:[YouXianMingCell class] forCellReuseIdentifier:YouXianMingCellFlag];
    [self.view addSubview:self.tableView];

}

#pragma mark - TableView相关方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return _dataArray.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    YouXianMingCell *cell = [tableView dequeueReusableCellWithIdentifier:YouXianMingCellFlag];
    cell.selectionStyle   = UITableViewCellSelectionStyleNone;

    cell.name.text = _dataArray[indexPath.row];

    if ([_chooseArray[indexPath.row] boolValue] == NO) {
        [cell hideIconAnimated:NO];
    } else {
        [cell showIconAnimated:NO];
    }

    return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    YouXianMingCell *cell = (YouXianMingCell *)[tableView cellForRowAtIndexPath:indexPath];

    [cell showSelectedAnimation];

    if ([_chooseArray[indexPath.row] boolValue] == NO) {
        [_chooseArray replaceObjectAtIndex:indexPath.row withObject:@(YES)];
        [cell showIconAnimated:YES];
    } else {
        [_chooseArray replaceObjectAtIndex:indexPath.row withObject:@(NO)];
        [cell hideIconAnimated:YES];
    }

    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 80.f;
}

@end

测试图片:

核心地方:

时间: 2024-11-05 19:40:41

UITableView中cell点击的绚丽动画效果的相关文章

UITableView中Cell和section的插入与删除

插入段: - (void)insertSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)deleteSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; 插入行: - (void)insertRowsAtIndexPaths:(NSArray *)

UITableView中cell边框和背景设置最佳方案

UITableView是iOS开发中最常用的视图控件,在平常用的iOS App中大部分都用到了UITableView. 需求很简单,就是在一个UITableView里面实现一个不一样的UITableViewCell,如下图里的“切换账号”按钮 正常情况下grouped样式(UITableViewStyleGrouped)UITableViewCell都是有边框的,所以如果只是用addSubView添加一个按钮的话,就会有边框在外面,不符合要求,也想过用一个大的图片,把这个cell给盖住,但是感觉

iOS实现TableView中Cell出现时弹出动画

发现一个简单的方式可以让TableView变得非常的炫酷,语言描述太苍白,直接看图吧: 在任何有cell先出现在屏幕上的时候都会有这么一个效果,非常的流畅,也非常有意思(忍不住不停地把玩..).实现起来也非常简单,iOS原生支持,几行代码就可以搞定,在众多的tableview代理方法中,我们利用下面这个方法: -(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtInde

UITableView中cell里的UITextField不被弹出键盘挡住

效果如下: 源码: EditCell.h 与 EditCell.m // // EditCell.h // Cell // // Created by YouXianMing on 14/12/18. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import <UIKit/UIKit.h> @interface EditCell : UITableViewCell @property (nonatomic, stro

解决UITableView中Cell重用机制导致内容出错的方法总结

UITableView继承自UIScrollview,是苹果为我们封装好的一个基于scroll的控件.上面主要是一个个的 UITableViewCell,可以让UITableViewCell响应一些点击事件,也可以在UITableViewCell中加入 UITextField或者UITextView等子视图,使得可以在cell上进行文字编辑. UITableView中的cell可以有很多,一般会通过重用cell来达到节省内存的目的:通过为每个cell指定一个重用标识符 (reuseIdentif

iOS如何固定UITableView中cell.imageView.image的图片大小

凡是进行ios开发的,基本上都会遇到要展示列表,或者即使不是标准列表,但由于数量不固定,也需要如同列表一样从上往下显示.加载的情况.这些,都绕不过对UITableView的使用. 在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似于微信.QQ.新浪微博等软件基本上随处都是UITableView.当然它的广泛使用自然离不开它强大的功能. 我们经常在开发过程中会用到默认UITableView的cell.imageView.image,如果图

[IOS开发教程] iOS如何固定UITableView中cell.imageView.image的图片大小

凡是进行ios开发的,基本上都会遇到要展示列表,或者即使不是标准列表,但由于数量不固定,也需要如同列表一样从上往下显示.加载的情况.这些,都绕不过对UITableView的使用. 在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似于微信.QQ.新浪微博等软件基本上随处都是UITableView.当然它的广泛使用自然离不开它强大的功能. 我们经常在开发过程中会用到默认UITableView的cell.imageView.image,如果图

【iOS开发-9】图片属性介绍,实现类似于“点击关注”的动画效果,以及顺便实现一个开始/停止按钮切换功能

(1)如果是按钮触发一个事件方法,我们只需要用(id)sender把控件对象传递进来,这个方法就能处理控件属性值:而如果方法需要处理其他对象,那么一个方法,就是把这个对象设置为全局变量,这样所有的方法都可以使用这个对象,并设置它的属性,我们这里的imgView2就是这样,可以在方法中,控制它停止还是开始. (2)UIImage和UIImageView通常是一对,UIImage的对象只是把图片添加到程序里面,但它不是视图无法被加载显示在APP中,但是UIImageView是一个视图,可以把UIIm

用适配器模式处理复杂的UITableView中cell的业务逻辑

适配器是用来隔离数据源对cell布局影响而使用的,cell只接受适配器的数据,而不会与外部数据源进行交互. 源码: ModelCell.h 与 ModelCell.m // // ModelCell.h // Adapter // // Created by XianMingYou on 15/2/10. // Copyright (c) 2015年 XianMingYou. All rights reserved. // #import <UIKit/UIKit.h> #define NAM