UICollectionView-수평 스크롤, 수평 레이아웃?

UICollectionView-수평 스크롤, 수평 레이아웃?

---

UIScrollView아이콘 그리드를 배치 하는 것이 있습니다. iOS Springboard의 레이아웃을 상상했다면 거의 수정에 가까울 것입니다. 가로 페이지 스크롤이 있습니다 (Springboard처럼). 그러나 레이아웃이 옳지 않은 것 같습니다. 항목을 위에서 아래로 배치하는 것처럼 보입니다. 결과적으로 표시 할 항목의 수로 인해 마지막 열에는 2 개의 행만 있습니다. Springboard에서 볼 수 있듯이 마지막 페이지의 마지막 행에 2 개의 항목이있는 것이 좋습니다.

이 작업은 UICollectionView및 관련 클래스로 어떻게 수행 할 수 있습니까? 사용자 지정을 작성해야 UICollectionViewFlowLayout합니까?

---

첫 번째 접근

UIPageViewController배열과 함께 사용 하는 것은 UICollectionViewControllers어떻습니까? 각에서 적절한 수의 항목을 가져와야 UICollectionViewController하지만 어렵지는 않습니다. Springboard와 똑같은 모습을 얻을 수 있습니다.

두 번째 접근

나는 이것에 대해 생각했고 내 의견으로는 설정해야합니다.

self.collectionView.pagingEnabled = YES;

서브 클래 싱하여 자신 만의 컬렉션 뷰 레이아웃을 만듭니다 UICollectionViewLayout. 사용자 정의 레이아웃 개체에서 액세스 할 수 self.collectionView있으므로 컬렉션보기의 frame, numberOfSections및 의 크기를 알 수 있습니다 numberOfItemsInSection:. 이 정보를 사용하여 셀 ' frames(에서 prepareLayout) 및 collectionViewContentSize. 다음은 사용자 지정 레이아웃 생성에 대한 몇 가지 기사입니다.

• https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/CreatingCustomLayouts/CreatingCustomLayouts.html
• http://www.objc.io/issue-3/collection-view-layouts.html

세 번째 접근

사용자 지정 레이아웃을 만들지 않고도이 작업을 수행 할 수 있습니다. UIScrollView빈보기에 추가 하고 페이징을 활성화합니다. 스크롤보기에서 컬렉션보기를 추가합니다. 그런 다음 너비 제약 조건을 추가하고 코드에서 얼마나 많은 항목을 가지고 있는지 확인 constant하고 올바른 값으로 설정 하십시오 (self.view.frame.size.width * numOfScreens). 모양은 다음과 같습니다 (셀의 숫자는를 나타냄 indexPath.row) : https://www.dropbox.com/s/ss4jdbvr511azxz/collection_view.mov 셀 순서가 만족스럽지 않다면 걱정이됩니다. 1 또는 2로 가야합니다.

---

UICollectionViewFlowLayout의 스크롤 방향을 수평으로 설정해 보셨습니까?

[yourFlowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

스프링 보드처럼 페이지를 표시하려면 다음과 같이 컬렉션 뷰에서 페이징을 활성화해야합니다.

[yourCollectionView setPagingEnabled:YES];

---

아래 스크린 샷과 같이 UICollectionView셀 / 항목 높이로 의 높이를 줄이고 " Horizontal"에서 " "를 선택해야 Scroll Direction합니다. 그런 다음 numberOfItems데이터 소스 구현에서 반환 한 항목에 따라 가로로 스크롤됩니다 .

---

UICollectionViewFlowLayout코드에서 정의하는 경우 인터페이스 빌더 구성을 재정의합니다. 따라서 다시 정의해야 scrollDirection합니다.

let layout = UICollectionViewFlowLayout()
...
layout.scrollDirection = .Horizontal
self.awesomeCollectionView.collectionViewLayout = layout

---

재미로, 또 다른 접근 방식은 페이징 및 수평 스크롤 세트를 그대로두고 배열 항목의 순서를 '위에서 아래로, 왼쪽에서 오른쪽으로'에서 시각적으로 '왼쪽에서 오른쪽으로, 위에서 위로 '로 변경하는 방법을 추가하는 것입니다. 하단 '을 클릭하고 빈 숨겨진 셀로 중간 셀을 채워 간격을 올바르게 만듭니다. 9 그리드에 7 개 항목이있는 경우 다음과 같이됩니다.

[1][4][7]
[2][5][ ]
[3][6][ ]

되어야한다

[1][2][3]
[4][5][6]
[7][ ][ ]

따라서 1 = 1, 2 = 4, 3 = 7 등이고 6 = 비어 있습니다. 행과 열의 총 수를 계산하여 재정렬 한 다음 각 셀의 행과 열 번호를 계산하고 열의 행을 변경하거나 그 반대로하면 새 인덱스를 얻을 수 있습니다. 셀에 이미지에 해당하는 값이 없으면 빈 셀을 반환하고 설정할 cell.hidden = YES;수 있습니다.

내가 만든 사운드 보드 앱에서 아주 잘 작동하므로 누군가가 작업 코드를 원한다면 추가하겠습니다. 이 트릭을 작동시키는 데 필요한 코드는 거의 없습니다.

최신 정보

이것이 최선의 해결책이라고 의심 스럽지만 요청에 따라 작동 코드는 다음과 같습니다.

- (void)viewDidLoad {
    // Fill an `NSArray` with items in normal order
    items = [NSMutableArray arrayWithObjects:
             [NSDictionary dictionaryWithObjectsAndKeys:@"Some label 1", @"label", @"Some value 1", @"value", nil],
             [NSDictionary dictionaryWithObjectsAndKeys:@"Some label 2", @"label", @"Some value 2", @"value", nil],
             [NSDictionary dictionaryWithObjectsAndKeys:@"Some label 3", @"label", @"Some value 3", @"value", nil],
             [NSDictionary dictionaryWithObjectsAndKeys:@"Some label 4", @"label", @"Some value 4", @"value", nil],
             [NSDictionary dictionaryWithObjectsAndKeys:@"Some label 5", @"label", @"Some value 5", @"value", nil],
              nil
              ];

    // Calculate number of rows and columns based on width and height of the `UICollectionView` and individual cells (you might have to add margins to the equation based on your setup!)
    CGFloat w = myCollectionView.frame.size.width;
    CGFloat h = myCollectionView.frame.size.height;
    rows = floor(h / cellHeight);
    columns = floor(w / cellWidth);
}

// Calculate number of sections
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return ceil((float)items.count / (float)(rows * columns));
}

