Erstellen eines Newsfeeds mit Uitableview und Uicollectionview in Ios

Der Aufbau eines dynamischen Newsfeeds ist eine grundlegende Funktion für unzählige iOS-Anwendungen, von Social Media-Clients bis hin zu Content-Aggregatoren und professionellen Nachrichten-Apps. In der iOS-Entwicklung sind und die beiden primären scrollbaren Container für die Anzeige von Datensammlungen. Während sie viele Ähnlichkeiten aufweisen - beide beruhen auf Delegation, Datenquellen und wiederverwendbaren Zellen -, ist jede für bestimmte Anwendungsfälle am besten geeignet. zeichnet sich durch die Präsentation einer einfachen vertikalen Liste von Elementen aus, wie z. B. einem Feed von Artikelüberschriften mit kurzen Beschreibungen. bietet weitaus flexiblere Layouts, einschließlich Gitter, horizontales Scrollen und benutzerdefinierte Anordnungen, was es ideal für bildlastige Newsfeeds oder Magazin-Schnittstellen macht. Dieser Artikel bietet eine gründliche, produktionsbereite Anleitung zum Erstellen, Anpassen und Optimieren eines Newsfeeds mit beiden Komponenten mit erweiterten Codebeispielen und Best Practices.

UITableView und UICollectionView verstehen

Bevor wir in die Implementierung einsteigen, ist es wichtig, die architektonischen Unterschiede zu verstehen und wann man sich füreinander entscheiden muss. Beide Ansichten sind Teil von UIKit und folgen dem MVC-Muster (Model-View-Controller), aber ihre Layout-Fähigkeiten und APIs unterscheiden sich erheblich.

UITableView: Das Arbeitspferd für Listen

stellt eine einzelne Spalte von Zeilen dar, die in Abschnitte gruppiert werden können. Jede Zeile entspricht einer Zelle, und die Ansicht verwaltet automatisch vertikales Scrollen, Zellwiederverwendung und Zeilenanimationen. Es ist die natürliche Wahl für Newsfeeds, bei denen jedes Element ein konsistentes, vertikal gestapeltes Layout ist: eine Überschrift, eine kurze Beschreibung, ein Zeitstempel und optional ein Bild. Das Protokoll bietet zwei wesentliche Methoden: und . Der Delegate steuert Zeilenhöhe, Auswahl und Bearbeitung. Mit moderner UIKit können Sie auch selbstgroße Zellen verwenden, indem Sie einstellen.

UICollectionView: Flexibilität für komplexe Layouts

trennt die Datendarstellung vom Layout-Algorithmus über das -Objekt. Das Standard-Flow-Layout () ordnet Elemente in einem Raster oder fließenden horizontalen / vertikalen Linien an, aber Sie können es unterklassifizieren oder das moderne für mehrsektionale Layouts mit einzigartigen Verhaltensweisen verwenden (z. B. ein horizontales Karussell gefolgt von einem Raster). Für Newsfeeds, die Medientypen - Videos, Bilder, Artikelkarten - mischen oder adaptiven Abstand und dynamische Zellengrößen erfordern, ist die überlegene Wahl. Sein Datenquellenprotokoll spiegelt , aber mit und Der Delegierte stellt Methoden für Zellengrößen, Inserts und Abstand zur Verfügung.

Einrichten eines Basic Newsfeeds

Wir werden durch die Erstellung eines minimalen Newsfeed-View-Controllers für jede Komponente gehen. Beide Beispiele gehen davon aus, dass Sie eine Single-Screen-App mit Xcode und Swift erstellen. Aus Gründen der Kürze lassen wir die Storyboard-Einrichtung weg; wir werden die Ansichten programmgesteuert erstellen.

Erstellen eines Newsfeeds mit UITableView

Beginnen Sie mit der Unterklasseung von und entsprechen Sie und . Fügen Sie eine als Hauptunteransicht hinzu.

import UIKit

class NewsTableViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

 private let tableView = UITableView()
 private let newsItems: [String] = [
 "Breaking: Major Policy Change Announced",
 "Tech Giants Unveil AI Partnership",
 "Local Weather Warning: Heavy Rain Expected"
 ]

 override func viewDidLoad() {
 super.viewDidLoad()
 view.backgroundColor = .white
 title = "News Feed"

 setupTableView()
 }

 private func setupTableView() {
 tableView.frame = view.bounds
 tableView.dataSource = self
 tableView.delegate = self
 tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
 tableView.rowHeight = 80
 view.addSubview(tableView)
 }

 // MARK: - UITableViewDataSource

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

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
 let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
 cell.textLabel?.text = newsItems[indexPath.row]
 cell.textLabel?.numberOfLines = 0
 cell.accessoryType = .disclosureIndicator
 return cell
 }

 // MARK: - UITableViewDelegate

 func tableView(_ tableView: UITableView, didSelectRowAt indexPath: Path) {
 tableView.deselectRow(at: indexPath, animated: true)
 // Navigate to article detail (to be implemented)
 }
}

In dieser Basisversion zeigt jede Zelle eine einzelne Textzeile an. Für einen Produktions-Newsfeed würden Sie die einfache durch eine benutzerdefinierte Unterklasse mit Beschriftungen für Titel, Beschreibung und eine Bildansicht ersetzen. Die Verwendung von für dynamische Höhe wird empfohlen, wenn die Inhaltslängen variieren.

Erstellen eines Newsfeeds mit UICollectionView

Für einen Grid-Stil-Feed (gemeinsam mit bildschweren Nachrichtenkarten) implementieren wir ein mit .

import UIKit

class NewsCollectionViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

 private var collectionView: UICollectionView!
 private let imageNames = ["news1", "news2", "news3", "news4"] // Assume images in asset catalog

 override func viewDidLoad() {
 super.viewDidLoad()
 title = "Image Feed"
 setupCollectionView()
 }

 private func setupCollectionView() {
 let layout = UICollectionViewFlowLayout()
 layout.scrollDirection = .vertical
 layout.minimumInteritemSpacing = 8
 layout.minimumLineSpacing = 8
 layout.sectionInset = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)

 collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
 collectionView.backgroundColor = .white
 collectionView.dataSource = self
 collectionView.delegate = self
 collectionView.register(ImageCell.self, forCellWithReuseIdentifier: "ImageCell")
 view.addSubview(collectionView)
 }

 // MARK: - UICollectionViewDataSource

 func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
 return imageNames.count
 }

 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
 let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCell", for: indexPath) as! ImageCell
 cell.loadImage(named: imageNames[indexPath.item])
 return cell
 }

 // MARK: - UICollectionViewDelegateFlowLayout

 func collectionView(_ collectionView: UICollectionView,
 layout collectionViewLayout: UICollectionViewLayout,
 sizeForItemAt indexPath: IndexPath) -> CGSize {
 let padding: CGFloat = 8 * 3 // 3 gaps: left, interitem, right
 let availableWidth = view.frame.width - padding
 let widthPerItem = availableWidth / 2
 return CGSize(width: widthPerItem, height: widthPerItem * 1.2)
 }
}

// Custom cell class
class ImageCell: UICollectionViewCell {
 private let imageView = UIImageView()

 override init(frame: CGRect) {
 super.init(frame: frame)
 imageView.contentMode = .scaleAspectFill
 imageView.clipsToBounds = true
 contentView.addSubview(imageView)
 imageView.translatesAutoresizingMaskIntoConstraints = false
 NSLayoutConstraint.activate([
 imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
 imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
 imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
 imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
 ])
 }

 required init?(coder: NSCoder) { fatalError("init(coder:)") }

 func loadImage(named: String) {
 imageView.image = UIImage(named: named)
 }
}

Dieser Code erzeugt ein zweispaltiges Raster mit einem Seitenverhältnis von 1,2:1 pro Zelle. Sie können auf für einen Karussell-Feed einstellen. Ersetzen Sie Platzhalterbilder durch asynchrones Laden von Bildern über oder Bibliotheken wie Kingfisher.

Anpassen von Zellen für einen reicheren Newsfeed

