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)
Добавьте другие элементы пользовательского интерфейса внутри контейнера.