ios - example - Como usar o UIScrollView no Storyboard




xcode auto layout scrollview (11)

Eu tenho uma visualização de rolagem com conteúdo de até 1.000 px de altura e gostaria de poder exibi-la para facilitar o design no storyboard.
Eu sei que isso pode ser feito de forma programática, mas eu realmente quero ser capaz de vê-lo visualmente. Toda vez que coloco uma visualização de rolagem em um controlador de exibição, ela não é rolada. É possível fazê-lo funcionar como eu quero ou tenho que fazê-lo no código?


A chave é o contentSize.

Isso geralmente está faltando e não é indicado ao adicionar um UIScrollView.

Selecione o UIScrollView e selecione o Identity Inspector.

Adicione um contentSize contentSize como um size ao scrollView no Identity Inspector e configure-o para (320, 1000).

Rolar para longe


Após horas de tentativa e erro, descobri uma maneira muito fácil de colocar o conteúdo em visualizações de rolagem que estão "fora da tela". Testado com o XCode 5 e o iOS 7. Você pode fazer isso quase inteiramente no Storyboard, usando dois pequenos truques / soluções alternativas:

  1. Arraste um controlador de visualizações para o seu storyboard.
  2. Arraste um scrollView neste viewController, para a demonstração você pode deixar seu tamanho padrão, cobrindo a tela inteira.
  3. Agora vem o truque 1 : antes de adicionar qualquer elemento ao scrollView, arraste em uma 'visão' regular (Esta visão será feita maior que a tela, e irá conter todos os sub-elementos como botões, rótulos, ... vamos chamá-lo de ' visão envolvente ').
  4. Deixe o tamanho Y dessa visão delimitadora no inspetor de tamanho para, por exemplo, 800.
  5. Coloque um rótulo na vista de fechamento, em algum lugar na posição Y 200, nomeie-o como "rótulo 1".
  6. Truque 2 : certifique-se de que a exibição de fechamento esteja selecionada ( não a rolagemView! ) E defina sua posição Y como, por exemplo, -250, para que você possa adicionar um item que esteja "fora" da tela
  7. Coloque um rótulo, em algum lugar na parte inferior da tela, nomeie-o como "rótulo 2". Este rótulo é, na verdade, "fora da tela".
  8. Redefinir a posição Y da visualização de fechamento para 0, você não verá mais o rótulo 2, pois ele foi posicionado fora da tela.

Até agora, para o trabalho de storyboard, agora você precisa adicionar uma única linha de código ao método viewDidLoad do viewController para definir o conteúdo scrollViews para que ele contenha toda a 'visão envolvente'. Não encontrei uma maneira de fazer isso no Storyboard:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.contentSize = CGSizeMake(320, 800);
}

Você pode tentar fazer isso adicionando um contentSize contentSize como um size ao scrollView no Identity Inspector e definindo-o como (320, 1000).

Acho que a Apple deve facilitar isso no storyboard, em um TableViewController você pode simplesmente rolar para fora da tela no Storyboard (basta adicionar 20 células, e você verá que pode simplesmente rolar), isso deve ser possível com um ScrollViewController também.


Aqui está uma resposta suja que leva à mesma solução para visualizações de rolagem vertical, mas (contra o ethos de ) não responde à pergunta. Em vez de usar um scrollView, basta usar um UITableView, arrastar um UIView normal para o cabeçalho e torná-lo tão grande quanto você deseja, agora você pode rolar o conteúdo no storyboard.


Aqui está uma solução simples.

  1. Defina o atributo de tamanho do seu controlador de visualização no storyboard para "Forma livre" e defina o tamanho desejado. Verifique se ele é grande o suficiente para caber no conteúdo completo da sua visualização de rolagem.

  2. Adicione sua visualização de rolagem e defina as restrições como faria normalmente. ou seja, se você quiser que a visualização de rolagem seja o tamanho da sua visualização, anexe as margens superior, inferior, à esquerda, à direita, à super visão, como faria normalmente.

  3. Agora, certifique-se de que haja restrições nas subvisualizações da visualização de rolagem que conectam a parte superior e inferior da visualização de rolagem. Mesmo para a esquerda e para a direita, se você tiver rolagem horizontal.


Disclaimer: - Apenas para ios 9 e acima (Stack View).

Se você estiver implantando seu aplicativo em dispositivos ios 9, use uma visualização de pilha . Aqui estão os passos:

  1. Adicione uma vista de rolagem com restrições - fixe à esquerda, direita, inferior, superior (sem margens) a superview (visão)
  2. Adicione uma vista de pilha com as mesmas restrições para a visualização de rolagem.
  3. Vista de Pilha Outras Restrições: - stackView.bottom = view.bottom e stackView.width = scrollView.width
  4. Comece a adicionar suas visualizações. A visualização de rolagem decidirá rolar com base no tamanho da visualização de pilha (que é essencialmente sua visualização de conteúdo)

