概述

迄今为止最为简单的时间轴 :可以自定义(类似于美团的送餐信息)

详细

迄今为止 最为简单的时间轴 :可以自定义(类似于美团的送餐信息) 示例图如下:

一、准备工作

现在,在多数的项目中都会用到这样的东西,尤其是商城类项目,里面有物流信息的,此版时间轴项目最为通熟易懂,就算你是iOS开发大白,看到里面的流程 介绍,你都会试着写。

首先给大家看下项目整体结构,在项目中我是用的是SDAutolayout布局库,当然打击也可以使用原生的进行布局,也可使用其他的,如果想看原生布局的话,我会写个放上面,供大家使用。

二、程序实现

里面主要就是运用TableView的一些属性,对数据进行处理,在项目中每条信息的周围都有线条,而且它是随着信息多少随之变化,始终讲数据包在里面,这里面主要运用了UIImage中的

- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight __TVOS_PROHIBITED;

对边框进行处理

主要是运用TableView 每条物流信息都占据一个cell,自动适应cell的高度,给其设置需要的边框样式,可以自己随意修改。

1、根据数据来获取高度

#pragma mark -- 每个cell的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
id model = self.TimeLineData[indexPath.row];
return [self.GZTableView cellHeightForIndexPath:indexPath model:model keyPath:@"model" cellClass:[GZTableViewCell class] contentViewWidth:[self cellContentViewWith]];
}

2、对结构进行布局

self.contentView.backgroundColor = [UIColor whiteColor];
self.point.sd_layout.topSpaceToView(self.contentView, 20).leftSpaceToView(self.contentView, 5).widthIs(8).heightEqualToWidth();
self.point.sd_cornerRadius = @(4); self.GZLine.sd_layout.topEqualToView(self.contentView).centerXEqualToView(self.point).widthIs(1).bottomSpaceToView(self.contentView, 0); self.GZIma.sd_layout.topSpaceToView(self.contentView , 10).leftSpaceToView(self.point, 3).bottomSpaceToView(self.contentView, 10).rightSpaceToView(self.contentView, 10);
_GZIma.image = [UIImage imageNamed:@"WechatIMG3"];
// 指定为拉伸模式,伸缩后重新赋值 self.GZIma.image = [self.GZIma.image stretchableImageWithLeftCapWidth:20 topCapHeight:30]; self.TimeLabel.sd_layout.centerYEqualToView(self.point).leftSpaceToView(self.contentView, 35).rightSpaceToView(self.contentView, 15).heightIs(20);
self.ContentLabel.sd_layout.topSpaceToView(self.TimeLabel, 15).leftEqualToView(self.TimeLabel).rightSpaceToView(self.contentView, 15).autoHeightRatio(0);

3、数据模型

#import <Foundation/Foundation.h>
@interface GZTimeLineModel : NSObject
@property (nonatomic, strong) NSString *title;
@property(nonatomic,copy)NSString* time;
@end 布局
@property (strong, nonatomic) IBOutlet UIView *point;
@property (strong, nonatomic) IBOutlet UIView *GZLine;
@property (nonatomic, strong)GZTimeLineModel *model;
@property (strong, nonatomic) IBOutlet UIImageView *GZIma;
@property (strong, nonatomic) IBOutlet UILabel *TimeLabel;
@property (strong, nonatomic) IBOutlet UILabel *ContentLabel; 实现 @property (nonatomic, strong) UITableView *GZTableView;
@property (nonatomic, strong) NSMutableArray *TimeLineData; 懒加载
-(UITableView *)GZTableView{
if (!_GZTableView) {
_GZTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];
[self.view addSubview:_GZTableView];
_GZTableView.delegate = self ;
_GZTableView.dataSource = self ;
self.GZTableView.separatorStyle = UITableViewCellSeparatorStyleNone ;
}
return _GZTableView ;
}

三、运行效果

此项目不需要任何账户,只需简单的下载就可看到你想要的效果

可以设置成自己喜欢的 需要的各种类型。

运行效果图如下所示:

注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

