17.4 C
London
Tuesday, September 3, 2024

ios – The way to make scroll in Swift, UIKit


enter image description here

I’ve requested a query associated of this and I used to be labored.
However I want make some perform, and Technique is…

  1. set views (The order is Title Label, Date Label, Picture Label(possibility), Article Label).
  2. anchors are observe above view like this: NSLayoutConstraint.activate([...topAnchor...(equalTo: aboveView.bottomAnchor, constrant: 20)
  3. scrollView and UIView(Container)’s height will be update after setting views height union.

Code is down Bellow. All Views are setting by code.

DetailViewController.Swift

import UIKit

class DetailViewController: UIViewController {
    
    private let titleLabel: UILabel = {
        let view = UILabel()
        view.numberOfLines = 2
        return view
    }()
    
    private let dateLabel: UILabel = {
        let view = UILabel()
        return view
    }()
    
    private let scroll: UIScrollView = {
        let scroll = UIScrollView()
        scroll.backgroundColor = .brown
        return scroll
    }()
    
    private let container: UIView = {
        let container = UIView()
        container.backgroundColor = .lightGray
        return container
    }()
    
    private let image: UIImageView = {
        let image = UIImageView()
        return image
    }()
    
    private let controller: UIPageControl = {
        let controller = UIPageControl()
        return controller
    }()
    
    private let content: UITextView = {
        let content = UITextView()
        return content
    }()
    
    var fileName: String!
    var id: String!
    var entryNumber: Int!
    var dataSize: Int!
    var entry: Entry!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // Get contents id and parse file name
        parsingFileName(id: id)
                
        addScrollView()
        scroll.contentSize = CGSize(width: self.view.frame.width, height: self.view.frame.height)
        
        addTopLabels()
        
        content.text = entry. Article
        
        // isImage is true or false
        addContent(isImage: entry.isImage)
        
        // For debugging
        content.backgroundColor = .yellow
        scroll.updateContentSize()
        content.contentSize = CGSize(width: self.scroll.frame.width, height: self.scroll.frame.height)
        
    }

}

Extension 1: Union Function

extension UIScrollView {
    func updateContentSize() {
        let unionTotal = recursiveUnion(view: self)
        
        self.contentSize = CGSize(width: self.frame.width, height: unionTotal.height + 50)
    }
    
    private func recursiveUnion(view: UIView) -> CGRect {
        var totalRect: CGRect = .zero
        
        for v in view.subviews {
            totalRect = totalRect.union(recursiveUnion(view: v))
        }
        print("Updated content Size: (totalRect.union(view.frame))")
        return totalRect.union(view.frame)
    }
}

Extension 2: Set views and constraints

extension DetailViewController {
    
    fileprivate func parsingFileName(id: String) {
        // parse ID and get filename
        // ref.: https://ssooyn.tistory.com/22
        let s = id.index(id.startIndex, offsetBy: 0)
        let e = id.index(id.startIndex, offsetBy: 7)
        let r = s...e
        
        fileName = "entry-" + String(id[r])
        let dataFromFile = DataLoader(fileName: fileName, fileType: ".json").entry
        
        // Discover the entry
        for i in 0 ..< dataFromFile.depend {
            if dataFromFile[i].id == id {
                entry = dataFromFile[i]
                break
            }
        }
    }
    
    fileprivate func addScrollView() {
        // Setting views - ScrollView and Container
        view.addSubview(scroll)
        scroll.translatesAutoresizingMaskIntoConstraints = false
        
        scroll.addSubview(container)
        container.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            scroll.topAnchor.constraint(equalTo: self.view.topAnchor),
            scroll.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
            scroll.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            scroll.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            
            container.topAnchor.constraint(equalTo: self.scroll.topAnchor),
            container.bottomAnchor.constraint(equalTo: self.scroll.bottomAnchor),
            container.leadingAnchor.constraint(equalTo: self.scroll.leadingAnchor),
            container.trailingAnchor.constraint(equalTo: self.scroll.trailingAnchor),
            
            container.widthAnchor.constraint(equalTo: self.scroll.widthAnchor, multiplier: 1),
            container.heightAnchor.constraint(equalTo: self.scroll.heightAnchor, multiplier: 1)
        ])
    }
 
    fileprivate func addTopLabels() {
        // Setting Views - High Labels

        titleLabel.textAlignment = .left
        titleLabel.textual content = entry.title
        titleLabel.font = UIFont(title: "Pretendard-SemiBold", dimension: 17)
        
        dateLabel.textAlignment = .proper
        dateLabel.textual content = String(entry.12 months) + "." + String(entry.month) + "." + String(entry.day)
        
        container.addSubview(titleLabel)
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        
        container.addSubview(dateLabel)
        dateLabel.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            titleLabel.topAnchor.constraint(equalTo: container.topAnchor),
            titleLabel.leadingAnchor.constraint(equalTo: container.leadingAnchor),
            titleLabel.trailingAnchor.constraint(equalTo: container.trailingAnchor),
            titleLabel.heightAnchor.constraint(equalToConstant: 20),
            titleLabel.widthAnchor.constraint(equalTo: container.widthAnchor),
            
            dateLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor),
            dateLabel.leadingAnchor.constraint(equalTo: container.leadingAnchor),
            dateLabel.trailingAnchor.constraint(equalTo: container.trailingAnchor),
            dateLabel.heightAnchor.constraint(equalToConstant: 20),
            dateLabel.widthAnchor.constraint(equalTo: container.widthAnchor),
        ])
    }
    
    fileprivate func addContent(isImage: Bool) {
        if isImage == false {
            print("No Picture")
            picture.backgroundColor = .darkGray
            picture.isHidden = true
            
            container.addSubview(content material)
            content material.translatesAutoresizingMaskIntoConstraints = false
            content material.sizeToFit()
            content material.isScrollEnabled = false
            
            NSLayoutConstraint.activate([
                content.topAnchor.constraint(equalTo: dateLabel.bottomAnchor, constant: 20),
                content.leadingAnchor.constraint(equalTo: container.leadingAnchor),
                content.trailingAnchor.constraint(equalTo: container.trailingAnchor),
//                content.bottomAnchor.constraint(equalTo: container.bottomAnchor),
                
                content.heightAnchor.constraint(equalTo: container.heightAnchor),
                content.widthAnchor.constraint(equalTo: container.widthAnchor),
            ])
        } else {
            print("There a picture")
            picture.backgroundColor = .crimson
            picture.picture = UIImage(named: "202310172204-1-1.jpeg")
            
            container.addSubview(picture)
            content material.translatesAutoresizingMaskIntoConstraints = false
            content material.sizeToFit()
            content material.isScrollEnabled = false
            
            container.addSubview(content material)
            picture.translatesAutoresizingMaskIntoConstraints = false
            
            print(content material.contentSize.peak)
            
            NSLayoutConstraint.activate([
                image.topAnchor.constraint(equalTo: dateLabel.bottomAnchor, constant: +20),
                image.leadingAnchor.constraint(equalTo: container.leadingAnchor),
                image.trailingAnchor.constraint(equalTo: container.trailingAnchor),
                image.heightAnchor.constraint(equalTo: container.widthAnchor),
                image.widthAnchor.constraint(equalTo: container.widthAnchor),
                
                content.topAnchor.constraint(equalTo: image.bottomAnchor, constant: +20),
                content.leadingAnchor.constraint(equalTo: container.leadingAnchor),
                content.trailingAnchor.constraint(equalTo: container.trailingAnchor),
//                content.bottomAnchor.constraint(equalTo: container.bottomAnchor),
                content.heightAnchor.constraint(equalTo: container.heightAnchor),
                content.widthAnchor.constraint(equalTo: container.widthAnchor),
            ])
        }
    }
}

Thanks for studying lengthy story and code. 🙂
Have a pleasant day!

Latest news
Related news

LEAVE A REPLY

Please enter your comment!
Please enter your name here