Ios uiscrollview

Since the introduction of Auto Layout to iOS, there is a new way you can configure your scrolling content.

UIScrollView has gone through some major improvements. Starting with iOS 11, Apple introduced content and frame layout guides to make it a little less confusing to configure the content inside of your scroll view. Xcode 11 also added these layout guides to interface builder. I will also show you how the scroll view can move your content out of the way of the pop-up keyboard. Are you working on a project that cannot target iOS 11 yet? No worries. I want to give you a sense of what we are building, so you can follow along and see how the view is constructed.

Ios uiscrollview

Scroll views have two main purposes:. Scroll views are created as any other view is, either programmatically or in Interface Builder. After that, only a small amount of additional configuration is required to achieve basic scrolling capabilities. A scroll view is created and inserted into a controller or view hierarchy like any other view. There are only two additional steps required to complete the scroll view configuration:. You can optionally configure any visual cues your application requires like vertical and horizontal scroll indicators, drag bouncing, zoom bouncing, and directional constraint of scrolling. Open the ScrollViewDemo project from the project files you downloaded. It contains a simple project with a single view controller in the storyboard that has been linked to the ScrollViewController class created in the project. I have also included an image named image. The above creates a scroll view and an image view. The image view is set as a subview of the scroll view. We set it equal to the size of the image view x

Nice post.

This tutorial assumes you understand how to use Interface Builder to add objects and connect outlets between your code and storyboard scenes. Use the Download Materials button at the top or bottom of this tutorial to download the starter project, then open it in Xcode. Continue using the iPhone 8 simulator for the rest of the tutorial. Open Main. Then, move Image View inside your newly-added Scroll View. Your document outline should now look like this:.

In order to make the UIScrollView scroll, you have to manually tell it how tall and wide the content is. Before you can do that, you must create an outlet, as shown below. If you want to embed a tall image into the scrollView, then you can set the contentSize to the size of the image, as below. This assumes that you've also created an outlet for the Image View and added it as a subview of the scroll view. Create a comma-delimited list of all the delegates that your view controller supports. Don't paste the snippet below. Instead, go to your view controller, and add the UIScrollViewDelegate in the same place that's shown in the snippet.

Ios uiscrollview

Scroll views have two main purposes:. Scroll views are created as any other view is, either programmatically or in Interface Builder. After that, only a small amount of additional configuration is required to achieve basic scrolling capabilities. A scroll view is created and inserted into a controller or view hierarchy like any other view. There are only two additional steps required to complete the scroll view configuration:. You can optionally configure any visual cues your application requires like vertical and horizontal scroll indicators, drag bouncing, zoom bouncing, and directional constraint of scrolling. Open the ScrollViewDemo project from the project files you downloaded. It contains a simple project with a single view controller in the storyboard that has been linked to the ScrollViewController class created in the project. I have also included an image named image.

Casekoo cases

Alexander says:. The above creates a scroll view and an image view. Since setting this position is so common when working with scroll views, UIScrollView has a contentOffset property that you can change which will have the same effect as changing the bounds origin. January 15, Neil says:. I am not sure what am i missing here. I think I just woke up the neighbors with a loud cheer of joy! When in portrait mode, the content will not scroll until the keyboard covers up the bottom of the view. Please enable JavaScript to enjoy the best experience. This only allows you to layout all of your controls on the storyboard. Wow, indeed that makes sense, thank you! Run the app and you should have the same scrolling view we had in just a few set up steps and without writing a line of code. January 3, To do this, click on the view controller, select the size inspector, and select Freeform size. If you have UITextFields near the bottom of your content view and the keyboard pops up, it blocks the bottom half of your screen; you cannot see what you are typing.

This tutorial assumes you understand how to use Interface Builder to add objects and connect outlets between your code and storyboard scenes. Use the Download Materials button at the top or bottom of this tutorial to download the starter project, then open it in Xcode. Continue using the iPhone 8 simulator for the rest of the tutorial.

Thank you for this article. July 31, But when I use scrollview from middle of the screen the scrolling is not working. This is called after every zoom action. Ignore the errors for now. For reference, you can download both completed project files here. Randy Weinstein says:. August 20, Hi Mike , It is a very good ,tutorials to understanding the orientation layout issue in scroll view ,thanks a lot man. When you ran the app, you might have noticed that the part of the image that was originally shown was its top left corner.