2017-09-28 57 views
0

我有一個集合視圖與不同的單元格。一個單元格是帶有元素的水平線段scrollViewscrollview與「App Store」-App或其他功能非常相似。水平ScrollView中的collectionView鬆散功能

在第一個init中,它的工作方式和預期的一樣,但是當我向下滾動我的collectionView到最後,然後回滾到我的水平scrollView時,contentSize似乎是錯誤的。所以當scrollView單元重新啓動時,scrollView就像禁用。

奇怪的是,當我設置一個固定的contentSize寬度它的工作原理一直如預期。

//calucalte width 
var scrollViewWidth:CGFloat = 0 
scrollViewWidth = CGFloat(allSkills.count)*scrollViewHeight 

cell.skillsScrollView.alwaysBounceVertical = false 
cell.skillsScrollView.alwaysBounceHorizontal = false 
cell.skillsScrollView.frame = CGRect(x: 0, y: 0, width: scrollViewWidth, height: scrollViewHeight) 

for (i,imagelink) in imagelinks.enumerated() { 
let imageView:UIImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: scrollViewHeight, height: scrollViewHeight)) //image is square height and width of scrollView 

//set images in 
if i == 0 { 
    imageView.frame = CGRect(x: 0, y: 0, width: scrollViewHeight, height: scrollViewHeight) 
} else { 
    imageView.frame = CGRect(x: CGFloat(i)*scrollViewHeight, y: 0, width: scrollViewHeight, height: scrollViewHeight) 
} 

//set image in ImageValue 
//[...] 

cell.skillsScrollView.addSubview(imageView) 
} 

cell.skillsScrollView.contentSize = CGSize(width: scrollViewWidth, height: scrollViewHeight) // fixed width = 1000 works like expected but it's too width 
return cell 

我的細胞真的沒有興趣。

class MySkills: UICollectionViewCell { 

@IBOutlet weak var titleLabel: UILabel! 

@IBOutlet weak var contentSkillsUIView: UIView! 
@IBOutlet weak var skillsScrollView: UIScrollView! 
} 

所以我真的很困惑這種行爲。我試圖設置在awakeFromNib的寬度。我在單元格外設置寬度。我啓動我的collectionView viewWillAppear並將其寬度設置爲viewDidLoad。在prepareForReuse我也設置contentSize爲0。一切都沒有改變。

當我打印scrollViewWidth時,它始終具有預期值。

所以我很感激你的想法。

+0

您可以分享演示項目嗎? –

+0

你在storyBoard中設置了這個collectionView嗎?如果你有,那麼我可以幫助你,否則我真的不知道如何以編程方式做的東西**建議**嘗試添加一個NSConstraint(你必須在其他地方做更多的研究)的寬度編程 –

回答

0

使集合觀點正確還有很長的需要

步驟名單我將努力使這一儘可能明確如此忍受我就可以了

選擇指南導向

所以假設你想要基於某些變量讓所有單元格不同並且數組中的某些存儲數據讓我們開始工作,因爲我們已經有相當一部分了。

第1步。

打開你的故事板,並在視圖控制器你想添加這個的CollectionView創建一個新的.swift文件這些東西添加到它

import Foundation 
import UIKit 

class YourViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource { 

} 

(假設您是熟悉創建類和和在故事板捆紮這些類ViewControllers)

步驟2.

