仿呱呱购物流时间轴效果(swift)：

在呱呱购App二期的优化过程中，发现物流信息详情界面显示的不太友好，由此，修改了部分代码使cell实现自适应，完美显示具体的物流轨迹。我使用了快递鸟的api，将这部分的view，model及Ctrl代码抽离出来，并在github上面开源，并在此贴出来：

先说下思路：由分析可知，该界面整个为一个Tableview，上部分的相关信息为tableview的headerview，下部分的内容为tableview的Cells，而cell中又分为 4个view+2个label，先看cell左边的时光轴，实质上是三个view(line1V + 圆点View + line2V)拼接而成,只是第一个cell中渲染界面时更改相应的约束（如圆点View变大，颜色变红），再看右边：其实由两个label+1个分割线View组合而成。注意：由于显示物流信息轨迹的图片得根据后台返回的信息多少来自适应布局，其属性的

      label.numberOfLines = 0，

整个tableview得实现自适应：应添加如下属性：

    tableView?.estimatedRowHeight = 160 tableView?.rowHeight = UITableViewAutomaticDimension

1. 安装必要的插件库：

platform :ios, ’10.0’
target ‘GoodInfos’ do
use_frameworks!
pod ’SnapKit’   //自动布局库
pod ‘SDWebImage’   //渲染图片库
pod 'SwiftyJSON'  //解析Json库
pod 'Alamofire'  //网络请求库
pod 'SwiftIconFont'  //字体图标库
pod 'MBProgressHUD'  //菊花提示库
pod "MJRefresh"  //下拉刷新库
end

2. Model(数据模型):

//物流信息
struct ExpressMs {var AcceptStation:Stringvar AcceptTime:String
}
//基本信息
struct ShipMs {//订单号var order_num: String//物流公司var order_logistics_company:String//物流单号var order_logistics_num: String//缩略图var thumbnail_S:String//订单状态var order_status:String
}

3.View(视图)的布局:

3.1tableCell中的部分代码:

import UIKit
import SnapKit
class ExpressTbCells: UITableViewCell {//时间轴线上的图标var timeLineIcon: UIView = UIView()//物流信息显示文本标签var infoLabel: UILabel = UILabel()//消费条目文本标签var timeLabel: UILabel = UILabel()//图标上半部分的时间线var forepartTimeLineLabel: UIView = UIView()//图标下半部分的时间线var backpartTimeLineLabel: UIView = UIView()var lineView:UIView = UIView()//时间线离左右的横向间距let horizontalGap: CGFloat = 15override init(style: UITableViewCellStyle, reuseIdentifier: String?) {super.init(style: style, reuseIdentifier: reuseIdentifier)setSubviews()}required init?(coder aDecoder: NSCoder) {fatalError("init(coder:) has not been implemented")}func setSubviews(){//在此布局，具体代码请见github}
}

3.2View中贴tableView创建代码:

