Плислоподобное приложение с использованием UICollectionView

Question

Я пытаюсь создать приложение, похожее на приложение на основе плитки (стиль бит-стиля), и я новичок в UICollectionView.

Это то, что я пытаюсь достичь:

Идея заключается в том, что сегодня, я знаю, что у меня есть 6 значков для отображения в каждой из этих ячеек. Но завтра может быть 8, 10 и т. Д.

Итак, вместо статической раскадровки на основе 6-изображений, я бы хотел, чтобы у меня был вид коллекции.

Однако я не мог найти, как ограничить мои ячейки относительно представления контейнера. Xcode позволяет указать только фиксированный размер точки. Кроме того, даже если я играю с минимальным расстоянием между ячейками, я наблюдаю пробела для значения 0.

Что я сделал до сих пор:

• создан UICollectionViewController в раскадровке
• создал небольшой стандартный пользовательский класс для обработки моих ячеек (в основном выход для изображения внутри и метка)
• Я дал свойствам «элемент» и «макет» значениям соответственно «1» и «поток» в инспекторе атрибутов UICollectionView Attributes (У меня есть идентификатор многократного использования)

Может кто-нибудь помочь в этом?

Answer 1

Вы можете сделать что-то вроде этого,

let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout() 
    layout.sectionInset = UIEdgeInsets(top: 20, left: 0, bottom: 10, right: 0) 
    layout.itemSize = CGSize(width: screenWidth/3, height: screenWidth/3) 
    layout.minimumInteritemSpacing = 0 
    layout.minimumLineSpacing = 0 

Использование UICollectionViewFlowLayout для достижения этой цели.

Для получения более подробной информации вы можете обратиться к this link. :)

Update (в соответствии с комментариями):

вы должны переопределить источник данных о CollectionView.

numberOfItemsInSection должен возвращать 2 и umberOfSectionsInCollectionView должен вернуть 3

надеюсь, что это поможет :)

Answer 2

Вот программный ответ на ваш вопрос:

Создать класс путем расширения UICollectionViewFlowLayout.

В файле реализации нашего класса, добавьте следующие методы:

- (instancetype)init 
{ 
    self = [super init]; 
    if (self) { 
     //overriding default values 
     self.scrollDirection = UICollectionViewScrollDirectionVertical; 
     self.minimumInteritemSpacing = 0; 
     self.minimumLineSpacing = 0; 
    } 
    return self; 
} 

// Метод, чтобы организовать ур клетки правильно

- (NSArray *) layoutAttributesForElementsInRect:(CGRect)rect { 
//Returns an array of UICollectionViewLayoutAttributes objects representing the layout information for the cells and views. 
NSArray *attribArray = [super layoutAttributesForElementsInRect:rect]; 

for(int i = 1; i < [attribArray count]; ++i) { 
    UICollectionViewLayoutAttributes *currentLayoutAttributes = attribArray[i]; 
    UICollectionViewLayoutAttributes *prevLayoutAttributes = attribArray[i - 1]; 
    //No separation between the cells 
    NSInteger maximumSpacing = 0; 
    NSInteger origin = CGRectGetMaxX(prevLayoutAttributes.frame); 

    if((origin + maximumSpacing + currentLayoutAttributes.frame.size.width) < self.collectionViewContentSize.width) { 
     CGRect frame = currentLayoutAttributes.frame; 
     frame.origin.x = origin + maximumSpacing; 
     currentLayoutAttributes.frame = frame; 
    } 
} 
return attribArray; 
} 

// Если просмотреть коллекцию связанных изменений, он будет пересчитывать все его расположения атрибутов

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds 
{ 
    return YES; 
} 

Установите этот пользовательский класс как макет потока на ваш взгляд сбора,

YourFLowLayoutCustomClass *flowlayout=[[YourFLowLayoutCustomClass alloc] init]; 

_collectionView = [[UICollectionView Alloc] initWithFrame: рамка collectionViewLayout: FlowLayout];

Теперь в классе, где вы реализовали UICollectionView, реализовать следующий метод, если вы еще не сделали это:

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath 
{ 
    return CGSizeMake(self.view.frame.size.width/2, self.view.frame.size.height/3); 
} 

Это позволит установить размер ячеек в соответствии с изобр вы поделились. Ура!