Dynamic CollectionView-Layout & Dynamic Sizing Collection-Views
iOS-UI for handling tokens, seed, etc…
in this tutorial we are going to see how to implement dynamic self sized collection views and UI for handling seed verification functionality.
Here I used two collection view components, the top one for rendering the user selected tokens, and the bottom one for rendering the full seed which is shuffled. User can select the token in an order, so the selected ones will be added to the top collection view component. User can deselect the selected token from top collection view component, so it will be deleted from the top one and will be enabled from the bottom one to select again.
So let’s start coding👨💻…
- First define a custom collection view class
in the above Custom Collection View class, we are returning the contentSize of the collection-view as its intrinsicContentSize, and in layoutSubViews we are invalidating its intrinsicContentSize, so the collection view takes the required height dynamically. I also used an extra property called isDynamicSizeRequired, to invalidate the intrinsicContentSize for top collection view, as user deleting the tokens, it should shrink back, stay the same as its previous size. When tokens added to it, it will increase its height accordingly.
2. Define a custom FlowLayout
Define a Custom FlowLayout class, by overriding the method layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]?
- Here, first we catch the attributes by calling super.layoutAttributesForElements(in: rect).
- define a new array for storing the modified attributes, and to return.
- define leftMargin, to be used for the cell’s frame origin calculations.
- looping through all the super-attributes, check the attributes frame. if it is equal to left section inset, assign the same section inset value as its frame’s minX.
else if the attributes frame not equal to left section inset, calculate the previous attributes frame maxX, and along with section inset plus min spacing, to define the current attributes frame accordingly.
3. Define Token Model and Token CollectionView Cells
in the above classes, we just define the labels and UI, and a model object. You can go through the code, so you will get easily.
4. Use all the above in View-Controller
- Define two separate arrays to store the tokens, so they can be used as data sources for two collection views.
- While defining the collection views, use the previously defined custom class and custom layout objects. After assigning the data sources to the collection views, we call reloadData and layoutIfNeeded on collection views to adjust their size accordingly.
- with the help of Token, we are handling the didSelectItemAtIndexPath method, for the both collection views.
- All the sub views are placed on top of the scrollview, so the UI functionality works with any device size.