2

I'm designing a screen of friends list that have animation like this:

enter image description here

I started with collectionview but I don't understand how to change position of cells.

I take two uicollectionviewcell one for image, name and second for all details like the list.

I also managed to change for collection to list but for animation i don't know how to do it.

Here it's my Code:

//MARK: - Collection view setUp -
extension CollViewAnimate {

    fileprivate func setUpCollView() {

        self.delegate = self
        self.dataSource = self

        self.register(UINib(nibName: "NameCollCell", bundle: nil), forCellWithReuseIdentifier: "NameCollCell")
        self.register(UINib(nibName: "DetailCollCell", bundle: nil), forCellWithReuseIdentifier: "DetailCollCell")
    }

    func reloadTblData() {

        self.isList = !self.isList
        self.reloadData()
    }
}

//MARK: - Collection view Deleagtes & DataSources -
extension CollViewAnimate: UICollectionViewDelegate, UICollectionViewDataSource {

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.arrFriendList.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {


        if self.isList {

            if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DetailCollCell", for: indexPath) as? DetailCollCell {

                cell.setUserDetails(self.arrFriendList[indexPath.row])

                return cell
            }

        } else {

            if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "NameCollCell", for: indexPath) as? NameCollCell {

                cell.setUserDetails(self.arrFriendList[indexPath.row])

                return cell
            }
        }

        return UICollectionViewCell(frame: .zero)
    }
}

//MARK: - Collection view FlowLayout Deleagtes -
extension CollViewAnimate: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        if self.isList {
            return CGSize(width: (collectionView.frame.width), height: (collectionView.frame.width / 5))
        }

        return CGSize(width: (collectionView.frame.width / 3), height: (collectionView.frame.width / 2.5))
    }
}

Here I used separate collection view file, my all code for collectionview is returned here, and .xib file for collectionviewcell.

please guide me to achieve this task, also give your suggestion for a suitable controller.

Thank you

NøBi Mac
  • 505
  • 5
  • 15
  • 1
    it seems you are using this https://github.com/Yalantis/DisplaySwitcher repo for your requirement right? – NickCoder Feb 04 '20 at 06:46
  • Sorry sir, but i'm not using this repo, i would like to achieve this by my own with regular `collectionview`. with out using any dependency. – NøBi Mac Feb 04 '20 at 06:51
  • 1
    you have to make first of two flow layout class and after on click grid change // Only update item size here self.updateFlowLayout() self.collectionView.performBatchUpdates({ self.collectionView.setCollectionViewLayout(self.gridFlowLayout, animated: true) }, completion: { (finished) in }) you can try this. – Drashti Javiya Feb 04 '20 at 06:59
  • @DrashtiJaviya will you give any perfect example for creating flow layout? – NøBi Mac Feb 04 '20 at 10:09

0 Answers0