Nasıl kullanılacağını öğrenmeye çalışıyorum UICollectionView. Dokümantasyon biraz sert anlamak ve öğreticiler Objective C veya uzun komplike projelerde ya vardı bulduğu etmektir.
Nasıl kullanılacağını öğrenirken UITableView, ❤ Swift'in iOS 8 ile basit bir tablo görünümü nasıl yapılır ve Swift , beni harekete geçirmek için çok temel bir kurulum ve açıklamaya sahipti. Bunun için böyle bir şey var mı UICollectionView?
Aşağıdaki cevap, bunu yapmayı öğrenme girişimimdir.
Yanıtlar:
Bu proje Xcode 10 ve Swift 4.2 ile test edilmiştir.
Sadece bir Tek Görünüm Uygulaması olabilir.
Yeni bir Cocoa Touch Sınıf dosyası oluşturun (Dosya> Yeni> Dosya ...> iOS> Cocoa Touch Sınıfı). Ad verin MyCollectionViewCell. Bu sınıf, film şeridinde hücrenize eklediğiniz görünümlerin çıkışlarını tutar.
import UIKit
class MyCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var myLabel: UILabel!
}Bu prizi daha sonra bağlayacağız.
ViewController.swift dosyasını açın ve aşağıdaki içeriğe sahip olduğunuzdan emin olun:
import UIKit
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard
var items = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"]
// MARK: - UICollectionViewDataSource protocol
// tell the collection view how many cells to make
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.items.count
}
// make a cell for each cell index path
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
// get a reference to our storyboard cell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MyCollectionViewCell
// Use the outlet in our custom class to get a reference to the UILabel in the cell
cell.myLabel.text = self.items[indexPath.item]
cell.backgroundColor = UIColor.cyan // make cell more visible in our example project
return cell
}
// MARK: - UICollectionViewDelegate protocol
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
// handle tap events
print("You selected cell #\(indexPath.item)!")
}
}notlar
UICollectionViewDataSourceve UICollectionViewDelegatekoleksiyon görünümünün izlediği protokollerdir. UICollectionViewFlowLayoutGörünümlerin boyutunu programlı olarak değiştirmek için protokolü de ekleyebilirsiniz , ancak gerekli değildir.Koleksiyon Görünümünü film şeridinizdeki Görünüm Denetleyicisine sürükleyin. İsterseniz üst görünümün doldurulması için kısıtlamalar ekleyebilirsiniz.
Özellik Denetçisi'ndeki varsayılan ayarlarınızın da
Koleksiyon Görünümünün sol üst kısmındaki küçük kutu Koleksiyon Görünüm Hücresi'dir. Bunu prototip hücremiz olarak kullanacağız. Bir Etiketi hücreye sürükleyin ve ortalayın. İsterseniz Etiketi ortalamak için hücre kenarlıklarını yeniden boyutlandırabilir ve kısıtlamalar ekleyebilirsiniz.
Koleksiyon görünümü hücresi için öznitelik denetçisinin tanımlayıcı kutusuna "hücre" (tırnak işaretleri olmadan) yazın. Bunun let reuseIdentifier = "cell"ViewController.swift ile aynı değer olduğunu unutmayın .
Ve hücrenin Kimlik Denetçisinde, sınıf adını MyCollectionViewCell, yaptığımız özel sınıfa ayarlayın.
myLabeliçinde MyCollectionViewCellsınıfında. ( Kontrol tuşuna basıp sürükleyebilirsiniz .)delegateve dataSourceGörünüm Denetleyicisini bağlayın. (Belge Ana Hatları'nda Koleksiyon Görünümü'nü sağ tıklatın. Ardından artı oku tıklatıp Görünüm Denetleyicisine sürükleyin.)
Etiketi hücre içinde ortalamak ve Koleksiyon Görünümü'nü üst duvarlara sabitlemek için kısıtlamalar ekledikten sonra şöyle görünür.
Yukarıdaki örnek işe yarıyor ama oldukça çirkin. İşte oynayabileceğiniz birkaç şey:
Arka plan rengi
Arayüz Oluşturucu'da, Koleksiyon Görünümü> Özellik Denetçisi> Görünüm> Arka Plan'a gidin .
Hücre aralığı
Hücreler arasındaki minimum boşluğun daha küçük bir değere değiştirilmesi daha iyi görünmesini sağlar. Arayüz Oluşturucu'da, Koleksiyon Görünümü> Boyut Denetçisi> Minimum Aralık'a gidin ve değerleri daha küçük yapın. "Hücreler için" yatay mesafedir ve "Çizgiler için" dikey mesafedir.
Hücre şekli
Yuvarlatılmış köşeler, kenarlık ve benzerleri istiyorsanız, hücre ile oynayabilirsiniz layer. İşte bazı örnek kod. cell.backgroundColor = UIColor.cyanYukarıdaki kodda doğrudan koydunuz .
cell.layer.borderColor = UIColor.black.cgColor
cell.layer.borderWidth = 1
cell.layer.cornerRadius = 8Katmanla yapabileceğiniz diğer şeyler için bu cevaba bakınız (örneğin gölge).
Dokunulduğunda rengi değiştirme
Hücreler musluklara görsel olarak tepki verdiğinde daha iyi bir kullanıcı deneyimi sağlar. Bunu başarmanın bir yolu, hücreye dokunulurken arka plan rengini değiştirmektir. Bunu yapmak için, ViewControllersınıfınıza aşağıdaki iki yöntemi ekleyin :
// change background color when user touches cell
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath)
cell?.backgroundColor = UIColor.red
}
// change background color back when user releases touch
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath)
cell?.backgroundColor = UIColor.cyan
}İşte güncellenmiş görünüm:
@IBOutletfor myLabelin koduna kontrol sürükleyerek prizi takmadıysanız , böyle bir çökme elde edersiniz.
self.collectionView.registerClass(MyCollectionViewCell.self, forCellWithReuseIdentifier: "Cell"). Sorun hala devam ederse , film şeridinde ve film şeridinde reuseIdentifieraynı olup olmadığını kontrol edindequeueReusableCellWithReuseIdentifier
UICollectionView Temsilcileri ve Veri Kaynakları
//MARK: UICollectionViewDataSource
override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return 1 //return number of sections in collection view
}
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10 //return number of rows in section
}
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("collectionCell", forIndexPath: indexPath)
configureCell(cell, forItemAtIndexPath: indexPath)
return cell //return your cell
}
func configureCell(cell: UICollectionViewCell, forItemAtIndexPath: NSIndexPath) {
cell.backgroundColor = UIColor.blackColor()
//Customise your cell
}
override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
let view = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "collectionCell", forIndexPath: indexPath) as UICollectionReusableView
return view
}
//MARK: UICollectionViewDelegate
override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
// When user selects the cell
}
override func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
// When user deselects the cell
}İçin swift 4.2-
//MARK: UICollectionViewDataSource
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return 1 //return number of sections in collection view
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10 //return number of rows in section
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionCell", for: indexPath as IndexPath)
configureCell(cell: cell, forItemAtIndexPath: indexPath)
return cell //return your cell
}
func configureCell(cell: UICollectionViewCell, forItemAtIndexPath: NSIndexPath) {
cell.backgroundColor = UIColor.black
//Customise your cell
}
func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
let view = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "collectionCell", for: indexPath as IndexPath) as UICollectionReusableView
return view
}
//MARK: UICollectionViewDelegate
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
// When user selects the cell
}
func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
// When user deselects the cell
}UICollectionView uygulaması oldukça ilginç. Basit kaynak kodunu kullanabilir ve bu bağlantıları kullanarak bir video eğitimi izleyebilirsiniz:
https://github.com/Ady901/Demo02CollectionView.git
https://www.youtube.com/watch?v=5SrgvZF67Yw
extension ViewController : UICollectionViewDataSource {
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 2
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return nameArr.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DummyCollectionCell", for: indexPath) as! DummyCollectionCell
cell.titleLabel.text = nameArr[indexPath.row]
cell.userImageView.backgroundColor = .blue
return cell
}
}
extension ViewController : UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let alert = UIAlertController(title: "Hi", message: "\(nameArr[indexPath.row])", preferredStyle: .alert)
let action = UIAlertAction(title: "OK", style: .default, handler: nil)
alert.addAction(action)
self.present(alert, animated: true, completion: nil)
}
}UICollectionView, UITableView ile aynıdır, ancak bize UITableView'da biraz sorunlu olan bir ızgara görünümü oluşturmanın ek işlevlerini verir. Çok uzun bir yazı olacak Her şeyi basit adımlarla alacağınız bir bağlantıdan bahsediyorum .