Estou respondendo a minha própria pergunta porque passei apenas duas horas para encontrar a solução e o permite esse estilo de controle de qualidade.

Começar a terminar aqui é como fazê-lo funcionar no storyboard.

1: vá até o controller view e clique em Attribute Inspector .

2: mude o tamanho para Freeform vez de Inferred.

3: Vá para a visualização principal no storyboard, não a sua vista de rolagem, mas sim a visualização de nível superior.

4: Clique em Size Inspector e defina essa exibição para o tamanho desejado. Eu mudei minha altura para 1000.

Agora você verá que o storyboard tem sua configuração de visualização para que você possa ver a altura inteira do pergaminho para facilitar o design.

5: Solte em um scrollview e estique-o para ocupar toda a visão. Agora você deve ter uma vista de rolagem com tamanho de 320.1000 em uma visualização em seu controlador de visualização.

Agora precisamos fazer a rolagem e precisamos mostrar conteúdo corretamente.

6: Clique na sua vista de rolagem e clique em Identity Inspector .

7: Adicione um User Defined runtime attribute com KeyPath de contentSize depois digite SIZE e coloque em seu tamanho de conteúdo. Para mim é (320, 1000).

Uma vez que queremos ver toda a nossa visão de rolagem no storyboard, esticamos e temos um quadro de 320.1000, mas para que isso funcione em nosso aplicativo, precisamos mudar o quadro para o que a rolagem visível será.

8: Adicione um runtime attribute com o frame KeyPath com o Tipo RECT e 0,0,320,416.

Agora, quando executarmos nosso aplicativo, teremos uma visualização de rolagem visível com um quadro de 0,0,320,416 e pode rolar para baixo até 1000. Podemos criar nossas subvisualizações, imagens e outras no Storyboard do jeito que queremos que apareçam. Então nossos atributos de tempo de execução não deixam de exibi-lo corretamente. Tudo isso sem uma linha de código.


No iOS7, descobri que se eu tivesse um View dentro de um UIScrollView em um ViewController do tamanho do FreeForm, ele não rolaria no aplicativo, não importando o que eu fizesse. Eu brinquei e descobri que o seguinte parecia funcionar, o qual não usa FreeForms:

  1. Inserir um UIScrollView dentro da visualização principal de um ViewController

  2. Defina as restrições de Autolayout no ScrollView, conforme apropriado. Para mim, usei 0 para o Guia de layout superior e 0 para o layout de guia inferior

  3. Dentro do ScrollView, coloque uma Visualização de Contêiner. Defina sua altura para o que você quiser (por exemplo, 1000)

  4. Adicione uma restrição de altura (1000) ao contêiner para que ele não seja redimensionado. A parte inferior estará além do final do formulário.

  5. Adicione a linha [self.scrollView setContentSize: CGSizeMake (320, 1000)]; para o ViewController que contém o scrollView (que você conectou como um IBOutlet)

O ViewController (adicionado automaticamente) associado ao Container terá a altura desejada (1000) no Interface Builder e também rolará corretamente no controlador de exibição original. Agora você pode usar o ViewController do contêiner para organizar seus controles.


Observe que dentro de um UITableView , você pode rolar a tableview selecionando uma célula ou um elemento nela e rolando para cima ou para baixo com o trackpad.

Para um UIScrollView , eu gosto da sugestão de Alex, mas eu recomendaria temporariamente mudar o controlador de visualização para liberar, aumentar a altura da visão raiz, construir sua interface do usuário (etapas 1-5) e depois alterá-la de volta para o tamanho inferido padrão quando você estiver feito para que você não precise codificar os tamanhos de conteúdo como atributos de tempo de execução. Se você fizer isso, estará se abrindo para muitos problemas de manutenção, tentando suportar dispositivos de 3,5 "e 4", bem como a possibilidade de aumentar as resoluções de tela no futuro.


Se você estiver usando o layout automático, a melhor abordagem é usar o UITableViewController com células estáticas no storyboard.

Eu também já enfrentei o problema com uma visão que requer muito mais rolagem, então mude o UIScrollView com a técnica acima mencionada.


Você deve definir apenas a propriedade contentSize no viewDidAppear, como este exemplo:

- (void)viewDidAppear:(BOOL)animated{

     [super viewDidAppear:animated];
     self.scrollView.contentSize=CGSizeMake(306,400.0);

}

Ele resolve os problemas de autolayout e funciona bem no iOS7.


Obtenção de rolagem para trabalhar no iOS7 e layout automático no iOS 7 e no XCode 5.

Além disso: https://.com/a/22489795/1553014

Aparentemente, tudo o que precisamos fazer é:

  1. Definir todas as restrições para Scroll View (ou seja, corrigir a exibição de rolagem primeiro)

  2. Em seguida, defina a restrição distance-from-scrollView para o item mais baixo para a visualização de rolagem (que é a supervisualização).

Observação: a etapa 2 informará ao storyboard onde o último conteúdo está na visualização de rolagem.





uistoryboard