UICollectionView - изменение размеров ячеек на устройстве - Swift
Я создал UICollectionView, чтобы я мог упорядочить представления в аккуратные столбцы. Я бы хотел, чтобы на устройствах шириной 500 пикселей был один столбец.
Чтобы достичь этого, я создал эту функцию:
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let size = collectionView.frame.width
if (size > 500) {
return CGSize(width: (size/2) - 8, height: (size/2) - 8)
}
return CGSize(width: size, height: size)
}
Это работает как ожидается при первой загрузке, однако, когда я поворачиваю устройство, расчет не всегда повторяется, и представления не всегда перерисовываются, как ожидалось. Здесь мой код для поворота устройства:
override func willRotateToInterfaceOrientation(toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval) {
collectionView.collectionViewLayout.invalidateLayout()
self.view.setNeedsDisplay()
}
Я предполагаю, что забыл что-то перерисовать, но я не уверен, что. Любые идеи очень благодарны!
Ответы
Ответ 1
Вы можете использовать viewWillLayoutSubviews
. Этот вопрос должен быть полезен, но это басически вызывается всякий раз, когда представления диспетчера представлений планируют разместить свои подпрограммы.
Итак, ваш код будет выглядеть так:
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
guard let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else {
return
}
if UIInterfaceOrientationIsLandscape(UIApplication.sharedApplication().statusBarOrientation) {
//here you can do the logic for the cell size if phone is in landscape
} else {
//logic if not landscape
}
flowLayout.invalidateLayout()
}
Ответ 2
Пожалуй, самый прямой способ сделать это - сделать недействительнымиLayout во время viewWillTransitionToSize:
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
guard let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else {
return
}
flowLayout.invalidateLayout()
}
Ответ 3
Я имел тенденцию использовать viewWillTransitionToSize
с тем же и просто сделал вызов invalidateLayout()
там.
Ответ 4
Чтобы представление коллекции могло изменить размеры своих ячеек и анимировать изменение во время вращения, используйте координатор перехода:
(Свифт 4+)
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
// Have the collection view re-layout its cells.
coordinator.animate(
alongsideTransition: { _ in self.collectionView.collectionViewLayout.invalidateLayout() },
completion: { _ in }
)
}
Ответ 5
Вместо viewWillLayoutSubviews
можно использовать метод traitCollectionDidChange
:
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
guard let previousTraitCollection = previousTraitCollection, traitCollection.verticalSizeClass != previousTraitCollection.verticalSizeClass ||
traitCollection.horizontalSizeClass != previousTraitCollection.horizontalSizeClass else {
return
}
if traitCollection.horizontalSizeClass == .regular && traitCollection.verticalSizeClass == .regular {
// iPad portrait and landscape
// do something here...
}
if traitCollection.horizontalSizeClass == .compact && traitCollection.verticalSizeClass == .regular {
// iPhone portrait
// do something here...
}
if traitCollection.horizontalSizeClass == .regular && traitCollection.verticalSizeClass == .compact {
// iPhone landscape
// do something here...
}
collectionView?.collectionViewLayout.invalidateLayout()
collectionView?.reloadData()
}
Ответ 6
Я использовал следующий подход, который работал для меня. Проблема со мной заключалась в том, что я делал недействительным макет в
viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator)
Но на данный момент (как следует из названия этого метода) устройство еще не было повернуто. Таким образом, этот метод будет вызываться перед viewWillLayoutSubviews
и, следовательно, в этом методе у нас нет правильных границ и фреймов (Безопасная область), поскольку устройство будет вращаться впоследствии.
Поэтому я использовал уведомления
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
NotificationCenter.default.addObserver(self, selector: #selector(rotated), name: UIDevice.orientationDidChangeNotification, object: nil)
}
override func viewDidDisappear(_ animated: Bool) {
super.viewDidDisappear(animated)
NotificationCenter.default.removeObserver(self, name: UIDevice.orientationDidChangeNotification, object: nil)
}
@objc func rotated(){
guard let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else {
return
}
flowLayout.invalidateLayout()
}
и затем в методе делегата потока представления коллекции все работает как ожидалось.
extension ViewController: UICollectionViewDelegateFlowLayout{
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
if #available(iOS 11.0, *) {
return CGSize(width: view.safeAreaLayoutGuide.layoutFrame.width, height: 70)
} else {
return CGSize(width: view.frame.width, height: 70)
}
}
}
Ответ 7
У меня была задача настроить размер элементов в подклассе UICollectionView. Лучший способ для этого - setFrame. Свойство collectionViewFlowLayout Я перешел из ViewController (в моем случае это был выход из макета потока по умолчанию).
// .h
@property (nonatomic, weak) UICollectionViewFlowLayout *collectionViewFlowLayout;
// .m
- (void)setFrame:(CGRect)frame {
if (!CGSizeEqualToSize(frame.size, self.frame.size)) {
collectionViewFlowLayout.itemSize =
CGSizeMake((UIDeviceOrientationIsLandscape(UIDevice.currentDevice.orientation) ? (frame.size.width - 10) / 2 : frame.size.width), collectionViewFlowLayout.itemSize.height);
}
[super setFrame:frame];
}
Ответ 8
Вы можете создать маску контента и переместить его в collectionView. После того, как анимация ландшафта/портрета закончена, вы должны удалить ее как можно скорее.
Вот пример:
@property (strong, nonatomic) UIImageView *maskImage;
.........
- (UIImageView *) imageForCellAtIndex: (NSInteger) index {
UICollectionView *collectionView = self.pagerView.test;
FSPagerViewCell *cell = nil;
NSArray *indexPaths = [collectionView indexPathsForVisibleItems];
for (NSIndexPath *indexPath in indexPaths) {
if (indexPath.item == index) {
cell = (FSPagerViewCell *)[collectionView cellForItemAtIndexPath: indexPath];
break;
}
}
if (cell) {
return cell.imageView;
}
return nil;
}
- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
[super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
[coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context)
{
UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation];
[self test_didRotateFromInterfaceOrientation: orientation];
UIImageView *imageView = [self imageForCellAtIndex: self.pagerView.currentIndex];
if (imageView) {
UIImageView *imageView = [self imageForCellAtIndex: self.pagerView.currentIndex];
CGSize itemSize = self.pagerView.itemSize;
UIImageView *newImage = [[UIImageView alloc] initWithImage: imageView.image];
[newImage setFrame: CGRectMake((_contentView.bounds.size.width - itemSize.width)/2.0f, 0, itemSize.width, itemSize.height)];
newImage.contentMode = imageView.contentMode;
newImage.clipsToBounds = imageView.clipsToBounds;
newImage.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.pagerView addSubview: newImage];
self.maskImage = newImage;
}
[self.pagerView.test performBatchUpdates:^{
[self.pagerView.test setCollectionViewLayout:self.pagerView.test.collectionViewLayout animated:YES];
} completion:nil];
// do whatever
} completion:^(id<UIViewControllerTransitionCoordinatorContext> context)
{
[self.maskImage removeFromSuperview];
}];
}
Ответ 9
Это для других, возможно, с тем же особым случаем. Ситуация: я включил UICollectionView
в качестве UITableViewCell
в контроллер табличного представления. Высота строки была установлена на UITableViewAutomaticDimension
для адаптации к числу ячеек в представлении коллекции. Он не был правильно размещен при повороте устройства, хотя другие ячейки с динамическим содержимым в том же табличном представлении вели себя правильно. После долгих исследований я нашел решение, которое сработало:
- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
[self reloadTableViewSilently];
}
- (void) reloadTableViewSilently {
dispatch_async(dispatch_get_main_queue(), ^{
// optional: [UIView setAnimationsEnabled:false];
[self.tableView beginUpdates];
[self.tableView endUpdates];
// optional: [UIView setAnimationsEnabled:true];
});
}