仿呱呱购物流时间轴效果(swift)
2017-12-05 17:56
155 查看
仿呱呱购物流时间轴效果(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:String var 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 = 15 override 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{ //没有数据时展示的View var noDataV = UIView() var expressMs : [ExpressMs]? { didSet { tableView?.reloadData() } } // 顶部刷新 Mjrefresh let freshH = MJRefreshNormalHeader() weak var expressVDel : ExpressVDel? var tableView:UITableView? func setTb(){ //创建tableview self.tableView = UITableView(frame: CGRect(x:0,y:StatusBarAndNavigationBarH,width:ScreenInfo.width,height:ScreenInfo.height - StatusBarAndNavigationBarH - TabbarSafeBotM), style:.grouped) self.tableView?.delegate = self self.tableView?.dataSource = self //创建一个重用的单元格 self.tableView?.register(ExpressTbCells.self, forCellReuseIdentifier: "SwiftCell") addSubview(self.tableView!) tableView?.estimatedRowHeight = 160 //将tableview的estimatedRowHeight设大一点 tableView?.rowHeight = UITableViewAutomaticDimension tableView?.separatorStyle = UITableViewCellSeparatorStyle.none freshH.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 = false guard 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 = true let 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.AcceptTime self.visited[indexPath.row] = true if indexPath.row == 0 { cell?.timeLineIcon.layer.cornerRadius = (setHeight(size: 5)) cell?.timeLineIcon.backgroundColor = UIColor.red cell?.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 in make.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) in STLog(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.创建Group let dGroup = DispatchGroup() lazy var expressV: ExpressV = {[weak self] in let titleFrame = CGRect(x: 0, y: 0, width: ScreenInfo.width, height: ScreenInfo.height) let expressV = ExpressV(frame: titleFrame) expressV.expressVDel = self return expressV }() override func viewDid 90c3 Load() { 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 ShipMs self.expressV.picUrls = datas.thumbnail_S self.expressV.status_Vals = datas.order_status self.expressV.whichE_Vals = datas.order_logistics_company self.expressV.orderNum_Vals = datas.order_num self.expressV.eNum_Vals = datas.order_logistics_num self.dGroup.leave() }) dGroup.enter() expressVM.getDeliver(){(result) in self.expressV.expressMs = self.expressVM.expressMs self.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
最终效果展示:
相关文章推荐
- 任意半径中值滤波(扩展至百分比滤波器)O(1)时间复杂度算法的原理、实现及效果。
- 任意半径中值滤波(扩展至百分比滤波器)O(1)时间复杂度算法的原理、实现及效果。
- 源码推荐(9.24):用 Swift 写的抽屉效果,Quartz 2D 绘制表情
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- 使用ExpandableListView实现时间轴效果
- Swift - 歌曲播放样例(附带播放时间和播放进度)
- Swift - 使用atlas图集实现动画效果(SpriteKit游戏开发)
- swift 显示友好时间
- Swift - 禁用UIWebView和WKWebView的下拉拖动效果
- 用Objective_C / swift写一个QQ分组(展开收起)的效果(附DEMO)
- Swift UILabel 数字动画效果
- 状态栏 时间显示效果 数字钟
- 如何以特定的时间间隔为图片添加动画效果?
- Path 2.0 大部分效果分享(tableview左右滑动,时间,menu动画),有码
- 使用CSS时间打点的Loading效果的教程
- 我的一位科学家同学在两个月内时间减肥68斤,效果明显啊! 牛人无论是学术还是减肥都是牛人!【转自张诗卓】
- ‘红牛’的效果:--怎么样交付时间紧、任务重的项目
- 滚轮效果View的日期选择器和时间选择器和对话框
- iOS swift-帖子发布时间处理
- Java实现微博显示时间效果