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

最新推荐文章于 2024-05-15 09:55:31 发布

stoneUoU

最新推荐文章于 2024-05-15 09:55:31 发布

阅读量601

点赞数

分类专栏： swift 文章标签：物流 swift

本文链接：https://blog.csdn.net/stoneUoU/article/details/78723104

版权

在优化呱呱购App物流信息详情界面时，通过Swift实现了一个自适应的Tableview，展示了完整的物流轨迹。利用快递鸟API，抽离了view、model和Ctrl代码，并在GitHub开源。文章详细介绍了实现思路、安装插件库、数据模型、视图布局、视图模型以及控制器逻辑。

摘要由CSDN通过智能技术生成

仿呱呱购物流时间轴效果(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()
    //消