Список изображений, таких как Instagram

Question

Я хочу создать прокручиваемый список изображений, таких как instagram с 4 столбцами. Я создал коллекцию с изображениями http://prntscr.com/d15rnx. Но я получаю этот результат - http://prntscr.com/d15tsq код -

// 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.imageView.image = UIImage(named: "main/p\(self.items[indexPath.item].code)/main/main.jpg") 
    print("main_card_images/p\(self.items[indexPath.item].code)/main/main") 
    return cell 
} 

// MARK: - UICollectionViewDelegate protocol 

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { 
    // handle tap events 
    print("You selected cell #\(indexPath.item)!") 
    print(self.items[indexPath.item]) 
} 

override func prepare(for segue: UIStoryboardSegue, sender: Any?) { 
    let yourNextViewController = (segue.destination as! ViewControllerCard) 
    let indexPath = collectionView.indexPath(for: sender as! UICollectionViewCell) 
    yourNextViewController.mainCardImage = self.items[(indexPath?.item)!] 
} 

Answer 1

Убедитесь, что вы установили интервал между клеток до 0, а затем все, что вам нужно сделать, это реализовать:

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { 

     return(collectionView.bounds.size.width/4,collectionView.bounds.size.height/4) 
} 

Это будет изменять размеры всех ячеек в быть равно 1/4 ширины UICollectionView и, таким образом, создавать по 4 ячейки в каждой строке (1/4 значение высоты просто вызывает симметрию в этих типах интерфейса). Если, как представляется, меньшее количество ячеек, чем это, это потому, что интервал между позициями не был установлен в 0. Если вы хотите интервал между позициями, просто вычтите это значение из значения ширины, возвращаемого в вышеуказанной функции.

Альтернативно

Вы можете реализовать свой собственный пользовательский шаблон потока, но выше решение гораздо проще.

Answer 2

Я нашел, что проще всего настроить мой просмотр коллекции с помощью настройки в Interface Builder. Для представления коллекции с макетом потока здесь используются настройки, которые я использую для вложений. Я нашел размер размера элемента: 125,8 и высота: 125,8, чтобы дать мне лучший размер для отображения на большинстве устройств в портретном или ландшафтном дизайне.

Вот что мой взгляд коллекция выглядит.

Вы, конечно, можете установить это программно с помощью UICollectionViewDelegateFlowLayout или Rikh предлагает на подклассы CollectionViewFlowLayout