Modifying main page look better and efficient

Dark Mode

As I mentioned at article before, we built an main page for our app ‘Explog’. But we only built frames for the main page. So we tried to develop the main page more specifically. But from the beginning we met difficulties.

First, the xib file for the table-view cells was not inserted correctly. It was squashed compared to what I expected. This was solved by giving the height for each cell.

Next, the height of the table-view cells was not changing. It made

Attempted to dequeue multiple cells for the same index path, which is not allowed.

error. This was solved by searching. Lots of developers were having same issue in Xcode 9, iOS 11. This is known as iOS 11 bug. So as we changed to iOS 10 simulator it worked.

Finally, with the existing code as we made image and table-view instances in viewDidLayoutSubview(), when the layout changed instances kept creating. This was solved by seperating the code.

The code for creating instances was operated in viewDidLoad() and the code for setting layouts was operated in viewDidLayoutSubview().

    override func viewDidLoad()
    {
        super.viewDidLoad()
        
        topScrollView.delegate = self
        topScrollView.decelerationRate = UIScrollViewDecelerationRateFast
        
        bottomScrollView.delegate = self
        bottomScrollView.decelerationRate = UIScrollViewDecelerationRateFast
        
        makeContinentsSelection()
        makeContinentTableView()
    }
    
    override func viewDidLayoutSubviews()
    {
        super.viewDidLayoutSubviews()
        
        layoutContinentsSelection()
        layoutContinentTableView()
    }
    
    func makeContinentsSelection()
    {
        for num in 0..<6
        {
            let imageContinent = UIImageView()
            imageContinent.clipsToBounds = true
            topScrollView.addSubview(imageContinent)
            imageContinent.image = images[num]
            imageViews.append(imageContinent)
        }
    }
    
    func layoutContinentsSelection()
    {
        var contentWidth: CGFloat = self.topScrollView.frame.width / 2
        
        for num in 0..<6
        {
            let scrollViewWidth = self.topScrollView.frame.width
            contentWidth += scrollViewWidth / 2
            
            let newX = scrollViewWidth / 2 + (scrollViewWidth / 2 * CGFloat(num))
            imageViews[num].frame = CGRect(x: newX - 75, y: (self.topScrollView.frame.height / 2) - 75, width: 150, height: 150)
        }
        
        topScrollView.clipsToBounds = false
        topScrollView.contentSize = CGSize(width: contentWidth, height: self.view.frame.height * 0.3)
    }
    
    func makeContinentTableView()
    {
        for num in 0..<6
        {
            let tableView: UITableView = UITableView()
            tableView.bounces = false
            bottomScrollView.addSubview(tableView)
            tableViews.append(tableView)
            
            tableViews[num].delegate = self
            tableViews[num].dataSource = self
            tableView.separatorStyle = .none
//            tableViews[num].rowHeight = UITableViewAutomaticDimension
//            tableViews[num].estimatedRowHeight = 250
            tableViews[num].register(UINib.init(nibName: "CustomTableViewCell", bundle: nil), forCellReuseIdentifier: "cell")
        }
    }
    
    func layoutContinentTableView()
    {
        var contentWidth: CGFloat = 0
        
        for num in 0..<6
        {
            let scrollViewWidth = self.bottomScrollView.frame.width
            contentWidth += scrollViewWidth
            
            let newX: CGFloat = scrollViewWidth * CGFloat(num)
            tableViews[num].frame = CGRect(x: newX + 10, y: 0, width: self.bottomScrollView.frame.width - 20, height: self.bottomScrollView.frame.height)
        }
        
        bottomScrollView.contentSize = CGSize(width: contentWidth, height: self.bottomScrollView.frame.height)
    }

Solving all the problems, I made the visual of the main page better. As a result, the main page of our project looks like this now. It might be fixed again and again during the project.

Rest of our members worked hard for ‘post page’ and ‘my profile page’ while I was working on ‘main page’. They have done basic auto-layout and workflows without server-side datas. As it is not completed, I’ll show this part in the future article.

댓글

Please enter your comment!
Please enter your name here