Поля интервала UICollectionView



у меня есть UICollectionView которая показывает фотографии. Я создал collectionview с помощью UICollectionViewFlowLayout. Он работает хорошо, но я хотел бы иметь интервал на полях. Можно ли это сделать с помощью UICollectionViewFlowLayout или я должен реализовать свой собственный UICollectionViewLayout?

739   13  

13 ответов:

можно использовать collectionView:layout:insetForSectionAtIndex: методом UICollectionView и выберите sectionInset свойства UICollectionViewFlowLayout объект прикреплен к вашему UICollectionView:

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(top, left, bottom, right);
}

или

UICollectionViewFlowLayout *aFlowLayout = [[UICollectionViewFlowLayout alloc] init];
[aFlowLayout setSectionInset:UIEdgeInsetsMake(top, left, bottom, right)];

настройка вставок в Interface Builder, как показано на скриншоте ниже

Setting section insets for UICollectionView

приведет к чему-то вроде этого:

A collection view cell with section insets

чтобы добавить интервал на весьUICollectionView:

UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*) collection.collectionViewLayout;
flow.sectionInset = UIEdgeInsetsMake(topMargin, left, bottom, right);

чтобы играть с интервалом между элементы одной строки (столбец, если вы прокручиваете по горизонтали) и их размеры:

flow.itemSize = ...;
flow.minimumInteritemSpacing = ...;

просто чтобы исправить некоторые неправильные сведения на этой странице:

1- minimumInteritemSpacing:минимальное расстояние между элементами в одной строке.

значение по умолчанию: 10.0.

(для сетки с вертикальной прокруткой это значение представляет минимальное расстояние между элементами в одной строке.)

2- minimumLineSpacing:минимальное расстояние между строками элементов в поле сетка.

Ref: http://developer.apple.com/library/ios/#documentation/uikit/reference/UICollectionViewFlowLayout_class/Reference/Reference.html

Swift 4

    let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout // If you create collectionView programmatically then just create this flow by UICollectionViewFlowLayout() and init a collectionView by this flow.

    let itemSpacing: CGFloat = 3
    let itemsInOneLine: CGFloat = 3
    flow.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
    let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1) //collectionView.frame.width is the same as  UIScreen.main.bounds.size.width here.
    flow.itemSize = CGSize(width: floor(width/itemsInOneLine), height: width/itemsInOneLine)
    flow.minimumInteritemSpacing = 3
    flow.minimumLineSpacing = 3

enter image description here

использовать setMinimumLineSpacing: и setMinimumInteritemSpacing: на UICollectionViewFlowLayout-объект.

поставить пробел между CollectionItems используйте этот

напишите эти две строки в viewdidload

UICollectionViewFlowLayout *collectionViewLayout = (UICollectionViewFlowLayout*)self.collectionView.collectionViewLayout;
collectionViewLayout.sectionInset = UIEdgeInsetsMake(<CGFloat top>, <CGFloat left>, <CGFloat bottom>, <CGFloat right>)

Swift 4.0, Xcode 9

хотя эта тема уже содержит кучу полезных ответов, я хочу добавить Swift 4.0 версия, основанная на ответе Уильяма Ху.

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

// Create flow layout
let flow = UICollectionViewFlowLayout()

// Define layout constants
let itemSpacing: CGFloat = 1
let minimumCellWidth: CGFloat = 120
let collectionViewWidth = collectionView!.bounds.size.width

// Calculate other required constants
let itemsInOneLine = CGFloat(Int((collectionViewWidth - CGFloat(Int(collectionViewWidth / minimumCellWidth) - 1) * itemSpacing) / minimumCellWidth))
let width = collectionViewWidth - itemSpacing * (itemsInOneLine - 1)
let cellWidth = floor(width / itemsInOneLine)
let realItemSpacing = itemSpacing + (width / itemsInOneLine - cellWidth) * itemsInOneLine / (itemsInOneLine - 1)

// Apply values
flow.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
flow.itemSize = CGSize(width: cellWidth, height: cellWidth)
flow.minimumInteritemSpacing = realItemSpacing
flow.minimumLineSpacing = realItemSpacing

// Apply flow layout
collectionView?.setCollectionViewLayout(flow, animated: false)

используя collectionViewFlowLayout.sectionInset или collectionView:layout:insetForSectionAtIndex: являются правильными.

однако, если ваш collectionView имеет несколько разделов, и вы хотите добавить поле ко всему collectionView, я рекомендую использовать scrollView contentInset:

UIEdgeInsets collectionViewInsets = UIEdgeInsetsMake(50.0, 0.0, 30.0, 0.0);
self.collectionView.contentInset = collectionViewInsets;
self.collectionView.scrollIndicatorInsets = UIEdgeInsetsMake(collectionViewInsets.top, 0, collectionViewInsets.bottom, 0);

для добавления полей в указанные ячейки можно использовать этот пользовательский макет потока. https://github.com/voyages-sncf-technologies/VSCollectionViewCellInsetFlowLayout/

extension ViewController : VSCollectionViewDelegateCellInsetFlowLayout 
{
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForItemAt indexPath: IndexPath) -> UIEdgeInsets {
        if indexPath.item == 0 {
            return UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
        }
        return UIEdgeInsets.zero
    }
}

В Объективе-C

CGFloat spacing = 5;
UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*)_habbitCollectionV.collectionViewLayout;
flow.sectionInset = UIEdgeInsetsMake(0, spacing, 0, spacing);
CGFloat itemsPerRow = 2;
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat oneMore = itemsPerRow + 1;
CGFloat width = screenRect.size.width - spacing * oneMore;
CGFloat height = width / itemsPerRow;

flow.itemSize = CGSizeMake(floor(height), height);
flow.minimumInteritemSpacing = spacing;
flow.minimumLineSpacing = spacing;

все, что вам нужно сделать, это изменить значение itemsPerRow, и он будет обновлять количество элементов в строке соответственно. Кроме того, вы можете изменить значение интервала, если вы хотите более или менее общий интервал.

enter image description here enter image description here

чтобы добавить 10px разделение между каждым разделом просто напишите это

flowLayout.sectionInset = UIEdgeInsetsMake(0.0, 0.0,10,0);
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {       
         return UIEdgeInsetsMake(7, 10, 5, 10);    
   }

Comments

    Ничего не найдено.