CODEWITHSUNDEEP
iosswiftuitableviewuiscrollviewuikit
Marcelo
Marcelo

Reputation: 21

How can i build the user profile page in instagram with swift?

i want to build the user profile page in instagram app for iOS, i used tableView with nested collectionView and it is not working correctly for me, is there any recommendation or certain approaches to consider, i am only interested in The Profile Header(profile Image and Bio) and the photos grid with horizontal scrolling section.

instagram user profile image

currently i achieved this behaviour (ignore horizontal scrolling for section):

tableView and collectionView is not scrolling togther like a single content or signle page they scrolls separately, if collectionView scrollingisEnabled = false and tableViewCell height is something large it works fine, but the collectionView will load the entire cells at once

enter image description here

storyboard view hierarchy :

enter image description here

source code:

class ViewController: UITableViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {


override func viewDidLoad() {
    super.viewDidLoad()
    tableView.register(SectionHeader.self, forHeaderFooterViewReuseIdentifier: "h")
}

override func numberOfSections(in tableView: UITableView) -> Int {
    return 1
}

override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return tableView.frame.size.height - tableView.tableHeaderView!.frame.height
}

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 60
}

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let x = tableView.dequeueReusableHeaderFooterView(withIdentifier: "h") as! SectionHeader
    x.contentView.backgroundColor = .green
    x.addSections(sectionNames: [ "A", "B", "C", "D" ])
    x.segment.addTarget(self, action: #selector(handleSegmentSectionChange(segmentControl:)), for: .valueChanged)
    return x
}

@objc
func handleSegmentSectionChange(segmentControl: UISegmentedControl) {
    print("load section")
}


func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 100
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "c", for: indexPath)
    let label = cell.viewWithTag(10) as! UILabel
    label.text = "\(indexPath)"
    print("getting cell at \(indexPath)")
    cell.backgroundColor = .orange
    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: collectionView.frame.width , height: 80)
}

}

thanks.

Upvotes: 2

Views: 1678

Answers (1)

Julian
Julian

Reputation: 98

I think I know what you're asking so I'll take a stab at it.

Like you said, you can use a tableView with a nested collectionView for the photos. For the profile image. I would say that's just a UIImage and the boi is probably a UITextView. That would be my guess.

Upvotes: 1

Related Questions