用TableView写带特效的cell
用TableView写带特效的cell
效果:
源码地址:
https://github.com/YouXianMing/UI-Component-Collection
分析:
在UIScrollView中的代理中发送广播,然后在cell中接收广播
对每一个cell进行设置
对开发有利的一种小细节:
核心源码:
控制器源码
//
// ViewController.m
// TableView
//
// Created by XianMingYou on 15/4/9.
// Copyright (c) 2015年 XianMingYou. All rights reserved.
//
#import "ViewController.h"
#import "DataCell.h"
@interface ViewController ()<UITableViewDelegate, UITableViewDataSource>
@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) NSArray *dataSource;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 数据源
self.dataSource = @[@"YouXianMing", @"Google",
@"iOS Developer", @"Android Developer", @"YouTube",
@"UI Delveloper", @"PS4 Player", @"XboxOne Player"];
// 初始化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:[DataCell class] forCellReuseIdentifier:DATA_CELL];
[self.view addSubview:self.tableView];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// 发送广播
[[NSNotificationCenter defaultCenter] postNotificationName:DATA_CELL
object:@(scrollView.contentOffset.y)
userInfo:nil];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.dataSource.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
DataCell *cell = [tableView dequeueReusableCellWithIdentifier:DATA_CELL];
cell.indexPath = indexPath;
cell.label.text = self.dataSource[indexPath.row];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return CELL_HEIGHT;
}
@end
cell源码
//
// DataCell.h
// TableView
//
// Created by XianMingYou on 15/4/9.
// Copyright (c) 2015年 XianMingYou. All rights reserved.
//
#import <UIKit/UIKit.h>
#define DATA_CELL @"DataCell"
#define CELL_HEIGHT (56.8f * 2)
@interface DataCell : UITableViewCell
@property (nonatomic, strong) NSIndexPath *indexPath;
@property (nonatomic, strong) UILabel *label;
@end
//
// DataCell.m
// TableView
//
// Created by XianMingYou on 15/4/9.
// Copyright (c) 2015年 XianMingYou. All rights reserved.
//
#import "DataCell.h"
#import "UIView+SetRect.h"
@interface DataCell ()
@property (nonatomic, strong) UIView *blackView;
@end
@implementation DataCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
self.selectionStyle = UITableViewCellSelectionStyleNone;
// 注册通知中心
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(notificationEvent:)
name:DATA_CELL
object:nil];
// 构建子控件
[self buildViews];
}
return self;
}
- (void)buildViews {
self.label = [[UILabel alloc] initWithFrame:CGRectMake(30, 0, 300, CELL_HEIGHT)];
self.label.font = [UIFont fontWithName:@"Avenir-BookOblique" size:30.f];
[self addSubview:self.label];
self.blackView = [[UIView alloc] initWithFrame:CGRectMake(10 + 50, 80, 150, 2)];
self.blackView.backgroundColor = [UIColor blackColor];
[self addSubview:self.blackView];
}
- (void)notificationEvent:(id)sender {
NSDictionary *data = sender;
CGFloat offsetY = [[data valueForKey:@"object"] floatValue] - self.indexPath.row * CELL_HEIGHT;
if (offsetY >= 0 && offsetY <= CELL_HEIGHT) {
// 根据百分比计算
CGFloat percent = 1 - offsetY / CELL_HEIGHT;
// 设置值
self.label.alpha = percent;
self.blackView.x = 10 + percent * 50;
} else if (offsetY >= - CELL_HEIGHT * 5 && offsetY <= - CELL_HEIGHT * 4) {
// 根据百分比计算
CGFloat percent = (offsetY + CELL_HEIGHT) / CELL_HEIGHT + 4;
// 设置值
self.label.alpha = percent;
self.blackView.x = 10 + 50 + (1 - percent) * 50;
} else {
// 复位
self.label.alpha = 1.f;
self.blackView.x = 10 + 50;
}
}
- (void)dealloc {
// 移除通知中心
[[NSNotificationCenter defaultCenter] removeObserver:self
name:DATA_CELL
object:nil];
}
@end