Klartextzellen sind für eine moderne Nachrichten-App nicht ausreichend. Sie müssen Miniaturansichten, Veröffentlichungsdaten, Quellnamen und manchmal interaktive Schaltflächen (Shares, Saves) anzeigen. Dazu müssen benutzerdefinierte - oder -Unterklassen mit ordnungsgemäß angelegten Unteransichten erstellt werden.

Entwerfen einer Featured Article Cell (UITableView)

Erstellen Sie eine Zelle, die ein für ein großes Heldenbild, ein für die Überschrift, ein anderes für den Auszug und ein kleines Label für den Zeitstempel enthält.

class ArticleCell: UITableViewCell {
 let heroImageView = UIImageView()
 let titleLabel = UILabel()
 let excerptLabel = UILabel()
 let dateLabel = UILabel()

 override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
 super.init(style: style, reuseIdentifier: reuseIdentifier)
 setupViews()
 }

 required init?(coder: NSCoder) { fatalError() }

 private func setupViews() {
 heroImageView.contentMode = .scaleAspectFill
 heroImageView.clipsToBounds = true
 titleLabel.font = UIFont.boldSystemFont(ofSize: 18)
 titleLabel.numberOfLines = 2
 excerptLabel.font = UIFont.systemFont(ofSize: 14)
 excerptLabel.textColor = .gray
 excerptLabel.numberOfLines = 3
 dateLabel.font = UIFont.systemFont(ofSize: 12)
 dateLabel.textColor = .lightGray

 for subview in [heroImageView, titleLabel, excerptLabel, dateLabel] {
 subview.translatesAutoresizingMaskIntoConstraints = false
 contentView.addSubview(subview)
 }

 // Constraints – simplified; in practice use stack views or manual anchors
 NSLayoutConstraint.activate([
 heroImageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
 heroImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
 heroImageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
 heroImageView.heightAnchor.constraint(equalToConstant: 200),

 titleLabel.topAnchor.constraint(equalTo: heroImageView.bottomAnchor, constant: 8),
 titleLabel.leadingAnchor.constraint(equalTo: heroImageView.leadingAnchor),
 titleLabel.trailingAnchor.constraint(equalTo: heroImageView.trailingAnchor),

 excerptLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 4),
 excerptLabel.leadingAnchor.constraint(equalTo: titleLabel.leadingAnchor),
 excerptLabel.trailingAnchor.constraint(equalTo: titleLabel.trailingAnchor),

 dateLabel.topAnchor.constraint(equalTo: excerptLabel.bottomAnchor, constant: 4),
 dateLabel.leadingAnchor.constraint(equalTo: titleLabel.leadingAnchor),
 dateLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8)
 ])
 }

 func configure(with article: Article) {
 titleLabel.text = article.title
 excerptLabel.text = article.excerpt
 dateLabel.text = article.dateString
 // Load image asynchronously (omitted)
 }
}

Registrieren Sie diese benutzerdefinierte Zelle im View-Controller und implementieren Sie entsprechend.

Anpassen der Zelle für UICollectionView

Das gleiche Muster gilt für . Da Sammlungsansichten unterschiedliche Layouts haben können, können Sie eine “Karten-Zelle” entwerfen, die sowohl im vertikalen als auch im horizontalen Scroll-Modus funktioniert. Verwenden Sie , um die Ausrichtung zu vereinfachen. Hier ist eine kompakte Version:

class NewsCardCell: UICollectionViewCell {
 private let cardView = UIView()
 private let imageView = UIImageView()
 private let titleLabel = UILabel()

