Swift中为TableView添加Logo并按建议里程排序显示数组

嘿，这两个需求都好解决，咱们一步步来实现：

一、按距离对ATM数组排序 #

首先咱们得确保每个ATM对象都能存储到用户的距离，然后利用你的calculateDistance函数来完成排序。

1. 先定义ATM数据模型（如果还没的话） #

import CoreLocation

struct ATMPlace {
    let name: String
    let address: String?
    let coordinate: CLLocationCoordinate2D
    var distanceToUser: Double = 0.0 // 用来存储计算好的到用户的距离（单位：公里）
}

2. 计算距离并排序数组 #

假设你已经从Google Places获取到了原始的atmPlaces数组，同时拿到了用户的当前位置userLocation（CLLocation类型），咱们可以这样处理：

// 全局或类内变量，存储排序后的ATM数组
var sortedATMs: [ATMPlace] = []

func processAndSortATMData(rawATMs: [ATMPlace], userLocation: CLLocation) {
    // 第一步：给每个ATM计算到用户的距离
    var updatedATMs = rawATMs
    for index in updatedATMs.indices {
        let atmLocation = CLLocation(latitude: updatedATMs[index].coordinate.latitude,
                                     longitude: updatedATMs[index].coordinate.longitude)
        // 调用你的calculateDistance函数
        updatedATMs[index].distanceToUser = calculateDistance(from: userLocation, to: atmLocation)
    }
    
    // 第二步：按距离从小到大排序（最近的排最前面）
    sortedATMs = updatedATMs.sorted { $0.distanceToUser < $1.distanceToUser }
    
    // 刷新TableView展示排序后的数据
    yourTableView.reloadData()
}

// 你的calculateDistance函数（可以直接用这个或者你自己的版本）
func calculateDistance(from start: CLLocation, to end: CLLocation) -> Double {
    let distanceInMeters = start.distance(from: end)
    return distanceInMeters / 1000 // 转换为公里，方便展示
}

二、在TableView中添加Logo #

这里分两种常见场景，你可以根据需求选择：

场景1：每个Cell左侧添加ATM Logo #

如果想让每个ATM条目左边都带个Logo，有两种实现方式：

方式A：用系统默认Cell的imageView

不需要自定义Cell，直接用系统的UITableViewCell即可：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "ATMCell", for: indexPath)
    
    let currentATM = sortedATMs[indexPath.row]
    // 设置Logo（假设你已经把logo图片放到Assets里，命名为"atm-icon"）
    cell.imageView?.image = UIImage(named: "atm-icon")
    cell.imageView?.contentMode = .scaleAspectFit
    cell.imageView?.clipsToBounds = true
    
    // 设置其他文本信息
    cell.textLabel?.text = currentATM.name
    cell.detailTextLabel?.text = String(format: "%.2f km", currentATM.distanceToUser)
    
    return cell
}

方式B：自定义Cell（更灵活）

如果需要更个性化的布局，比如Logo大小、位置自定义，可以创建自定义Cell：

1. 先在Storyboard/XIB里创建一个UITableViewCell子类，命名为ATMCell，添加UIImageView（用于Logo）、UILabel（名称）、UILabel（距离），并关联IBOutlet。
2. 然后在代码中使用：

class ATMCell: UITableViewCell {
    @IBOutlet weak var logoImageView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var distanceLabel: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // 可以给Logo加圆角，优化视觉效果
        logoImageView.layer.cornerRadius = 8
        logoImageView.clipsToBounds = true
    }
}

// 在tableView的cellForRowAt方法里
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "ATMCell", for: indexPath) as! ATMCell
    
    let currentATM = sortedATMs[indexPath.row]
    cell.logoImageView.image = UIImage(named: "atm-icon")
    cell.nameLabel.text = currentATM.name
    cell.distanceLabel.text = String(format: "%.1f km away", currentATM.distanceToUser)
    
    return cell
}

场景2：在TableView头部添加Logo #

如果是想在整个TableView的顶部加一个全局Logo，实现HeaderView即可：

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: 60))
    headerView.backgroundColor = .systemBackground
    
    // 创建LogoImageView
    let logoImageView = UIImageView(image: UIImage(named: "app-logo"))
    logoImageView.frame = CGRect(x: 20, y: 10, width: 40, height: 40)
    logoImageView.contentMode = .scaleAspectFit
    
    headerView.addSubview(logoImageView)
    return headerView
}

// 设置Header高度
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 60
}

内容的提问来源于stack exchange，提问作者Naza