Eu tenho uma exibição de rolagem com conteúdo de 1000 px de altura e gostaria de colocá-la para facilitar o design no storyboard.
Eu sei que isso pode ser feito programaticamente, mas eu realmente quero poder visualizá-lo visualmente. Toda vez que eu coloco uma exibição de rolagem em um controlador de exibição, ela não rola. É possível fazê-lo funcionar como eu quero ou tenho que fazê-lo no código?
ios
xcode
uiscrollview
uistoryboard
Alex Reynolds
fonte
fonte
Respostas:
Estou respondendo minha própria pergunta, porque passei apenas duas horas para encontrar a solução e o StackOverflow permite esse estilo de controle de qualidade.
Do início ao fim, aqui está como fazê-lo funcionar no storyboard.
1: vá para você visualizar o controlador e clique em
Attribute Inspector
.2: altere o tamanho para em
Freeform
vez de inferido.3: Vá para a visualização principal desse storyboard, não a visualização de rolagem, mas a visualização de nível superior.
4: Clique
Size Inspector
e defina essa visualização para o tamanho desejado. Eu mudei minha altura para 1000.Agora você verá que o storyboard tem sua visualização configurada para poder ver toda a altura do seu pergaminho para facilitar o design.
5: Coloque uma vista de rolagem e estique-a para que ocupe toda a vista. Agora você deve ter uma visualização de rolagem com tamanho de 320.1000 em uma visualização no seu controlador de visualização.
Agora precisamos fazer a rolagem e mostrar o conteúdo corretamente.
6: Clique no seu scrollview e clique em
Identity Inspector
.7: Adicione um
User Defined runtime attribute
com KeyPath docontentSize
tipo SIZE e insira o tamanho do seu conteúdo. Para mim é (320, 1000).Como queremos ver toda a nossa exibição de rolagem no storyboard, a esticamos e ela possui um quadro de 320.1000, mas para que isso funcione em nosso aplicativo, precisamos alterar o quadro para o que será a visualização de rolagem visível.
8: adicione a
runtime attribute
com KeyPathframe
com o tipo RECT e 0,0,320,416.Agora, quando executamos nosso aplicativo, teremos uma exibição de rolagem visível com um quadro de 0,0.320, 416 e podemos rolar para 1000. Podemos organizar nossas sub-visualizações e imagens e outros enfeites no Storyboard da maneira que queremos que apareçam. Em seguida, nossos atributos de tempo de execução certifique-se de exibi-lo corretamente. Tudo isso sem 1 linha de código.
fonte
frame
atributo. De fato, todos os dispositivos não têm exatamente o mesmo tamanho (iPhone 5).Aqui estão as etapas
Auto Layout
que funcionaram para mim no XCode 8.2.1.Size Inspector
deView Controller
e mudeSimulated Size
paraFreeform
com altura 1000 em vez deFixed
.View Controller
como RootView .Scroll View
como subview do RootView e renomeie-o como ScrollView .Vertical Stack View
como subview do ScrollView e renomeie-o como ContentView .Attributes Inspector
de ContentView e alterarDistribution
aFill Equally
vez deFill
.View
como subview do ContentView e renomeie-o como RedView .Red
como plano de fundo do RedView .View
como subview do ContentView e renomeie-o como BlueView .Blue
como plano de fundo do BlueView .Update Frames
botão.Update Frames
é um novo botão no Xcode8, em vez doResolve Auto Layout Issues
botão. Parece um botão de atualização, localizado na barra de controle abaixo do Storyboard:Ver hierarquia:
Visualizar cena do controlador (altura: 1000):
Execute no iPhone7 (Altura: 1334/2):
fonte
BlueView
a parte superiorRedView
da base para iniciantes como eu (Xcode 8.2): 1) Arraste o botãoBlueView
abaixoRedView
(ou seja, eles não devem se sobrepor ou a etapa 4) não funcionará). 2) Abra o menu de pinos na parte inferior. 3) Clique na seta pequena à direita da restrição de margem superior. 4) Selecione aRedView
partir desse menu e defina o valor como 0. Isso é diferente das versões anteriores do Xcode, nas quais você pode fazer coisas comoEditor
->Pin
-> ...UIStackView
para evitar o problema de definir restrições.Aqui estão as etapas que funcionaram para mim no iOS 7 e no XCode 5.
Arraste um ViewController (ele vem com o UIView "View").
1.1 Selecione "Visualizar controlador", selecione "File Inspector" e desmarque "Layout automático".
Digite "contentSize" para keyPath. Selecione "Tamanho" para Tipo. E digite {320, 1000} para obter o valor.
Nota: A Etapa 4 está simplesmente dizendo que o scroller contém algum conteúdo cujo tamanho é 320x1000 unidades. Portanto, definir contentSize fará o scroller funcionar.
Selecione View Controller, selecione "Attributes Inspector" e selecione Freeform em Size.
Nota: a etapa 5 nos permitirá alterar o tamanho de "View" fornecido com o controlador de exibição.
Selecione "Visualizar" e, em seguida, selecione "Inspetor de tamanho".
Nota: 5, 6 e 7 é puramente para nós vermos uma visão ampliada ou expandida no StoryBoard. Nota: Certifique-se de desmarcar "Layout automático" no View Controller.
Sua hierarquia de visualizações deve ter a seguinte aparência:
fonte
Após horas de tentativa e erro, encontrei 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 iOS 7. Você pode fazer isso quase inteiramente no Storyboard, usando 2 pequenos truques / soluções alternativas:
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 de scrollViews para que ele contenha toda a 'exibição anexa'. Não encontrei uma maneira de fazer isso no Storyboard:
Você pode tentar fazer isso adicionando um
contentSize
keyPath comosize
a ao scrollView no Identity Inspector e configurando-o para (320, 1000).Eu 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 verá que pode rolar), isso também deve ser possível com um ScrollViewController.
fonte
Como a rolagem funcionar no iOS7 e o layout automático no iOS 7 e no XCode 5.
Além disso: https://stackoverflow.com/a/22489795/1553014
Aparentemente, tudo o que precisamos fazer é:
Defina todas as restrições como Visualização de rolagem (ou seja, corrija a visualização de rolagem primeiro)
Em seguida, defina a restrição distance-from-scrollView no item mais abaixo para rolar a visualização (que é a super visualização).
Nota: A Etapa 2 informará o storyboard onde está o último conteúdo na exibição de rolagem.
fonte
Neste exemplo, desmarquei o recurso Autolayout do construtor Interface. E ainda estou usando (sem nenhuma razão) a versão 4.6.1 relativamente antiga do Xcode.
Comece com um controlador de exibição que tenha uma exibição de rolagem sobre ele (a exibição principal).
1: Adicione uma exibição de contêiner, da Biblioteca de objetos, à exibição de rolagem. Observe que um novo controlador de exibição é adicionado ao storyboard e está vinculado ao controlador de exibição com a exibição de rolagem.
2: Selecione a visualização do contêiner e, no Inspetor de tamanhos, ancore-o na parte superior e esquerda sem redimensionar automaticamente.
3: Altere sua altura para 1000. (1000 é usado neste exemplo. Você deve aplicar o valor necessário.)
4: Selecione o novo controlador de exibição e, no Inspetor de atributos, altere Tamanho para Forma livre.
5: Selecione a vista do novo controlador de vista e, no tamanho Inspetor, altere a altura para 1000 (que é igual à altura da vista do contêiner).
6: Para seu teste posteriormente, enquanto ainda estiver na visualização do novo controlador de visualização, adicione uma etiqueta na parte superior e na parte inferior da visualização.
7: Selecione a vista de rolagem no controlador de vista original. No Inspetor de identidade, adicione um atributo com o keyPath definido como contentSize, digite definido como Tamanho e o valor definido como {320, 1000} (ou o tamanho da visualização do contêiner).
8: Execute no iPhone Simulator de 4 polegadas. Você poderá rolar do rótulo superior até o rótulo inferior.
9: Execute no iPhone Simulator de 3,5 polegadas. Você poderá rolar do rótulo superior até o rótulo inferior.
Lembre-se de que o Xcode 4.6.1 pode ser construído apenas para iOS6 e versões inferiores. Usando essa abordagem e criação para iOS6, ainda consigo obter os mesmos resultados quando o aplicativo é executado no iOS7.
fonte
Observe que, em a
UITableView
, é possível rolar a visualização da tabela selecionando uma célula ou um elemento nela e rolando para cima ou para baixo com o trackpad.Por exemplo
UIScrollView
, gosto da sugestão de Alex, mas recomendo alterar temporariamente o controlador de exibição para forma livre, aumentar a altura da visualização raiz, criar sua interface do usuário (etapas 1 a 5) e depois alterá-la novamente para o tamanho padrão inferido quando terminar para que você não precise codificar os tamanhos do 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.fonte
Você só deve definir a propriedade contentSize no viewDidAppear, como esta amostra:
Ele resolve os problemas de execução automática e funciona bem no iOS7.
fonte
Isenção de responsabilidade: - Apenas para os ios 9 e acima (exibição em pilha).
Se você estiver implantando seu aplicativo em dispositivos iOS 9, use uma exibição de pilha . Aqui estão os passos: -
fonte
spacing
para colocar algum espaço entre subvisões (filhos). Se precisar de mais espaço entre apenas duas subvisões, adicione um filho "espaçador": um UIView transparente com tamanho fixo.No iOS7, descobri que, se eu tivesse um View dentro de um UIScrollView em um ViewController do tamanho de FreeForm, ele não rolaria no aplicativo, independentemente do que eu fiz. Eu brinquei e descobri que o seguinte parecia funcionar, que não usa FreeForms:
Inserir um UIScrollView dentro da View principal de um ViewController
Defina as restrições de Autolayout no ScrollView, conforme apropriado. Para mim, usei o guia de layout de 0 à parte superior e o guia de layout de 0 à parte inferior
Dentro do ScrollView, coloque uma exibição de contêiner. Defina sua altura para o que quiser (por exemplo, 1000)
Adicione uma restrição de altura (1000) ao contêiner para que não seja redimensionado. A parte inferior estará no final do formulário.
Adicione a linha [self.scrollView setContentSize: CGSizeMake (320, 1000)]; ao 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.
fonte
eu quero colocar meus 5 centavos na resposta aceita: estou pesquisando o tópico há 2 dias e finalmente encontrei uma solução que sempre usarei sempre daqui para frente
vá para o item 4 na resposta aceita e esqueça de adicionar atributos de quadros e conteúdos e assim por diante
para tornar tudo automático, basta usar a solução deste link
tudo é claro, fácil, elegante e funciona como um encanto no ios 7. estou muito feliz com tudo isso lol
fonte
Aqui está uma solução simples.
Defina o atributo de tamanho do seu controlador de exibição no storyboard como "Forma livre" e defina o tamanho desejado. Verifique se é grande o suficiente para caber no conteúdo completo da sua exibição de rolagem.
Adicione sua visualização de rolagem e defina as restrições como faria normalmente. ou seja, se você deseja que a visualização de rolagem seja do tamanho da sua visualização, anexe as margens superior, inferior, à esquerda e à direita à superview como faria normalmente.
Agora, verifique se há restrições nas subvisões da visualização de rolagem que conectam a parte superior e inferior da visualização de rolagem. O mesmo para esquerda e direita se você tiver rolagem horizontal.
fonte
Aqui está uma resposta um pouco suja que leva à mesma solução para visualizações de rolagem vertical, mas (contra o ethos do stackoverflow) 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.
fonte
Aparentemente, você não precisa especificar a altura! O que é ótimo se ele mudar por algum motivo (você redimensiona componentes ou altera o tamanho da fonte).
Acabei de seguir este tutorial e tudo funcionou: http://natashatherobot.com/ios-autolayout-scrollview/
(Observação: não há necessidade de implementar viewDidLayoutSubviews, a menos que você queira centralizar a visualização, para que a lista de etapas seja ainda mais curta).
Espero que ajude!
fonte
A chave é o contentSize.
Isso geralmente está ausente e não é indicado ao adicionar um UIScrollView.
Selecione o UIScrollView e selecione o Identity Inspector.
Adicione um
contentSize
keyPath comosize
a ao scrollView no Identity Inspector e defina-o como (320, 1000).Role para longe.
fonte
Se você estiver usando o layout automático, a melhor abordagem é usar UITableViewController com células estáticas no storyboard.
Uma vez, também enfrentei o problema com uma exibição que requer muito mais rolagem, portanto altere o UIScrollView com a técnica mencionada acima.
fonte
Veja como configurar uma visualização de rolagem usando o Xcode 11
1 - Adicione a visualização de rolagem e defina as restrições superior, inferior, inicial e final
2 - Adicione uma Visualização de conteúdo à visualização de rolagem, arraste uma conexão ao Guia de layout de conteúdo e selecione Principal, Superior, Inferior e À direita. Certifique-se de definir seus valores como 0 ou as constantes que você deseja.
3 - Arraste da Visualização de conteúdo para o Guia de layout do quadro e selecione Larguras iguais
4 - Defina uma constante de restrição de altura como Visualização de conteúdo
fonte