UIScrollView com View Code / PT-BR
Tags: ios, swift, mobile, beginners
Published: 2023-12-09 14:39:06

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! :)