// Every section has to have every cell filled, as we need to add empty cells as well to correct the spacing
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return rows*columns;
}

// And now the most important one
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier@"myIdentifier" forIndexPath:indexPath];

    // Convert rows and columns
    int row = indexPath.row % rows;
    int col = floor(indexPath.row / rows);
    // Calculate the new index in the `NSArray`
    int newIndex = ((int)indexPath.section * rows * columns) + col + row * columns;

    // If the newIndex is within the range of the items array we show the cell, if not we hide it
    if(newIndex < items.count) {
        NSDictionary *item = [items objectAtIndex:newIndex];
        cell.label.text = [item objectForKey:@"label"];
        cell.hidden = NO;
    } else {
        cell.hidden = YES;
    }

    return cell;
}

당신이 사용하려는 경우 didSelectItemAtIndexPath방법을 당신은에서 사용하는 것과 동일한 변환을 사용할 필요가 cellForItemAtIndexPath해당 아이템을 얻을 수 있습니다. 셀 여백이있는 경우 행 및 열 계산에 추가해야합니다.이 작업을 수행하려면 정확해야합니다.

---

이 코드는 Swift 3.1 및 Xcode 8.3.2 에서 잘 작동합니다.

override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        self.collectionView.collectionViewLayout = layout
        self.collectionView!.contentInset = UIEdgeInsets(top: -10, left: 0, bottom:0, right: 0)

        if let layout = self.collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
            layout.minimumInteritemSpacing = 0
            layout.minimumLineSpacing = 0
            layout.itemSize = CGSize(width: self.view.frame.size.width-40, height: self.collectionView.frame.size.height-10)
            layout.invalidateLayout()
        }

    }

---

Xcode 6.2에서 작업 중이며 가로 스크롤의 경우 속성 관리자에서 스크롤 방향을 변경했습니다.

collectionView-> attribute inspector-> scroll Direction-> change to horizontal을 클릭하십시오.

누군가에게 도움이되기를 바랍니다.

---

xcode 8의 경우 나는 이것을했고 작동했습니다.

---

UICollectionView를 사용하여 동일한 Springboard 동작을 수행 할 수 있으며이를 위해 사용자 정의 레이아웃을위한 코드를 작성해야합니다.

"SMCollectionViewFillLayout"을 사용 하여 사용자 정의 레이아웃 클래스 구현으로이를 달성했습니다.

코드 저장소 :

https://github.com/smindia1988/SMCollectionViewFillLayout

아래와 같이 출력 :

1.png

2_Code_H-Scroll_V-Fill.png

3_Output_H-Scroll_V-Fill.png

4_Code_H-Scroll_H-Fill.png

5_Output_H-Scroll_H-Fill.png

---

@Erik Hunter에서 수평으로 만들기위한 전체 코드를 게시합니다. UICollectionView

UICollectionViewFlowLayout *collectionViewFlowLayout = [[UICollectionViewFlowLayout alloc] init];
[collectionViewFlowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
self.myCollectionView.collectionViewLayout = collectionViewFlowLayout;

Swift에서

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .Horizontal
self.myCollectionView.collectionViewLayout = layout

Swift 3.0에서

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
self.myCollectionView.collectionViewLayout = layout

이 도움을 바랍니다

---

UICollectionView이를 달성하기 위해 사용자 정의 레이아웃을 작성할 수 있습니다 . 다음은 내 구현의 데모 이미지입니다.

다음은 코드 저장소입니다. KSTCollectionViewPageHorizontalLayout

@iPhoneDev (이것은 당신에게도 도움이 될 것입니다)

참조 URL : https://stackoverflow.com/questions/19301762/uicollectionview-horizontal-scroll-horizontal-layout