現在UICollectionView、ユーザー インターフェイス グリッドに使用していますが、正常に動作します。ただし、横スクロールを有効にしたいと思います。グリッドはページごとに 8 つのアイテムをサポートし、アイテムの総数がたとえば 4 の場合、水平スクロール方向を有効にしてアイテムを配置する方法は次のとおりです。
0 0 x x
0 0 x x
ここで 0 -> コレクション項目と x -> 空のセル
それらを中央揃えにする方法はありますか:
x 0 0 x
x 0 0 x
コンテンツがよりきれいに見えるようにするには？
また、以下の配置も私が期待している解決策かもしれません。
0 0 0 0
x x x x
ここでの上位のソリューションはそのままでは機能しませんでした。そのため、フロー レイアウトとセクションが 1 つだけの水平スクロール コレクション ビューで機能するはずのこれを思いつきました。
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
// Add inset to the collection view if there are not enough cells to fill the width.
CGFloat cellSpacing = ((UICollectionViewFlowLayout *) collectionViewLayout).minimumLineSpacing;
CGFloat cellWidth = ((UICollectionViewFlowLayout *) collectionViewLayout).itemSize.width;
NSInteger cellCount = [collectionView numberOfItemsInSection:section];
CGFloat inset = (collectionView.bounds.size.width - (cellCount * cellWidth) - ((cellCount - 1)*cellSpacing)) * 0.5;
inset = MAX(inset, 0.0);
return UIEdgeInsetsMake(0.0, inset, 0.0, 0.0);
}
他の回答と同様に、これは静的なサイズのセルで機能する動的な回答です。私が行った 1 つの変更は、パディングを両側に配置したことです。そうしないと、問題が発生しました。
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
NSInteger numberOfItems = [collectionView numberOfItemsInSection:section];
CGFloat combinedItemWidth = (numberOfItems * collectionViewLayout.itemSize.width) + ((numberOfItems - 1) * collectionViewLayout.minimumInteritemSpacing);
CGFloat padding = (collectionView.frame.size.width - combinedItemWidth) / 2;
return UIEdgeInsetsMake(0, padding, 0, padding);
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
let numberOfItems = CGFloat(collectionView.numberOfItems(inSection: section))
let combinedItemWidth = (numberOfItems * flowLayout.itemSize.width) + ((numberOfItems - 1) * flowLayout.minimumInteritemSpacing)
let padding = (collectionView.frame.width - combinedItemWidth) / 2
return UIEdgeInsets(top: 0, left: padding, bottom: 0, right: padding)
}
また、問題が解決しない場合は、 と の値が相互に関連しているように見えるため、 と の両方を同じ値に設定してminimumInteritemSpacingくださいminimumLineSpacing。
UICollectionViewFlowLayout *flowLayout = (UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout;
flowLayout.minimumInteritemSpacing = 20.0;
flowLayout.minimumLineSpacing = 20.0;
これをコレクション ビュー デリゲートに入れます。他の回答よりも基本的なフローレイアウト設定を考慮しているため、より一般的です。
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
NSInteger cellCount = [collectionView.dataSource collectionView:collectionView numberOfItemsInSection:section];
if( cellCount >0 )
{
CGFloat cellWidth = ((UICollectionViewFlowLayout*)collectionViewLayout).itemSize.width+((UICollectionViewFlowLayout*)collectionViewLayout).minimumInteritemSpacing;
CGFloat totalCellWidth = cellWidth*cellCount + spacing*(cellCount-1);
CGFloat contentWidth = collectionView.frame.size.width-collectionView.contentInset.left-collectionView.contentInset.right;
if( totalCellWidth<contentWidth )
{
CGFloat padding = (contentWidth - totalCellWidth) / 2.0;
return UIEdgeInsetsMake(0, padding, 0, padding);
}
}
return UIEdgeInsetsZero;
}
迅速なバージョン (g0ld2k に感謝):
extension CommunityConnectViewController: UICollectionViewDelegateFlowLayout {
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
// Translated from Objective-C version at: http://stackoverflow.com/a/27656363/309736
let cellCount = CGFloat(viewModel.getNumOfItemsInSection(0))
if cellCount > 0 {
let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
let cellWidth = flowLayout.itemSize.width + flowLayout.minimumInteritemSpacing
let totalCellWidth = cellWidth*cellCount + spacing*(cellCount-1)
let contentWidth = collectionView.frame.size.width - collectionView.contentInset.left - collectionView.contentInset.right
if (totalCellWidth < contentWidth) {
let padding = (contentWidth - totalCellWidth) / 2.0
return UIEdgeInsetsMake(0, padding, 0, padding)
}
}
return UIEdgeInsetsZero
}
}
左右にパディングが必要な静的サイズのコレクションビューセルの私のソリューション-
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
insetForSectionAtIndex section: Int) -> UIEdgeInsets {
let flowLayout = (collectionViewLayout as! UICollectionViewFlowLayout)
let cellSpacing = flowLayout.minimumInteritemSpacing
let cellWidth = flowLayout.itemSize.width
let cellCount = CGFloat(collectionView.numberOfItemsInSection(section))
let collectionViewWidth = collectionView.bounds.size.width
let totalCellWidth = cellCount * cellWidth
let totalCellSpacing = cellSpacing * (cellCount - 1)
let totalCellsWidth = totalCellWidth + totalCellSpacing
let edgeInsets = (collectionViewWidth - totalCellsWidth) / 2.0
return edgeInsets > 0 ? UIEdgeInsetsMake(0, edgeInsets, 0, edgeInsets) : UIEdgeInsetsMake(0, cellSpacing, 0, cellSpacing)
}
UICollectionViewアプリに&を使用するタグ バーがあり、UICollectionViewFlowLayout1 行のセルが中央揃えになっています。
正しいインデントを取得するには、すべてのセルの合計幅 (間隔を含む) を の幅から引き、UICollectionView2 で割ります。
[........Collection View.........]
[..Cell..][..Cell..]
[____indent___] / 2
=
[_____][..Cell..][..Cell..][_____]
問題はこの機能です -
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
前に呼び出されます...
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
...そのため、セルを反復処理して合計幅を決定することはできません。
代わりに、各セルの幅を再度計算する必要があります。私の場合[NSString sizeWithFont: ... ]、セルの幅は UILabel 自体によって決定されるため、使用します。
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
CGFloat rightEdge = 0;
CGFloat interItemSpacing = [(UICollectionViewFlowLayout*)collectionViewLayout minimumInteritemSpacing];
for(NSString * tag in _tags)
rightEdge += [tag sizeWithFont:[UIFont systemFontOfSize:14]].width+interItemSpacing;
// To center the inter spacing too
rightEdge -= interSpacing/2;
// Calculate the inset
CGFloat inset = collectionView.frame.size.width-rightEdge;
// Only center align if the inset is greater than 0
// That means that the total width of the cells is less than the width of the collection view and need to be aligned to the center.
// Otherwise let them align left with no indent.
if(inset > 0)
return UIEdgeInsetsMake(0, inset/2, 0, 0);
else
return UIEdgeInsetsMake(0, 0, 0, 0);
}
Swift 2.0 は問題なく動作します。
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
let edgeInsets = (screenWight - (CGFloat(elements.count) * 50) - (CGFloat(elements.count) * 10)) / 2
return UIEdgeInsetsMake(0, edgeInsets, 0, 0);
}
どこで: screenWight : 基本的に私のコレクションの幅 (全画面幅) - 私は定数を作りました :セルの配列 50 - 手動のセル幅 10 - セル間の距離
Swift では、以下は、各セルの側面に正しい量のパディングを適用することにより、セルを均等に分散します。もちろん、最初にセル幅を知る/設定する必要があります。
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
insetForSectionAtIndex section: Int) -> UIEdgeInsets {
var cellWidth : CGFloat = 110;
var numberOfCells = floor(self.view.frame.size.width / cellWidth);
var edgeInsets = (self.view.frame.size.width - (numberOfCells * cellWidth)) / (numberOfCells + 1);
return UIEdgeInsetsMake(0, edgeInsets, 60.0, edgeInsets);
}
Swift 3.0を使用したkgaidisのObjective Cの回答の作業バージョン:
let flow = UICollectionViewFlowLayout()
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let numberOfItems = collectionView.numberOfItems(inSection: 0)
let combinedItemWidth:CGFloat = (CGFloat(numberOfItems) * flow.itemSize.width) + ((CGFloat(numberOfItems) - 1) * flow.minimumInteritemSpacing)
let padding = (collectionView.frame.size.width - combinedItemWidth) / 2
return UIEdgeInsetsMake(0, padding, 0, padding)
}
これを行う別の方法は、次collectionView.center.xのように を設定することです。
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
if let
collectionView = collectionView,
layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout
{
collectionView.center.x = view.center.x + layout.sectionInset.right / 2.0
}
}
この場合、私にとっては適切なインセットのみを尊重します。