Question

如何使我的表视图看起来更像这样，而不仅仅是标准的水平单元格。我希望它看起来像下面的示例图像，我需要做什么？我的tableView的代码也在下面。

import UIKit
import Firebase
import FirebaseDatabase
import SDWebImage

struct postStruct {
    let title : String!
    let author : String!
    let date : String!
    let article : String!
    let downloadURL : String!

}

class NewsViewController: UITableViewController {
    var posts = [postStruct]()
    override func viewDidLoad() {
    super.viewDidLoad()


    let ref = Database.database().reference().child("Posts")

    ref.observeSingleEvent(of: .value, with: { snapshot in
        print(snapshot.childrenCount)
        for rest in snapshot.children.allObjects as! [DataSnapshot] {
            guard let value = rest.value as? Dictionary<String,Any> else { continue }
            guard let  title = value["Title"] as? String else { continue }
            guard let  downloadURL = value["Download URL"] as? String else { continue }
            guard let  author = value["Author"] as? String else { continue }
            guard let  date = value["Date"] as? String else { continue }
            guard let  article = value["Article"] as? String else { continue }

            let post = postStruct(title: title, author: author, date: date, article: article, downloadURL: downloadURL)
            self.posts.append(post)
        }
        self.posts = self.posts.reversed(); self.tableView.reloadData()
    })  
}

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return posts.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell")
        let label1 = cell?.viewWithTag(1) as! UILabel
        label1.text = posts[indexPath.row].title
        let imageView = cell?.viewWithTag(2) as! UIImageView
        let post = self.posts[indexPath.row];
        imageView.sd_setImage(with: URL(string: post.downloadURL), placeholderImage: UIImage(named: "placeholder"))
        return cell!
    }

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "detail" {
            if let indexPath = tableView.indexPathForSelectedRow {
                let destVC = segue.destination as! DetailNewsViewController
                destVC.titleText =  posts[indexPath.row].title
                destVC.dateText =  posts[indexPath.row].date
                destVC.authorText =  posts[indexPath.row].author
                destVC.bodyText =  posts[indexPath.row].article
                destVC.headerPhoto =  posts[indexPath.row].downloadURL
            }
        }
    }
}

Answer 1

也许您可以在故事板中使用具有不同标识符的不同单元格。根据需要设计每个单元格并在使用单元格rowAtIndexPath返回所需的单元格。

Answer 2

我认为你应该使用UICollectionView而不是tableView。并创建自定义布局。请参阅此精彩教程以了解自定义布局。 https://www.raywenderlich.com/107439/uicollectionview-custom-layout-tutorial-pinterest

如何使TableView Cell在水平和垂直方向上有不同的尺寸？

2 个答案: