ugrid

KO | EN

gitlite — search

#nodejs #android #golang #javascript #python #docker #java #hacktoberfest #linux #cpp #angular #angularjs

★ 23 Open GitHub ↗

Custom grid view based on UICollectionView and Swift

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## Example

To run the example project, clone the repo, and run `pod install` from the Example directory first.

## Features
UGrid offers three different sizes for cells. Toggle between them and let UGridFlowLayout to hanlde the rest. All empty spaces will be used. UGridView is willing to be like Windows Phone home page grid view :)

## Implementation
Just assign instance of `UGridFlowLayout` to your collection view's `collectionViewLayout` property and you're good to go:

```swift
import UIKit
import ugrid

class ViewController: UIViewController {
 
   private var _layout = UGridFlowLayout()
   private var _layoutType: LayoutType = .less
 
   override func viewDidLoad() {
      super.viewDidLoad()

collectionView.collectionViewLayout = _layout
   }
}
```

#### Toggle between Layout Types
There is two Layout Types: `less` or `more`

With `less` type in one row there will be:
* 4 small grid items
* 2 middle grid items
* 1 big grid item and there won't be any space for any other grid item

With `more` type in one row there will be:
* 6 small grid items
* 3 middle grid items
* 1 big grid item, but there will be a space for 4 small grid items or 1 middle item in the smae row

Layout Types could be toggled by calling `setType(_:)` and passing spacific `Layout Type`:

```swift
...
   override func viewDidLoad() {
      ...
      
      _layoutType.toggle()
      
      _layout.setType(_layoutType)
      
      ...
   }
...
```

#### Toggle between sizes
Just call `toggleSize(forIndexPath:)` On `UGridFlowLayout` instance. Layout will automaticall toggle between small, middle and big sizes:

```swift
...
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        _layout.toggleSize(forIndexPath: indexPath)
    }
...
```

If there isn't any size info in the store for the item yet by default `small` size will be used. You can change default size by calling `setDefaultGridSize(_ size: SizeType)` on `UGridFlowLayout` instance:

```swift
...
   override func viewDidLoad() {
      ...
      
      _layout.setDefaultGridSize(.middle)
      
      ...
   }
...
```

After this every new added item will have `middle` size instead of default `small`.

#### Store changes
For simplicity `UserDefaults` is used to save size for each cell index path. If you still want to handle storing yourself You want to check [Change behaviour section](#change-behaviour)

If you want to clear all saved item sizes call `resetItemsSizes()` on `UGridFlowLayout` instance:

```swift
...
   override func viewDidLoad() {
      ...
      
      _layout.resetItemsSizes()
      
      ...
   }
...
```

#### Change behaviour
UGrid is still in development. It do it's best to bring the fastest calculation time for reordering cells, simplest implementation and usability. Though if you have a better calculation idea (which is most likely) you can create your own calculation class by simply adopting to `IGridCalculation` protocol and use `setCalculationLogic(_:)` on `UGridFlowLayout` instance to change calculation logic.
Also if you like to store sizes on your own, you can adopt to `IGridSizeRepository` protocol and set new storing mechanism by calling `setSizeRepository(_:)` on on `UGridFlowLayout` instance.

To change grid items count in one row, simply create a class that comforms to `IGridItemsInRow` and set it to `UGridFlowLayout` instance. For exmaple, to have 3 items in one row for `less` mode instead of default 4, create a new class called `CustomSizeCountInrow`:

```swift
class CustomSizeCountInrow: IGridItemsInRow {
    func itemsInRow(forSizeType size: SizeType, andLayoutType layout: LayoutType) -> CGFloat {

switch layout {
        case .less:
            switch size {
            case .small:
                return 3
            case .middle:
                return 1.5
            case .big:
                return 1
            }
        case .more:
            switch size {
            case .small:
                return 6
            case .middle:
                return 3
            case .big:
                return 1
            }
        }
    }
}
```

and set it:

```swift
...
   override func viewDidLoad() {
      ...
            
      _layout.setGridItemsInRow(CustomSizeCountInrow())
      
      ...
   }
...
```

## What is planned to be done
* Section support. Currently only one section is supported
* Drag and Drop support

## Requirements
* XCode 11+
* iOS 11+

## Installation

ugrid is available through [CocoaPods](https://cocoapods.org). To install
it, simply add the following line to your Podfile:

```ruby
pod 'ugrid'
```

## Author

Bug Creator

## License

ugrid is available under the MIT license. See the LICENSE file for more info.

ugrid

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README