 override init(frame: CGRect) {
 super.init(frame: frame)
 cardView.backgroundColor = .systemBackground
 cardView.layer.cornerRadius = 10
 cardView.clipsToBounds = true
 cardView.translatesAutoresizingMaskIntoConstraints = false
 contentView.addSubview(cardView)

 imageView.contentMode = .scaleAspectFill
 imageView.clipsToBounds = true
 imageView.translatesAutoresizingMaskIntoConstraints = false
 titleLabel.font = UIFont.preferredFont(forTextStyle: .headline)
 titleLabel.numberOfLines = 2
 titleLabel.translatesAutoresizingMaskIntoConstraints = false

 cardView.addSubview(imageView)
 cardView.addSubview(titleLabel)

 // Layout
 NSLayoutConstraint.activate([
 cardView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 4),
 cardView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 4),
 cardView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -4),
 cardView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -4),

 imageView.topAnchor.constraint(equalTo: cardView.topAnchor),
 imageView.leadingAnchor.constraint(equalTo: cardView.leadingAnchor),
 imageView.trailingAnchor.constraint(equalTo: cardView.trailingAnchor),
 imageView.heightAnchor.constraint(equalToConstant: 120),

 titleLabel.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 8),
 titleLabel.leadingAnchor.constraint(equalTo: cardView.leadingAnchor, constant: 8),
 titleLabel.trailingAnchor.constraint(equalTo: cardView.trailingAnchor, constant: -8),
 titleLabel.bottomAnchor.constraint(lessThanOrEqualTo: cardView.bottomAnchor, constant: -8)
 ])
 }

 required init?(coder: NSCoder) { fatalError() }
}

Mit dieser Zelle kann die Sammlungsansicht einen Pinterest-Feed anzeigen, wenn Sie über den Delegierten unterschiedliche Artikelgrößen angeben.

Hinzufügen von Pull-to-Refresh- und Echtzeit-Updates

Moderne Newsfeeds müssen Aktualisierungsgesten und dynamisches Laden unterstützen. Die Klasse lässt sich nahtlos in und integrieren, wenn die Bildlaufansicht bereits mit einer Aktualisierungssteuerung verkabelt ist.

let refreshControl = UIRefreshControl()
refreshControl.addTarget(self, action: #selector(refreshNewsFeed), for: .valueChanged)
tableView.refreshControl = refreshControl
// or collectionView.refreshControl = refreshControl

Führen Sie in der -Methode asynchrone Datenabrufe aus (z. B. von einer REST-API), laden Sie dann die Ansicht in der Hauptwarteschlange neu und rufen Sie auf.

@objc private func refreshNewsFeed() {
 NewsAPIClient.fetchLatestArticles { [weak self] articles in
 DispatchQueue.main.async {
 self?.newsItems = articles
 self?.tableView.reloadData()
 self?.tableView.refreshControl?.endRefreshing()
 }
 }
}

Für Echtzeit-Updates wie Live-Nachrichten sollten Sie oder eine Bibliothek eines Drittanbieters wie Firebase Realtime Database verwenden.

// For UITableView
tableView.performBatchUpdates({
 tableView.insertRows(at: [IndexPath(row: 0, section: 0)], with: .top)
}, completion: nil)

// For UICollectionView
collectionView.performBatchUpdates({
 collectionView.insertItems(at: [IndexPath(item: 0, section: 0)])
}, completion: nil)

Umgang mit Benutzerinteraktionen und Navigation

Wenn ein Benutzer auf eine Nachricht tippt, sollte die App zu einer Detailansicht navigieren. Implementieren Sie die Delegatenmethode und verwenden Sie entweder einen Storyboard-Segue oder einen programmatischen Push. Für Tabellen und Sammlungen bietet die Delegatenmethode den Indexpfad. Beispiel für eine Ebene :

// In UITableViewDelegate
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
 tableView.deselectRow(at: indexPath, animated: true)
 let article = newsItems[indexPath.row]
 let detailVC = ArticleDetailViewController(article: article)
 navigationController?.pushViewController(detailVC, animated: true)
}

// In UICollectionViewDelegate
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
 let article = newsItems[indexPath.item]
 let detailVC = ArticleDetailViewController(article: article)
 navigationController?.pushViewController(detailVC, animated: true)
}

Erwägen Sie, lange Pressegesten für zusätzliche Aktionen (Share, Bookmark) über hinzuzufügen, die an die Sammlung oder Tabellenansicht angehängt sind, oder verwenden Sie Kontextmenüs, die in iOS 13 eingeführt wurden.

Leistungsüberlegungen für große Feeds

Sowohl als auch verwenden Zellen wieder, um den Speicher niedrig zu halten, aber Sie müssen trotzdem vermeiden, den Hauptfaden zu blockieren.

