ios - 快速表格部分标题在滚动上复制

Question

我承认在 Swift 中使用这些自定义 header 失败了。我已经尝试了好几天，以防止节标题内的标签和图像重复。基本上滚动标题内的标签/图像会重复并彼此叠加。

看在上帝的份上，有人可以向我解释为什么会发生这种情况以及如何解决它。

圆形图像不断创建图像并将它们放在前一个图像之上，与名称和日期标签相同!!

这是我的 View Controller :

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource  {

    @IBOutlet weak var navigationBar: UINavigationItem!
    @IBOutlet weak var tableView: UITableView!
    var list = []
    var audioPlayer:AVAudioPlayer!
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func getListBro() -> NSArray {
        return list
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        tableView.dataSource = self;
        tableView.delegate = self;
        self.tableView.rowHeight = UITableViewAutomaticDimension


        let streamURL = NSURL(string: "http://192.241.174.8:8000/beat-stream-all/")!

        let stuff = GetBeatStream(url:streamURL)
        self.tableView.rowHeight = UITableViewAutomaticDimension;
        self.tableView.estimatedRowHeight = 50.0; //
        stuff.downloadJSONFromURL {
            (let jsonDictionary) in
                if let jsonList = jsonDictionary["results"] as? NSArray {
                    self.list = jsonList
                }


                let priority = DISPATCH_QUEUE_PRIORITY_DEFAULT
                dispatch_async(dispatch_get_global_queue(priority, 0)) {
                    // do some task
                    dispatch_async(dispatch_get_main_queue()) {
                        // update some UI
                        self.tableView.reloadData()
                    }
                }
        }
    }//end view did load



    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCellWithIdentifier("streamCell", forIndexPath: indexPath) as! StreamTableViewCell

        cell.beatCover.image = UIImage(named: "imgres")

        if let id = list[indexPath.section] as? NSDictionary {
            if let beatID = id["id"] as? NSInteger {
                cell.setID(beatID)
            }
        }

        if let beat_cover = list[indexPath.section] as? NSDictionary {
            if let beat_cover_image = beat_cover["beat_cover"] as? String {
                cell.beatCover.downloadImageFrom(link: beat_cover_image, contentMode: UIViewContentMode.ScaleToFill)  //set your image from link array.
            }
        }



        if let audio = list[indexPath.section] as? NSDictionary {
            if let audio_url = audio["audio"] as? String {
                    cell.url = audio_url
                    cell.buildPlayer()
            }
        }

        return cell
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }

    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return list.count
    }

    func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {


        let beatAuthorLabel = UILabel(frame: CGRectMake(55, 5, 200, 40))

        //USER PIC
        let profilePictureImageView = UIImageView(frame: CGRectMake(5, 5, 40, 40));
        profilePictureImageView.layer.borderWidth = 0
        profilePictureImageView.layer.masksToBounds = false
        profilePictureImageView.layer.borderColor = UIColor.blackColor().CGColor
        profilePictureImageView.layer.cornerRadius = profilePictureImageView.frame.height/2
        profilePictureImageView.clipsToBounds = true
        profilePictureImageView.layer.masksToBounds = true

        profilePictureImageView.image = UIImage(named: "imgres")  //set placeholder image first.

        if let userPicSection = list[section] as? NSDictionary {
            if let artist = userPicSection["artist"] as? NSDictionary {
                if let profilePic = artist["profile_pic"] as? String {
                    profilePictureImageView.downloadImageFrom(link: profilePic, contentMode: UIViewContentMode.ScaleAspectFit) 
                }
            }
        }


        if let nameSection = list[section] as? NSDictionary {
            if let name = nameSection["artist"] as? NSDictionary {
                if let adminName = name["admin_name"] as? NSString {
                    print(adminName)
                    beatAuthorLabel.text = adminName as String
                    beatAuthorLabel.font = UIFont(name: beatAuthorLabel.font.fontName, size: 14)
                }
            }
        }






        var dateLabel = UILabel(frame: CGRectMake(225, 5, 200, 40))
        if let created = list[section] as? NSDictionary {
            if let date = created["created_at"] as? String {
                dateLabel.text = date as String
                dateLabel.font = UIFont(name: dateLabel.font.fontName, size: 8)
            }
        }

        let header: UITableViewHeaderFooterView = view as! UITableViewHeaderFooterView
        header.contentView.addSubview(beatAuthorLabel)
        header.contentView.addSubview(dateLabel)
        header.contentView.addSubview(dateLabel)
        header.contentView.addSubview(profilePictureImageView)
        header.contentView.backgroundColor = UIColor(red: 179/255, green: 194/255, blue: 191/255, alpha:1)
        header.textLabel!.textColor = UIColor.whiteColor()
        header.alpha = 1
    }



    func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 50
    }

    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        let indexPath = tableView.indexPathForSelectedRow
        let currentCell = tableView.cellForRowAtIndexPath(indexPath!)! as! StreamTableViewCell
        currentCell.player.play()
    }

    func tableView(tableView: UITableView, didEndDisplayingCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
        let leavingCell = cell as! StreamTableViewCell
        leavingCell.player.pause()
    }
}

