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! :)
Top comments (0)