Here is a Demo

Involving: this method of UICollectionView

• (UICollectionViewTransitionLayout)startInteractiveTransitionToCollectionViewLayout:(UICollectionViewLayout)layout

Also: UICollectionViewTransitionLayout class.

After modifying the size of the item, reload can be switched directly

Hello, I have a lot of questions: Which item size are you referring to? Is it the navigation bar size? Does the navigation bar item have the size attribute?

Both pages are made with UICollectionView. The first one looks like a table, but it can also be made with UIColectionView.
UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout
UICollectionView is implemented through the methods in these three protocols,

Define a Bool variable to switch effect 1 and effect 2. In the above three protocol methods, use
if Bool {...} else {...}
to give different shapes to UICollectionView
Click to navigate After the item in the column, the Bool variable changes, reload

PS: UI changes must be made in the main thread

Similar to the answer above, both styles use UICollectionView, prepare cells of two styles, and use the proxy method of UICollectionViewDelegateFlowLayout

• (CGSize)collectionView:(UICollectionView)collectionView layout:(UICollectionViewLayout)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
  {
  //self.isStyle1, used to determine which style it is,
  if (self.isStyle1)
  {

  //高度自己设置,这里设置为40 return CGSizeMake(collectionView.frame.size.width, 40);

  }
  else
  {

  //样式2 return CGSizeMake(collectionView.frame.size.width/2, 40);

  }
  }

//The same logic is not written in the agent that creates the cell
//Click on the item on the navigation, invert self.isStyle1, reloadData

Provide two different CollectionViewCell, modify the cell and reloadData after clicking it