用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(, , , CELL_HEIGHT)];
self.label.font = [UIFont fontWithName:@"Avenir-BookOblique" size:.f];
[self addSubview:self.label]; self.blackView = [[UIView alloc] initWithFrame:CGRectMake( + , , , )];
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 >= && offsetY <= CELL_HEIGHT) {
// 根据百分比计算
CGFloat percent = - offsetY / CELL_HEIGHT; // 设置值
self.label.alpha = percent;
self.blackView.x = + percent * ; } else if (offsetY >= - CELL_HEIGHT * && offsetY <= - CELL_HEIGHT * ) {
// 根据百分比计算
CGFloat percent = (offsetY + CELL_HEIGHT) / CELL_HEIGHT + ; // 设置值
self.label.alpha = percent;
self.blackView.x = + + ( - percent) * ;
} else {
// 复位
self.label.alpha = .f;
self.blackView.x = + ;
}
} - (void)dealloc {
// 移除通知中心
[[NSNotificationCenter defaultCenter] removeObserver:self
name:DATA_CELL
object:nil];
} @end

用TableView写带特效的cell的更多相关文章

  1. IOS Swift语言开发 tableView的重用以及自cell的自适应高度

    http://www.aichengxu.com/iOS/11143168.htm 一.准备数据 (这是一个元组,第一个元素为英雄的名字;第二个元素为英雄头像图片的名字,格式为.PNG,如果为其他的格 ...

  2. 127使用 TableView 自带的单元格样式实现好友列表,另外在单元格中添加辅助按钮

    类似的做法如之前这篇随笔:114自定义UITableViewCell(扩展知识:为UITableViewCell添加动画效果) 相比之下:自定义 UITableViewCell 的内容灵活,可根据需求 ...

  3. UITableVIew与UICollectionView带动画删除cell时崩溃的处理

    UITableVIew与UICollectionView带动画删除cell时崩溃的处理 -会崩溃的原因是因为没有处理好数据源与cell之间的协调关系- 效果: tableView的源码: ModelC ...

  4. python使用pyqt写带界面工具

    上篇介绍的使用python自带tkinter包,来写带界面的工具. 此篇介绍使用pyqt来开发测试工具. tkinter的好处是python官方自带,上手容易(但手写控件复杂),布局和摆放都不直观和容 ...

  5. [How to]使用自定义cell进行tableview的创建,适用于cell样式不发生变化的情况。

    1.简介 在tableview中又默认的cell格式,其中组织如下: <截取自官网文档> 最终的在页面上默认的cell也只能像上述那样的显示效果,如果这种要是无法满足我们的界面要求,那么我 ...

  6. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  7. 【iOS开发-68】APP下载案例:利用tableView自带的cell布局+缓存池cell复用时注意button状态的检查

    (1)效果 (2)源码与资源下载 http://pan.baidu.com/s/1pJLo2PP (3)总结 --核心是利用UITableView里面自带的cell来制作样式同样的cell. 与之对应 ...

  8. iOS学习——tableview中带编辑功能的cell键盘弹出遮挡和收起问题解决

    最近在项目中经常用到UITableView中的cell中带有UITextField或UITextView的情况,然后在这种场景下,当我们点击屏幕较下方的cell进行编辑时,这时候键盘弹出来会出现遮挡待 ...

  9. iOS - (TableView中利用系统的 cell 设置 cell.textlabel 位置和大小)

    今天工作稍微的遇到了一点小小的难题,需求效果中 TableView cell 中的 Label 字体大小比原先系统中的要大些且 Label 位置不是在前面,而是在中间往后,对于这个问题我第一时间也是想 ...

随机推荐

  1. springboot-14-自定义properties文件值注入javaBean中

    被这个问题困扰了好几天.... 在spring中, 从资源文件向bean中注入值非常简单, 只需要properties文件被spring加载, 然后在被spring管理的类写响应的属性, 然后 @Va ...

  2. 学习笔记---log4j的使用与配置

    Log4j由三个重要的组件构成:日志信息的优先级,日志信息的输出目的地,日志信息的输出格式. 日志信息的优先级从高到低有OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALL,分别用来 ...

  3. Automapper问题记录

    在Automapper使用中会碰到一些未能映射或者错误的问题,这些问题可能会经常忘记如何处理,想到一些就记录一些: 映射值有时为空又不报错的情况 这很可能是由于目标类中的部分属性有问题导致的,最简单的 ...

  4. 回溯法求解n皇后和迷宫问题

    回溯法是一种搜索算法,从某一起点出发按一定规则探索,当试探不符合条件时则返回上一步重新探索,直到搜索出所求的路径. 回溯法所求的解可以看做解向量(n皇后坐标组成的向量,迷宫路径点组成的向量等),所有解 ...

  5. 初学者使用MySQL_Workbench 6.0CE创建数据库和表,以及在表中插入数据。

    标签: mysqlworkbench数据库 2013-10-09 20:17 19225人阅读 评论(14) 收藏 举报  分类: mysql(1)  版权声明:本文为博主原创文章,未经博主允许不得转 ...

  6. 利用jquery.backstretch插件,背景切换

    //首页自动更换背景特效开始============================================1.引用文件<script src="jquery.js" ...

  7. JS权威指南笔记之数据类型

    1.类型分为原始类型和对象. 2.原始类型有:数字类型,字符类型,布尔,和null undefind. 3.JavaScript里的函数都是真值. 4.函数和通过New关键字创建对象.这个样函数称为构 ...

  8. [IDE]快捷键整理

      VS Resharper eclipse 备注 运行 Ctrl+F5 - Ctrl+F11   调试 F5 - F11   逐语句执行 F11 - F5 IE.FF: F11 逐过程执行 F10 ...

  9. jstack,jmap,jstat分别的意义

    1.Jstack 1.1   jstack能得到运行java程序的java stack和native stack的信息.可以轻松得知当前线程的运行情况.如下图所示 注:这个和thread dump是同 ...

  10. Tomcat9 配置在Windows7 64位 上安装步骤

    安装 Tomcat 之前先安装java JDK . 本人在安装Tomcat之前,java的jdk安装的是jdk 11版本.安装java 网上教程一大把,我这里不再阐述. 百度直接搜 Tomcat,如下 ...