導航轉移到身份檢查卡舌O n個右手屬性檢查器選項卡,您的viewController設置爲我們只是在你想找到並拖動到的CollectionView您所選擇的viewController(確保底部創建

步驟3

現在下降的類其收集視圖而不是收集視圖控制器

步驟4。

在這裏你可以設置你的細胞的大小和每個單元等(以上在屬性檢查器)

步驟5

一旦你有你想要的一切你想要的間距某些約束添加到該新創建的CollectionView

在容器水平-add一個中心

-add一個尾隨/領先的C onstraints到的的viewController

邊緣在容器垂直 - 添加中心

步驟6

現在

了的CollectionView是你需要做一些編碼的東西

保持設置控制並從collectionView(不是collectionViewCell) 拖動到viewController(在左側或在viewController的三個符號所在的頂部)添加委託和數據源,彈出選項(這些都是重要的,如果你不這樣做它不會工作

步驟7

開拓助理編輯和保持控制,並從的CollectionView單擊並拖動您的viewController類文件使它成爲@IBOutlet並將其命名爲任何你想要的,你應該有這樣的事情

class YourViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource { 

    @IBOutlet weak var YourCollectionView: UICollectionView! 


} 

步驟8

現在我TS時間真正棘手的東西,你要創建一個新的文件,並選擇可可觸摸類image 1

確保您有它的類型UICollectionViewCell的一個子類,並單擊還創建XIB文件複選框您可以將其命名爲image 2

第9步。

現在這就是失控的方式時間爲一些用於設置頭所需的其他事情交給yourViewController類文件和該位添加到它

override func viewDidLoad() { 
    super.viewDidLoad() 

    //or whatever you named the @IBOutlet earlier 
    YourCollectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CollectionViewCell") 
    // Do any additional setup after loading the view. 
} 

現在如果你建立並運行現在的應用程序將多數民衆贊成崩潰因爲我們之前創建的CollectionViewCell沒有被賦予重用標識符

將此頭部固定到您剛剛創建的CollectionViewCell XIB並在右側進行(請確保在執行此操作之前選擇了CollectionViewCell或您不會看到任何東西)image 3

在上面添加任何你想要重用標識符名稱,但要確保其相關負責人回didmove(toview:__)方法在你的viewController文件在這條線在這裏

YourCollectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CollectionViewCell") 

確保forCellWithReuseIdentifier串相同的重用標識符你只需輸入你的XIB細胞

步驟10

現在

你可以定製你的細胞在廈門國際銀行文件(你可以改變大小和一切DD圖像和您添加到細胞是開拓爲CollectionViewCell XIB和@IBOutlet的助理編輯每個標籤/圖像後標籤等)給他們,你可以輕鬆地引用後

步驟11

相關名稱

後腦勺到您的viewController文件,並在這樣

struct cellData { 
    //here you need to create a *let instance* for every image/label you have in your CollectionViewCell XIB 

    //this is neccesary for determining how to seperate the cells 
    let cell : Int! 
    //labels will not be declared as a UILabel but as a String like this 
    let label : String! 
    //images will be declared like this 
    let Image : UIImage! 

} 

class YourViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource { 

步驟12

現在我們已完成了安裝我們現在必須移動到的定製部分的頂部創建一個struct代碼

創建類內的空數組

class YourViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource { 


    @IBOutlet weak var YourCollectionView: UICollectionView! 

    /* array here */ 
    var array = [] 

    override func viewDidLoad() { 
    super.viewDidLoad() 

    YourCollectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CollectionViewCell") 
    // Do any additional setup after loading the view. 
    } 

} 

的數據填充數組中你的結構是這樣

var array = [cellData(cell : 1,label : "",image : UIImage(named: ""))] 

確定,所以讓我們來看看這個在這裏,我們將宣佈所有不同的標籤和圖像的結構(應該有一個標籤,或者你放在你CollectionViewCell XIB每個標籤或圖像的圖像)的功能

現在是時候所述的CollectionView

步驟13,兩者均。

這整個過程中,你可能已經得到一個錯誤,但我們要解決它

添加這三個函數到您的viewController功能

func numberOfSections(in collectionView: UICollectionView) -> Int { 
    return 1 
} 
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
    return array.count 
} 
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 

} 

-numberOfSections意味着細胞的許多不同的部分怎麼辦你想

-numberOfItemsInSection意味着多少個單體電池,你在你的部分要

步驟14

的CollectionView是決定要添加它

if array[indexPath.row].cell == 1 { 
     //make sure this is the reuse identifier that you have set in your CollectionViewCell XIB 
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell 

     cell.image.image = array[indexPath.row].image 
     cell.label.text = array[indexPath.row].label 

     return cell 
    } else { 
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell 

     return cell 
    } 

步驟15

這裏面的代碼顯示在每個單元什麼,那是,如果你想添加更多的細胞funtion不同的數據只是把更多的進入你的陣列

var array = [cellData(cell : 1,label : "",image : UIImage(named: "")), 
      cellData(cell : 2,label : "",image : UIImage(named: "")), 
      cellData(cell : 3,label : "",image : UIImage(named: ""))] 

並確保它被裝在你的CollectionView功能

if array[indexPath.row].cell == 1 { 
     //make sure this is the reuse identifier that you have set in your CollectionViewCell XIB 
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell 

     cell.image.image = array[indexPath.row].image 
     cell.label.text = array[indexPath.row].label 

     return cell 
    } 
    if array[indexPath.row].cell == 2 { 
     //make sure this is the reuse identifier that you have set in your CollectionViewCell XIB 
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell 

     cell.image.image = array[indexPath.row].image 
     cell.label.text = array[indexPath.row].label 

     return cell 
    } 
    if array[indexPath.row].cell == 3 { 
     //make sure this is the reuse identifier that you have set in your CollectionViewCell XIB 
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell 

     cell.image.image = array[indexPath.row].image 
     cell.label.text = array[indexPath.row].label 

     return cell 
    } else { 
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell 

     return cell 
    } 

確保您的數組中你細胞詮釋設置爲增加整數值或細胞不會加載還可以自定義在每個單元只是填補空白的陣列中的數據

var array = [cellData(cell : 1,label : "Blank here",image : UIImage(named: "Blank here"))] 

如果您有任何問題,請發表評論