Uncheck Adjust Scroll View Insets in the Attributes inspector for your newly-created view controller. Add leading and trailing constraints with constant values of 0 to the view controller.
Make sure to uncheck Constrain to margins. Add top and bottom constraints from Scroll view to the Top and Bottom Layout guides, respectively. They should also have constants of 0. Add a view as a child of the Scroll view and resize it to fit the entire space of the Scroll view. Rename its storyboard Label to Container View. Like before, add top, bottom, leading and trailing constraints, with constants of 0 , and uncheck Constrain to margins.
Again, make sure to pin the constraints to the Scroll view and not the Frame Layout Guide. You want it to be as wide as the scroll view, so attach an equal-width constraint from the Container View to the Scroll view. In the Attributes inspector , specify photo1 for the image, choose Aspect Fit for the mode and check Clip to Bounds.
Add top, leading and trailing constraints to Container view like before, and add a height constraint of Add a Label inside Container View below the image view. Next, add a vertical spacing constraint of 0 with the UIImage. Add a text field inside of Container View , below the new label. Add leading and trailing constraints to Container View with constant values of 8 and no margin.
Next, add a vertical-space constraint of 30 relative to the label. To do so, first delete the existing show segue between the Photo Scroll scene and the Zoomed Photo View Controller scene. Make the identifier showPhotoPage. You can see that the layout displays correctly when the device is in vertical orientation.
Try rotating to landscape orientation. Make sure that the language is set to Swift. Click Next and save it with the rest of the project. Then, wire the IBOutlet s for the scroll view, image view and text field. Open CollectionViewController. This sets the name of the photo your app will display on PhotoCommentViewController whenever the user taps one of the photos. Your view nicely displays the content and, when needed, allows you to scroll down to see more.
Unlike UITableViewController , which automatically handles moving content out of the way of the keyboard, you have to manage the keyboard manually when you use a UIScrollView directly. Do this by making PhotoCommentViewController observe the keyboard Notification objects that iOS sends whenever the keyboard hides and displays. Next, you need to set up the observers for the keyboard changes. Add the following code at the bottom of viewDidLoad :.
This method will resign the first responder status of the text field, which, in turn, dismisses the keyboard. Finally, open Main. To make it more user friendly, the keyboard should also dismiss when the user presses the return key. Now, navigate to the Photo Comment View Controller scene. Tap the text field and then tap somewhere else on the view. The keyboard should properly show and hide itself relative to the other content on the screen.
Likewise, tapping the return key does the same. You can see this in action in the App Store app when you view screenshots of an app. Go to Main. Change it to Scroll and set the Page Spacing to 8. This lets you refer to the storyboard from your code. This references the index of the photo to display. The page view controller will use this property. Open ManagePageViewController. Add the following class extension to the end of this file:.
You provide view controller instances for paging both forward and backward. In both cases, you use photoIndex to determine which image is currently displayed. Both methods use the viewController parameter to indicate the currently-displayed view controller. Using the photoIndex , it creates and returns a new controller. You also need to set the dataSource. Add the following to the end of viewDidLoad :. There are only a couple things left to do to get your page view running.
First, you'll fix the flow of the app. Switch back to Main. Delete the push segue showPhotoPage you created earlier. In the Attributes inspector for the segue, specify its name as showPhotoPage , as you did before. You previously set the Transition Style — great job!
To try it out, go to AppDelegate. In Main. With the new segue selected, open the Identity inspector and set the Identifier to zooming. You did it! You've created an iOS Photos app clone. You can select and navigate through a collection view of images by swiping, and you can zoom the photo content. Download the completed version of the project using the Download Materials button at the top or bottom of this tutorial.
If you want to go further, there's an entire video series dedicated to scroll views. Take a look. If you run into any problems along the way, or want to leave feedback about what you've read here, join the discussion in the comments below. The raywenderlich. Get a weekly digest of our tutorials and courses, and receive a free in-depth email course as a bonus!
Learn iOS, Swift, Android, Kotlin, Dart, Flutter and more with the largest and highest-quality catalog of video courses and books on the internet. Ron is the iOS lead at Wisdo, a platform for experience-based social networking.
I'm adding two images in each page of scroll view. In last page, i've only one image. How to handle this situation to scroll to last view? And the last page you have would then be one less than what it really is.
Pontus Pontus 7 7 silver badges 12 12 bronze badges. You are a hero Pontus! Patel Mr. Patel 2 2 silver badges 3 3 bronze badges. Though I personally use scroll. Chuy47 Chuy47 2, 1 1 gold badge 27 27 silver badges 28 28 bronze badges. I was digging whole stack for this answer! David Hernandez David Hernandez 2, 22 22 silver badges 18 18 bronze badges.
Just out of curiosity: in what case do you use the delay? Just off the top of my head, you could use it for non-interactive paging, e. Costique Works smooth as silk! Shachar Shachar 1, 9 9 silver badges 22 22 bronze badges. Community Bot 1 1 1 silver badge. Juan Reyes Juan Reyes 5 5 silver badges 8 8 bronze badges. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown.
The Overflow Blog. Podcast Explaining the semiconductor shortage, and how it might end. Does ES6 make JavaScript frameworks obsolete? Featured on Meta. Now live: A fully responsive profile. Visit chat. Linked
0コメント