Làm cách nào để căn giữa các ô của UICollectionView theo chiều ngang và chiều dọc?

Question

Làm cách nào để đặt dọc theo chiều dọc và chiều ngang tất cả các ô trong một số UICollectionView bằng cách sử dụng UICollectionViewFlowLayout?

Bố cục luồng để khoảng cách ở bên phải hoặc dưới tùy thuộc vào hướng cuộn. Tôi muốn thiết lập cùng một padding trên tất cả các bên. Tôi đã chơi đùa với tài sản sectionInset của UICollectionViewFlowLayout.

Answer 1

Mục đã sử dụng?

Ok, cố gắng chơi với minimumLineSpacing bất động sản và tài sản minimumInteritemSpacing

minimumLineSpacing

Đối với một mạng lưới di chuyển theo chiều dọc, khoảng cách giữa các dòng này đại diện cho khoảng cách tối thiểu giữa các hàng liên tiếp. Đối với lưới cuộn theo chiều ngang, giá trị này thể hiện khoảng cách tối thiểu giữa các cột liên tiếp. Khoảng cách này không được áp dụng cho khoảng trống giữa tiêu đề và dòng đầu tiên hoặc giữa dòng cuối cùng và chân trang.

minimumInteritemSpacing

Đối với một mạng lưới di chuyển theo chiều dọc, khoảng cách này đại diện cho khoảng cách tối thiểu giữa các mục trong cùng hàng. Đối với lưới cuộn theo chiều ngang, giá trị này thể hiện khoảng cách tối thiểu giữa các mục trong cùng một cột. Khoảng cách này được sử dụng để tính toán số lượng mục có thể phù hợp trong một dòng, nhưng sau khi số lượng mục được xác định, khoảng cách thực tế có thể được điều chỉnh trở lên.

Answer 2

Tôi khuyên bạn nên triển khai giao thức UICollectionViewDelegateFlowLayout để tự động đạt được trung tâm ngang và dọc của các ô. Từ UICollectionViewDelegateFlowLayout chiếu giao thức:

Giao thức UICollectionViewDelegateFlowLayout chứa các phương thức cho phép bạn phối hợp với một đối tượng UICollectionViewFlowLayout để thực hiện một cách bố trí lưới dựa trên. Các phương thức của giao thức này xác định kích thước của các mục và khoảng cách giữa các mục trong lưới.

Tất cả các phương pháp trong giao thức này là tùy chọn. Nếu bạn không thực hiện một phương thức cụ thể, ủy nhiệm bố cục luồng sử dụng các giá trị trong các thuộc tính riêng của nó cho thông tin khoảng cách thích hợp.

Đối tượng bố cục luồng dự kiến ​​đối tượng ủy quyền của chế độ xem để áp dụng giao thức này. Do đó, hãy triển khai giao thức này trên đối tượng được chỉ định cho thuộc tính ủy quyền của chế độ xem của bộ sưu tập của bạn.

Bạn có lẽ sẽ được quan tâm nhiều nhất trong collectionView:layout:insetForSectionAtIndex: phương pháp có thể được sử dụng để điều chỉnh các hình chữ nhật trên tất cả bốn mặt của màn hình sử dụng giống như UIEdgeInsetsMake. Bạn có thể xác định các insets theo kích thước màn hình bằng cách trừ đi số tiền thích hợp, như kích thước của các ô, từ kích thước màn hình tương ứng (theo chiều dọc hoặc chiều ngang). Sau đó, chia cho hai để có được insets bằng nhau cho một chiều cụ thể.

Answer 3

Subclass UICollectionViewFlowLayout và ghi đè lên các phương pháp layoutAttributesForElementsInRect: để gắn kết của bạn UICollectionViewCells:

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect { 

NSArray* array = [super layoutAttributesForElementsInRect:rect]; 
CGRect visibleRect; 
visibleRect.origin = self.collectionView.contentOffset; 
visibleRect.size = self.collectionView.bounds.size; 

for(UICollectionViewLayoutAttributes* attributes in array) { 

    if(CGRectIntersectsRect(attributes.frame, rect)){ 

     CGFloat d = UIInterfaceOrientationIsPortrait(_orientation)? 
     CGRectGetMidY(visibleRect)-attributes.center.y : 
     CGRectGetMidX(visibleRect)-attributes.center.x; 

     CGFloat w = visibleRect.size.width; 
     CGFloat h = visibleRect.size.height; 

     CGFloat dRatio = UIInterfaceOrientationIsPortrait(_orientation)? d/(h/2) : d/(w/2); 

     CGFloat angle = MAX_ANGLE*dRatio; // an angle between 0 and MAX_ANGLE based on proximity to center 
     CGFloat radians = DEGREES_TO_RADIANS(angle); 

     debug = 0; 

     CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity; 
     rotationAndPerspectiveTransform.m34 = PERSPECTIVE; 

     rotationAndPerspectiveTransform = UIInterfaceOrientationIsPortrait(_orientation)? 
     CATransform3DRotate(rotationAndPerspectiveTransform, radians, 1.0f, 0.0f, 0.0f) : 
     CATransform3DRotate(rotationAndPerspectiveTransform, radians, 0.0f, 1.0f, 0.0f); 

     attributes.transform3D = rotationAndPerspectiveTransform; 
    } 
} 

return array; 
} 

Tôi đã không thay đổi nội dung mã này cho bạn và có tham chiếu đến các macro và các biến Ví dụ, do đó bạn sẽ cần phải tinh chỉnh nó để làm những gì bạn muốn. Điều này đã được sử dụng để tạo bố cục kiểu bìa nhưng các nguyên tắc sẽ giống nhau cho bạn nhưng không có doanh nghiệp 3D. Bạn cần đặt phần inset để đảm bảo một hàng hoặc cột trong luồng của bạn.