Answer 1

像单元格一样，标题 View 被重用。因此，当 TableView 向您发送 tableView(_:willDisplayHeaderView:) 时，您可能不是第一次收到该标题 View 的消息。然而，每次您收到消息时，都会向其添加四个 subview 。

根本不要实现 tableView(_:willDisplayHeaderView:forSection:)。

相反，使用不同 subview 的属性创建 UITableViewHeaderFooterView 的子类。这就像您创建名为 StreamTableViewCell 的 UITableViewCell 子类一样。也许你可以调用你的标题 subview 类 StreamSectionHeaderView。然后你有两个选项来设置标题 View 的 subview 。

选项 1:在 StreamSectionHeaderView.initWithFrame(_:) 中，创建标题 View 的 subview (并将它们存储在实例属性中并将它们添加为 subview )。这基本上就是您现在在 tableView(_:willDisplayHeaderView:forSection:) 中所做的，但是您会将大部分代码移动到 StreamSectionHeaderView 类中。使用 UITableView.registerClass(_:forHeaderFooterViewReuseIdentifier:) 向 TableView 注册 StreamSectionHeaderView 类。

选项 2:在 XIB 中设计标题 View 及其 subview (您不能在 Storyboard中这样做)，将 subview 连接到 StreamSectionHeaderView 属性(必须是 IBOutlet s 在这种情况下)，并使用 UITableView.registerNib(_:forHeaderFooterViewReuseIdentifier:) 在 TableView 中注册 XIB。

要生成部分，通过调用 tableView 实现 tableView(_:viewForHeaderInSection:)。dequeueReusableHeaderFooterViewWithIdentifier(_:) 然后配置标题 View 的 subview ，这些 subview 在 dequeueReusableHeaderFooterViewWithIdentifier(_:) 返回时已经存在。

更新

这是您的 StreamSectionHeaderView，假设您想在代码中设置它的 subview :

class StreamSectionHeaderView: UITableViewHeaderFooterView {

    // Make these IBOutlets if you design StreamSectionHeaderView in a XIB.
    var beatAuthorLabel = UILabel(frame: CGRectMake(55, 5, 200, 40))
    var profilePictureImageView = UIImageView(frame: CGRectMake(5, 5, 40, 40))
    var dateLabel = UILabel(frame: CGRectMake(225, 5, 200, 40))

    init(frame: CGRect) {
        profilePictureImageView.layer.borderWidth = 0
        profilePictureImageView.layer.masksToBounds = false
        profilePictureImageView.layer.borderColor = UIColor.blackColor().CGColor
        profilePictureImageView.layer.cornerRadius = profilePictureImageView.frame.height/2
        profilePictureImageView.clipsToBounds = true
        profilePictureImageView.layer.masksToBounds = true
        profilePictureImageView.image = UIImage(named: "imgres")

        beatAuthorLabel.font = UIFont(name: beatAuthorLabel.font.fontName, size: 14)
        dateLabel.font = UIFont(name: dateLabel.font.fontName, size: 8)

        contentView.addSubview(beatAuthorLabel)
        contentView.addSubview(dateLabel)
        contentView.addSubview(profilePictureImageView)
        contentView.backgroundColor = UIColor(red: 179/255, green: 194/255, blue: 191/255, alpha:1)
        textLabel!.textColor = UIColor.whiteColor()
        alpha = 1
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

}

然后，在您的 TableView Controller 中:

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    override func viewDidLoad() {
        super.viewDidLoad()

        // blah blah blah other stuff

        tableView.registerClass(StreamSectionHeaderView.self, forHeaderFooterViewReuseIdentifier: "Header")
    }

    override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let header = tableView.dequeueReusableHeaderFooterViewWithIdentifier("Header") as! StreamSectionHeaderView

        if let userPicSection = list[section] as? NSDictionary {
            if let artist = userPicSection["artist"] as? NSDictionary {
                if let profilePic = artist["profile_pic"] as? String {
                    header.profilePictureImageView.downloadImageFrom(link: profilePic, contentMode: UIViewContentMode.ScaleAspectFit)
                }
            }
        }

        if let nameSection = list[section] as? NSDictionary {
            if let name = nameSection["artist"] as? NSDictionary {
                if let adminName = name["admin_name"] as? NSString {
                    print(adminName)
                    header.beatAuthorLabel.text = adminName as String
                }
            }
        }

        if let created = list[section] as? NSDictionary {
            if let date = created["created_at"] as? String {
                header.dateLabel.text = date as String
            }
        }

        return header
    }

}