import UIKit
import SnapKit
import SDWebImage
import MJRefresh
protocol ExpressVDel: class {//去刷新func toFresh(expressV : ExpressV)   //定义代理，到控制器中去执行相应的刷新代码逻辑
}
class ExpressV:UIView{//没有数据时展示的Viewvar noDataV = UIView()var expressMs : [ExpressMs]? {didSet {tableView?.reloadData()}}// 顶部刷新 Mjrefreshlet freshH = MJRefreshNormalHeader()weak var expressVDel : ExpressVDel?var tableView:UITableView?func setTb(){//创建tableviewself.tableView = UITableView(frame: CGRect(x:0,y:StatusBarAndNavigationBarH,width:ScreenInfo.width,height:ScreenInfo.height - StatusBarAndNavigationBarH - TabbarSafeBotM), style:.grouped)self.tableView?.delegate = selfself.tableView?.dataSource = self//创建一个重用的单元格self.tableView?.register(ExpressTbCells.self,forCellReuseIdentifier: "SwiftCell")addSubview(self.tableView!)tableView?.estimatedRowHeight = 160  //将tableview的estimatedRowHeight设大一点tableView?.rowHeight = UITableViewAutomaticDimensiontableView?.separatorStyle = UITableViewCellSeparatorStyle.nonefreshH.setRefreshingTarget(self, refreshingAction: #selector(self.freshFunc))tableView?.mj_header = freshH}setTb()
}
extension ExpressV:UITableViewDataSource, UITableViewDelegate {//在本例中，只有一个分区func numberOfSections(in tableView: UITableView) -> Int {return 1;}//返回表格行数（也就是返回控件数）func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {noDataV.isHidden = falseguard let lengths = self.expressMs else{return 0}return lengths.count}//头视图func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {let headerView = UIView()return headerView}func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {return 0.000001;}//创建各单元显示内容(创建参数indexPath指定的单元）func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)-> UITableViewCell {noDataV.isHidden = truelet identifier = "SwiftCell"var cell = tableView.cellForRow(at: indexPath)as? ExpressTbCells    //注意在此不能重用单元格，否则第10个Cell与第0个cell显示一致，会冲突if cell == nil{cell = ExpressTbCells(style: .default, reuseIdentifier: identifier)cell?.selectionStyle = .none}//除去选中时的颜色cell?.selectionStyle = .none//获取记录let datas = self.expressMs![indexPath.row] as ExpressMs//设置到达站点cell?.infoLabel.text = "\(datas.AcceptStation)"//设置到达站点的时间cell?.timeLabel.text = datas.AcceptTimeself.visited[indexPath.row] = trueif indexPath.row == 0 {cell?.timeLineIcon.layer.cornerRadius = (setHeight(size: 5))cell?.timeLineIcon.backgroundColor = UIColor.redcell?.infoLabel.textColor = UIColor.colorWithCustom(242, g: 71, b: 30)cell?.timeLabel.textColor = UIColor.colorWithCustom(242, g: 71, b: 30)cell?.timeLineIcon.snp.updateConstraints { (make) -> Void inmake.width.height.equalTo(setHeight(size: 10))}cell?.forepartTimeLineLabel.backgroundColor = UIColor.white}if indexPath.row == 4{cell?.infoLabel.font = UIFont.UiFontSize(size: 48)}if indexPath.row == self.expressMs!.count - 1{cell?.lineView.backgroundColor = UIColor.colorWithCustom(241, g: 243, b: 246,alpha: 1)}return cell!}
}
extension ExpressV{@objc func freshFunc(){expressVDel?.toFresh(expressV : self)}
}

4. VM(视图模型)：

import UIKit
import SwiftyJSON
class ExpressVM: NSObject {var shipMs:[ShipMs] = [GoodInfos.ShipMs(order_num: "1171130968809631905", order_logistics_company: "圆通",  order_logistics_num: "051711301643554785", thumbnail_S: "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3654744077,710703022&fm=173&s=7BAE34621142ECE856D81DC70000E0B1&w=218&h=146&img.JPEG",order_status: "2")]var expressMs:[ExpressMs] = [ExpressMs]()//发起网络请求：func getDeliver(paras : [String : Any]? = nil, _ finishCallback : @escaping (_ result: Any) -> ()) {AlamofireStart.requestData(.GET, options:"http://139.199.169.203/ApiSearch.php",parameters:paras) { (result) inSTLog(JSON(result)["Success"])if JSON(result)["Success"] == true{for i in 0..<Int(JSON(result)["Traces"].count){let datas1 = ExpressMs(AcceptStation: "\(JSON(result)["Traces"][Int(JSON(result)["Traces"].count)-i-1]["AcceptStation"])",AcceptTime: "\(JSON(result)["Traces"][Int(JSON(result)["Traces"].count)-i-1]["AcceptTime"])");self.expressMs.append(datas1)}}finishCallback(result)}}
}

5. Ctrl(控制器中逻辑)：

