UICollectionView овальная форменная пользовательская ячейка

Как создать ячейки овальной формы в UICollectionView с использованием пользовательской ячейки. Ниже изображение, которое я пытаюсь достичь.

введите описание изображения здесь

Не знаю, как это сделать, пройти через несколько ссылок, но не получилось. Пожалуйста, направляйте. Благодаря

Обновление: то, что я пробовал,

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


    return CGSize(width: collectionView.frame.size.width/3.0 - 8, height: collectionView.frame.size.width/2.5[![enter image description here][2]][2] )
}

Для этого дизайна, но он не работает по мере необходимости, он становится введите описание изображения здесь

Ответ 1

TL; DR: (Пример можно найти здесь: https://github.com/JakubMazur/SO39160339)


Увидим 3 проблемы с этим видом:

  • Self size UICollectionView ячейки, которые принимают текст как длину ячейки
  • Выровнять коллекцииВыбрать ячейки в центр не влево-вправо
  • Округлые углы в subview

Итак, давайте начнем:

1)

Это немного сложно и не так просто. Первое, что вы должны сделать, это позволить авто-макет сделать трюк для вас. Поэтому создайте ячейку и collectionView в своем раскадровке и файле xib, а затем в классе контроллера:

if let flowLayout = self.collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
    flowLayout.estimatedItemSize = CGSizeMake(1, 1)
}

Правильный способ сделать это, например, viewDidLoad func. Конечно, если вы переопределите макет, вспомните об этом if.

Затем для метки, которую вы хотите сделать самостоятельно, вам нужно установить:

cell.titleLabel.preferredMaxLayoutWidth = 50

Значение, которое вы используете в этих двух примерах, не имеет большого значения. Если вы установили параметр minimumItemSize low, вы в основном просите размер самостоятельно.

2)

Для этого вам нужно переопределить класс макета. Я настоятельно рекомендую использовать это решение fooobar.com/questions/73608/... из ответа @Alex Koshy.

3)

Эта часть проста. Просто добавьте subview в нижней части пользовательской ячейки и установите цвет фона сотового ящика прозрачным. И добавьте радиус угла в ячейке следующим образом:

override func prepareForReuse() {
    self.roundedView.layer.cornerRadius = self.frame.size.height/2

}

Вот эффект вывода: введите описание изображения здесь

И вот ссылка на репозиторий в этом примере:

https://github.com/JakubMazur/SO39160339

Наслаждайтесь!

Ответ 2

добавьте изображение/кнопку (по вашему выбору) в ячейку просмотра коллекции с размером кадра, как целая ячейка, сделайте фоновый элемент ячейки добавьте цвет, который вы хотите к кнопке, и установите layer.cornerradius вашей кнопки точно так, как овал u want (ex 1/2 высоты кнопки - это точный круг).

Ответ 3

если u пытается сделать ячейку в UIcollectionview, углы вокруг

то u может попробовать это

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell:CellCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("MyCell", forIndexPath: indexPath)as! CellCollectionViewCell
    cell.backgroundColor=UIColor.blueColor()
    cell.layer.cornerRadius=26 //try with different values untill u get the rounded corners
    cell.layer.masksToBounds=true
    cell.cellLabel.text=label[indexPath.row]



    return cell
}

Ответ 4

Получить объект ячейки

добавить subview (представление контейнера) в contentView

Установить радиус границы контейнера (например, 2)

Добавьте другие элементы пользовательского интерфейса внутри контейнера.