UIScrollView com View Code / PT-BR

Quando iniciei com desenvolvimento iOS quebrei bastante a cabeça para entender como fazer a UISrollView funcionar. Neste blog vou mostrar como faço o uso da UISrollView via View Code.

Para começar crie um componente UIScrollView e adicione a sua View Controller e configure as constraints

lazy var scrollView: UIScrollView = {
    let element = UIScrollView()
    element.translatesAutoresizingMaskIntoConstraints = false
    element.backgroundColor = .yellow
    return element
}()

override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(scrollView)

    NSLayoutConstraint.activate([
        scrollView.topAnchor.constraint(equalTo: view.topAnchor),
        scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
    ])
}

Até aqui, se executar a sua scrollView vai aparecer na tela.

Comece o processo de adicionar elementos na scrollView. Crie uma view qualquer

lazy var anyView: UIView = {
    let element = UIView()
    element.translatesAutoresizingMaskIntoConstraints = false
    element.backgroundColor = .red
    return element
}()

Na função viewDidLoad, adicione a anyView na scrollView e configure as devidas constraints

scrollView.addSubview(anyView)
NSLayoutConstraint.activate([
    anyView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 100),
    anyView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
    anyView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
    anyView.heightAnchor.constraint(equalToConstant: 100),
    anyView.widthAnchor.constraint(equalToConstant: 300),
    anyView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -40)
])

Sua anyView deve ficar amostra na tela agora. Porém note que eu tive que configurar as constraints heightAnchor e widhtAnchor para que seja exibida na tela. Experimente comentar uma dessas constraints e verá que a anyView não será exibida.

Isso acontece porque a scrollView precisa saber a altura e largura de seus componentes para permitir o correto cálculo de deslocamento.

Ou seja, para cada novo componente, temos que fazer esse processo. Porém podemos minimizar isso criando uma outra view que terá o papel de obter a largura e também compor as views da scrollView.

Comece criando a nova view em seguida na função viewDidLoad adicione na scrollView e configure suas constraints

lazy var viewHandler: UIView = {
    let element = UIView()
    element.translatesAutoresizingMaskIntoConstraints = false
    element.backgroundColor = .green
    return element
}()

scrollView.addSubview(viewHandler)
NSLayoutConstraint.activate([
    viewHandler.topAnchor.constraint(equalTo: scrollView.topAnchor),
    viewHandler.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
    viewHandler.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
    viewHandler.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
    viewHandler.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
])

Dessa forma já estamos informando para nossa scrollView qual a largura do conteúdo.
Se executar o projeto vai perceber que a viewHandler não aparece na tela, isso acontece porque a scrollView desconhece a altura da viewHandler. Para resolver esse obstáculo vamos utilizar a anyView.
Mais acima adicionamos a anyView na scrollView, altere para viewHandler e reconfigure as constraints

viewHandler.addSubview(anyView)
NSLayoutConstraint.activate([
    anyView.topAnchor.constraint(equalTo: viewHandler.topAnchor, constant: 100),
    anyView.leadingAnchor.constraint(equalTo: viewHandler.leadingAnchor),
    anyView.trailingAnchor.constraint(equalTo: viewHandler.trailingAnchor),
    anyView.heightAnchor.constraint(equalToConstant: 1000),
    anyView.bottomAnchor.constraint(equalTo: viewHandler.bottomAnchor, constant: -40)
])

Sem o uso de widhtAnchor na anyView e o PRINCIPAL, conectando o bottomAnchor com a nossa viewHandler, dessa forma a scrollView consegue obter a altura.

Ao executar poderá ver sua anyView e o scroll funcionando devidamente.

Na adição de um novo componente, o último elemento da viewHandler(de cima para baixo) é quem deve apontar o bottomAnchor para viewHandler.bottomAnchor, assim a scrollView vai continuar a pegar a altura correta.

Ficou em dúvida? Viu algum ponto de melhoria? Fique a vontade para comentar! :)

Blog

UIScrollView com View Code / PT-BR

João Matheus

Join Our Newsletter. No Spam, Only the good stuff.

Related