import UIKit
import SDWebImage
import SnapKit
import SwiftIconFont
import SwiftyJSON
//物流信息
class ExpressVC: UIViewController,UIGestureRecognizerDelegate {var expressMs:[ExpressMs] = [ExpressMs]()fileprivate lazy var expressVM : ExpressVM = ExpressVM()// 2.创建Grouplet dGroup = DispatchGroup()lazy var expressV: ExpressV = {[weak self] inlet titleFrame = CGRect(x: 0, y: 0, width: ScreenInfo.width, height: ScreenInfo.height)let expressV = ExpressV(frame: titleFrame)expressV.expressVDel = selfreturn expressV}()override func viewDidLoad() {super.viewDidLoad()self.setUpDatas()expressVM.expressVMDel = self}
}
extension ExpressVC:ExpressVMDel,ExpressVDel{//封装一波func setUpDatas(){self.view.addSubview(expressV)self.expressVM.expressMs.removeAll()self.expressV.expressMs?.removeAll()HudTips.showHUD(ctrl: self)dGroup.enter()DispatchQueue.main.asyncAfter(deadline: DispatchTime.now(), execute: {let datas: ShipMs = self.expressVM.shipMs[0] as ShipMsself.expressV.picUrls = datas.thumbnail_Sself.expressV.status_Vals = datas.order_statusself.expressV.whichE_Vals = datas.order_logistics_companyself.expressV.orderNum_Vals = datas.order_numself.expressV.eNum_Vals = datas.order_logistics_numself.dGroup.leave()})dGroup.enter()expressVM.getDeliver(){(result) inself.expressV.expressMs = self.expressVM.expressMsself.dGroup.leave()}}func toFresh(expressV:ExpressV){//下拉刷新}
}

6. 总结：

此例子另加mjRefesh下拉刷新，MBProgressHUD异步请求提示框，Toaster提示等组件，tableview没有数据是的占位图
快递鸟Api phpDemo下载地址：http:/139.199.169.203/KdApiSearchDemo.zip
附上GitHub地址：https://github.com/stoneUoU/GoodInfos
最终效果展示：

仿呱呱购物流时间轴效果(swift)相关推荐

vue实现物流时间轴效果
实现效果 html <ul class="time-axis" :class="{ 'is-done': item.state === 1 }" v-fo ...
js实现的时间轴效果
今天整理以前的资料发现以前写的一个时间轴效果,当时也是网上找了很久没有找到,就自己写了一个,现在发出来给有需要的人,代码写的可能有点乱. 效果图: 下面是美工做的设计图的效果(有个美工就是好): 下面 ...
html简单垂直时间轴,简单的响应式垂直时间轴效果
这是一款简单的响应式垂直时间轴效果.该垂直时间轴效果使用bootstrap网格进行布局,在小屏幕设备上会将所有的时间节点占满整行垂直排列. 使用方法在页面中引入bootstrap.min.css文件 ...
用 CSS 从零写一个时间轴效果
时间轴效果介绍在前端开发中,我们会遇到一些场景特别适合用时间轴来展示,例如下面按照日期时间来记录发生的事件: 还可以做成下面这种比较流行的左右对称卡片风格的时间轴: 如果再稍加装饰,还能有更加高大上 ...
Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！
Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...
安卓：三分钟实现物流配送页面（时间轴效果）
物流配送页面.主要使用RecycleView实现.通过判断将条目的第一条进行特殊处理.日后复制粘贴备用.效果图如下: 可以通过各个view的相对位置来实现啊,比如那一条竖线可以用imageview来实 ...
HTML+CSS实现时间轴效果
先看效果 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
小程序时间轴和地区列表的实现，js+css实现时间轴效果
老规矩先看效果图先来看左图的地区列表是如何实现的. 我们在解析数据之前,要先看下数据结构 [{"_id": "XL28U3kPDdDCJ9m0"," ...
Android自定义View之ListView实现时间轴效果：我只是个送快递的。
先上效果图: 实现时间轴的原理 listview的基本使用,相信大家都很熟悉.先在layout下新建一个xml布局文件,对应一个子项的listView的显示内容.在上面的图我们可以看到,每一项都是有 ...

仿呱呱购物流时间轴效果(swift)