• Asynchrones Laden von Bildern: Laden Sie niemals Bilder aus dem Netzwerk in der Hauptwarteschlange. Verwenden Sie Bibliotheken wie Kingfisher oder SDWebImage, die das Caching, Prefetching und Löschen automatisch handhaben.
• Prefetching: Conform to or to start loading data for offscreen cells before they appear.
• Größen effizient berechnen: Für Zellen mit variabler Höhe verwenden Sie Auto Layout mit .
• Begrenzt das Rendern von unsichtbaren Zellen: Überschreiben in benutzerdefinierten Zellen, um Bild-Downloads abzubrechen und den Status zurückzusetzen.
• Verwenden Sie diffable Datenquellen (siehe nächster Abschnitt), um das Nachladen von Datenaufrufen zu reduzieren und animierte Updates mit minimalem Flimmern durchzuführen.

Moderne Ansätze: Compositional Layout und Diffable Data Source

iOS 13 und später führte zwei leistungsstarke APIs ein, die komplexe Newsfeeds dramatisch vereinfachen: und (was auch mit über funktioniert).

UICollectionViewCompositionalLayout

Dieses Layout ermöglicht es Ihnen, Abschnitte mit unterschiedlichen Verhaltensweisen zu definieren, z. B. einen Heldenbanner-Abschnitt, der horizontal scrollt, ein Raster mit aktuellen Nachrichten und eine vertikale Liste der neuesten Artikel. Jeder Abschnitt wird durch eine FLT: 66 definiert, die Gruppen und Elemente enthält. Beispielcode für einen Zwei-Abschnitt-Feed (horizontales Karussell + vertikale Liste):

let layout = UICollectionViewCompositionalLayout { (sectionIndex, environment) -> NSCollectionLayoutSection? in
 switch sectionIndex {
 case 0:
 // Horizontal carousel
 let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
 let item = NSCollectionLayoutItem(layoutSize: itemSize)
 let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.8), heightDimension: .absolute(200))
 let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
 let section = NSCollectionLayoutSection(group: group)
 section.orthogonalScrollingBehavior = .continuous
 section.interGroupSpacing = 10
 return section
 case 1:
 // Vertical grid (2 columns)
 let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5), heightDimension: .estimated(150))
 let item = NSCollectionLayoutItem(layoutSize: itemSize)
 let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(150))
 let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
 group.interItemSpacing = .fixed(8)
 let section = NSCollectionLayoutSection(group: group)
 section.interGroupSpacing = 8
 section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 8, bottom: 0, trailing: 8)
 return section
 default:
 return nil
 }
}

collectionView.collectionViewLayout = layout

Diffundierende Datenquelle

Statt manuellem und Indexpfadmanagement können Sie mit diffifen Datenquellen Snapshots anwenden. Dies beseitigt Inkonsistenzen und vereinfacht Animationen. Beispiel für :

enum Section {
 case featured
 case latest
}

struct Article: Hashable {
 let id: UUID
 let title: String
 // ...
}

var dataSource: UICollectionViewDiffableDataSource!

// In viewDidLoad:
dataSource = UICollectionViewDiffableDataSource(collectionView: collectionView) {
 (collectionView, indexPath, article) -> UICollectionViewCell? in
 let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! ArticleCell
 cell.configure(with: article)
 return cell
}

// When data arrives:
var snapshot = NSDiffableDataSourceSnapshot()
snapshot.appendSections([.featured, .latest])
snapshot.appendItems(featuredArticles, toSection: .featured)
snapshot.appendItems(latestArticles, toSection: .latest)
dataSource.apply(snapshot, animatingDifferences: true)

Veränderbare Datenquellen können auch mit über verwendet werden. Dieses Muster wird jetzt von Apple für alle neuen Projekte empfohlen, da es häufige Fehler eliminiert und die Verwaltung des Staates vereinfacht.

func fetchArticles() async throws -> [Article] {
 let url = URL(string: "https://api.example.com/news")!
 let (data, _) = try await URLSession.shared.data(from: url)
 return try JSONDecoder().decode([Article].self, from: data)
}