iOS最为简单时间轴(GZTimeLine)的更多相关文章

  1. iOS之TimeLine(时间轴)的实现

    这是一个关于OC时间轴的简单实现,我认为重要的是思路. 感谢作者:Cyandev 的文章<iOS 实现时间线列表效果>给的思路.这里先附上Objective-C的代码实现,有时间再去试试S ...

  2. 纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

  3. [置顶] 纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

  4. iOS 物流信息时间轴

    代码地址如下:http://www.demodashi.com/demo/11958.html timelineLogistics 是模仿淘宝物流信息时间轴界面的自定义View 准备工作 引入Maso ...

  5. ios 物流时间轴,自动匹配电话号码,可点击拨打

    http://www.code4app.com/thread-27587-1-1.html 资讯时间轴(折叠/展开) http://www.code4app.com/thread-32358-1-1. ...

  6. 一个简单的时间轴demo

    一个时间轴的组成 使用一个块级元素包裹内容,并未块级元素设置边框 定义圆形或者菱形等元素标签,子元素设置偏移或者定位元素将图标定位到边框上 使其中的内容不溢出,自动换行,内容自动撑高 英文自动换行:w ...

  7. echarts之简单的入门——【一】做个带时间轴的柱状统计图

    百度Echarts 官网首页  http://echarts.baidu.com/ 配置项手册 http://echarts.baidu.com/option.html#title GL配置项手册 h ...

  8. iOS CAReplicatorLayer 简单动画

    代码地址如下:http://www.demodashi.com/demo/11601.html 写在最前面,最近在看学习的时候,偶然间发现一个没有用过的Layer,于是抽空研究了下,本来应该能提前记录 ...

  9. 海康、大华NVR网络硬盘录像机录像无插件全平台访问实现—录像回放时间轴功能实现方法

    在之前的博文中我们有介绍方案*NVR硬件录像机web无插件播放方案(支持取特定时间段视频流)*:该片博文旨在介绍时间轴功能的实现和相关接口的调用: 时间轴样式展示: 问题分析 对于 时间轴的展示实现需 ...

随机推荐

  1. iOS appStore中的应用 实现升级功能

    .h文件中 <UIAlertViewDelegate> .m文件中 #import "SBJson.h"        //解析sbjson 数据 - (void)vi ...

  2. ios 中局部变量可以通过传递来进行管理和释放,借此可提高代码的內聚度

    ios 中 局部变量可以通过传递来进行管理和释放,通过多使用局部变量,可以提高代码的內聚度.如下: -(void)someMethod { UILabel *label = [[UILabel al ...

  3. [Unity Editor]10行代码搞定Hierarchy排序

    在日常的工作和研究中,当给我们的场景摆放过多的物件的时候,Hierarchy面板就会变得杂乱不堪.比如这样:    过多的层次结构充斥在里面,根层的物件毫无序列可言,整个层次面板显示非常的杂乱不堪,如 ...

  4. 一种基于ES5的JavaScript继承

    关于JavaScript继承,方式非常多,包含compile-to-javascript的语言TypeScript, CoffeeScript以及站点MDN, GitHub, Modernizr各种p ...

  5. tinyxml使用笔记与总结

    在TinyXML中,根据XML的各种元素来定义了一些类:        TiXmlBase:整个TinyXML模型的基类.        TiXmlAttribute:对应于XML中的元素的属性.   ...

  6. 怎么上传自己的代码/项目到自己的github仓库上

    创建新的git仓库   设置新仓库   创建完成后   复制git地址   现在已经有window git客户端了(地址:https://desktop.github.com/),但还是建议用git命 ...

  7. easyui datatimebox 取值和赋值

    1.取值 var time = $('.easyui-datetimebox').datetimebox('getValue'); 全部代码如下: <script type="text ...

  8. golang包管理工具及环境管理工具;如何下载外网的依赖包

    简介: golang的包管理工具类似于java的maven.python的pip.js的npm,可以实现依赖包的统一管理:有很多:govendor.godep.glide,挑一个自己喜欢的用吧.mac ...

  9. String类对象的比较

    1.字符串比较,是按照字符串(String)中每一个字符(char)的字段表顺序进行比较 /** * Compares two strings lexicographically(字典序,按照字典顺序 ...

  10. 解决IP地址冲突

    1.重新启动路由器就可以. 要是网络上的每一个设备都被分配了动态IP地址,路由器重新启动.又一次分配IP地址给网络上的每一个设备后,这个问题就有望得到解决. 可是假设是在企业内就不可能随便的重新启动公 ...