Can't fully scroll within UIScrollView - ios

I have a UIImageView within a UIScrollView, and I want to be able to scroll around the dimensions of the "regular" photo dimensions. My issue is that I am able to scroll, however when it gets to the top or towards the bottom of the photo, the scroll position does not stay, instead it "bounces" and moves back up a little bit, and does not allow for the photo to stay in that position, how would I go about fixing this?
here is the code below:
scrollView.frame = CGRect(x: self.view.frame.width * 0, y: self.view.frame.height / 3, width: self.view.frame.width, height: self.view.frame.width)
self.view.addSubview(scrollView)
scrollView.delegate = self
let image = imageView.image
imageView.frame = CGRect(x: self.view.frame.width * 0, y: self.view.frame.height * 0, width: (image?.size.width)!, height: (image?.size.height)!)
imageView.frame = scrollView.bounds
imageView.contentMode = .scaleAspectFill
scrollView.addSubview(imageView)
An example would be if you had a full screen photo taken with the camera, and then when the photo is displayed within the view, the whole photo is not able to stay in its position when it is being scrolled.

You are doing a number of things wrong, and as mentioned you should move to auto-layout and constraints, however...
To get your image scrolling the way you are going:
// set scroll view frame to be full width of view, start 1/3 of the way down from the top, and make the height the same as the width
scrollView.frame = CGRect(x: 0, y: self.view.frame.height / 3, width: self.view.frame.width, height: self.view.frame.width)
// add the scroll view to the view
self.view.addSubview(scrollView)
// use "if let" so you're not force-unwrapping optionals
if let image = imageView.image {
// set the imageView's frame to the size of the image
imageView.frame = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)
// add the imageView to the scroll view
scrollView.addSubview(imageView)
// set the contentSize of the scroll view - the "scrollable area" - to the size of the image view
scrollView.contentSize = imageView.bounds.size
}

Bouncing is an optional behavior in UIScrollView (and its subclasses, including UiTableView). You can turn it on/off via the bounces property, or in Interface Builder.
I usually bundle desired ScrollView properties together in a convenience method (or you could use UIAppearance) to ensure that all of my views have shared behavior.

Related

How to adjust Subview according to different Screen Sizes (Height and Width)?

I am trying to add a view onto the screen using the following code:-
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let size = CGSize(width: 564.0, height: 783.0)
let host = UIView(frame: CGRect(x: 0.0, y: 0.0, width: size.self.width, height: size.self.height))
self.view.addSubview(host)
let particlesLayer = CAEmitterLayer()
particlesLayer.frame = CGRect(x: 0.0, y: 0.0, width: size.self.width, height: size.self.height)
host.layer.addSublayer(particlesLayer)
host.layer.masksToBounds = true
}
But, the view is not able to cover the entire screen on an iPad, but, is able to cover only the size of an iPhone screen. Could anyone please let me know what can I do to resolve this issue? Thanks a lot for the help!🙏
You can use below to get device's screen size.
let width = UIScreen.main.bounds.width
let height = UIScreen.main.bounds.height
However, you should consider using autolayout. It is more clean and useful compare to your approach.

Scroll and zoom to specific CGRect of UIImageView

I have a UIScrollView and a UIImageView inside. The UIScrollView size is 350x350 and the image inside the UIImageView is 350x350.
The UIScrollView has a zoomScale of 4.
I want to show only the specific point of the image rect:
CGRect(x: 100, y: 100, width: 100, height: 100)
For better understanding, only the white rect inside the images:
x:100, y:100, width:100, height:100
x:150, y:150, width:100, height:100
What i've done so far could not do the trick:
self.image.image = UIImage(named: "horse_marked_100x100")
self.imageScroller.maximumZoomScale = 10
self.imageScroller.minimumZoomScale = 1
self.imageScroller.clipsToBounds = true
self.imageScroller.delegate = self
self.imageScroller.isScrollEnabled = false
self.imageScroller.scrollRectToVisible(CGRect(x: 100, y: 100, width: 100, height: 100), animated: false)
self.imageScroller.zoomScale = 4
You can use:
scrollView.zoom(to: CGRect(x: 100, y: 100, width: 100, height: 100), animated: true)
You should only take care to have the desired size covered by the maximumZoomScale of the scroll view. For instance, in this example, you won't be able to zoom in a rect smaller than 35 x 35, because you have a maximumZoomScale of 10. In your example you don't have any problems with this.
Note: the CGRect should be in the coordinate space of the view returned by viewForZooming(in:). This is a UIScrollViewDelegate method which must be implemented in order to enable zooming. Here, you have to simply return the UIImageView inside the scroll view.
UPDATE:
Just to clarify what you tried out so far and why it does not work: scrollView.scrollRectToVisible(_:, animated:) will scroll in a position where the passed CGRect is visible, but without zooming the scroll view. In this example, that CGRect is already completely visible in the scroll view, thus it doesn't have to scroll anywhere else, so you don't see any visible effect.

Swift Container View with UIPageViewController

I have a container view displaying a UIPageViewController. Everything is working ok, the only problem is the dots that display the pages. They are not able to adjust with the changing screen sizes.
pageControl = UIPageControl(frame: CGRect(x: 0,y: UIScreen.main.bounds.maxY - 525,width: UIScreen.main.bounds.width,height: 50))
This is the piece of code I am using to change where the dots are displayed mainly the UIScreen.main.bounds.maxY - 525 part. I am just checking on how I can have them adapt to the different screen sizes. Screen shots below of the problem. This first orange screen is correct on where I want the dots to be and the second one is wrong.
More Code
func configurePageControl() {
// The total number of pages that are available is based on how many available colors we have.
pageControl = UIPageControl(frame: CGRect(x: 0,y: UIScreen.main.bounds.maxY - 525,width: UIScreen.main.bounds.width,height: 50))
self.pageControl.numberOfPages = orderedViewControllers.count
self.pageControl.currentPage = 0
self.pageControl.tintColor = UIColor.black
self.pageControl.pageIndicatorTintColor = UIColor.white
self.pageControl.currentPageIndicatorTintColor = UIColor.black
self.view.addSubview(pageControl)
}
How I am calling the views
lazy var orderedViewControllers: [UIViewController] = {
return [self.newVc(viewController: "sbBlue"),
self.newVc(viewController: "sbRed")]
}()
Here is solution for your issue.
You can get maxY position of your green or orange view and change your code like as follow. It will set your pageControl's vertical position by removing 30 pixel from bottom of your green or orange view.
pageControl = UIPageControl(frame: CGRect(x: 0, y: yourOrangeView.bounds.maxY - 30, width: UIScreen.main.bounds.width, height: 50))
Or
pageControl = UIPageControl(frame: CGRect(x: 0, y: yourGreenView.bounds.maxY - 30, width: UIScreen.main.bounds.width, height: 50))
I hope this will fix your issue.
There are two problems here.
You should not be creating your own UIPageControl. UIPageViewController has a UIPageControl already; you should just use it.
If you insist on supplying your own (unnecessary) UIPageControl, you need to position it with auto layout so that it takes account of size changes. This code is wrong:
pageControl = UIPageControl(frame: CGRect(x: 0,y: UIScreen.main.bounds.maxY - 525,width: UIScreen.main.bounds.width,height: 50))
Don't give the page control a frame; give it auto layout constraints.

How can I set a variable header of a TableView (not of a section) programmatically?

How can I set a variable header of a TableView (not of a section) programmatically, without having to worry about the placement?
let headerView = UILabel()
headerView.text = x
headerView.textColor = UIColor.blueColor()
headerView.frame = CGRect(x: 0, y: 0, width: headerView.frame.width, height: 44)
tableView.tableHeaderView = headerView
I got this code, but I don't think I can place the header exactly like it is a 'real' header. Anybody knows how to do this?
As Dmitriy said, this is a normal way to do it:
tableView.tableHeaderView = headerView
Position is however defined by the frame you set in it, so if position is what you want different, you have to play with this line of your code:
headerView.frame = CGRect(x: 0, y: 0, width: headerView.frame.width, height: 44)
E.g., if you want the label to be centered, you can for example do it this way:
headerView.frame = CGRect(x: 0, y: 0, width: tableView.frame.width, height: 44)
headerView.textAlignment = .centered
This would span the label across the width of the tableView and the text alignment would place it to center. Of course, for this to work, the tableView frame has to be already calculated at this point (so maybe you would had to put the line with frame calculation in the layoutSubviews method).
I think this tableView.tableHeaderView = headerView - it's normal way to make header in UITableView.

Unable to properly configure UIScrollView (Offset on top)

I have been fighting with this all morning and can't seem to find a solution. I have created a UIImageView, filled it with red, then added it to a UIScrollView and set the contentSize to the size of the UIImageView. If I print the contentOffset i see (0, 0) and if I print the contentSize and the UIImageView.frame.size they are the same but the red "image" always appears smaller than what the scrollView thinks the contentSize is.
If I scroll all the way to the top I see a cyan stripe about 100 pixels high above the red image and the scroll bar will not make it all the way to the top of what I believe the top of my scroll view to be. Although the top of the scroll bar does line up with the top of my red window so it would seem as though the scroll view is confused as to where it actually lives. Or more likely, I'm confused
Here is my what seems like very simple code...
imgHorizon = UIImage.init(named:"horizon")!
imgBezel = UIImage.init(named:"bezel_transparent")!
imgWings = UIImage.init(named:"wings_transparent")!
imgViewHorizon = UIImageView.init()
imgViewBezel = UIImageView.init()
imgViewWings = UIImageView.init()
svHorizon = UIScrollView.init()
super.init(coder: aDecoder)
imgViewHorizon = UIImageView(frame: CGRect(x: 0, y: 0, width: imgBezel.size.width, height: imgHorizon.size.height))
imgViewHorizon.backgroundColor = UIColor.red
imgViewBezel = UIImageView(frame: CGRect(x: 0, y: 0, width: imgBezel.size.width, height: imgBezel.size.height))
imgViewBezel.contentMode = UIViewContentMode.center
imgViewBezel.clipsToBounds = true
imgViewBezel.image = imgBezel
imgViewWings = UIImageView(frame: CGRect(x: 0, y: 0, width: imgBezel.size.width, height: imgBezel.size.height))
imgViewWings.contentMode = UIViewContentMode.center
imgViewWings.clipsToBounds = true
imgViewWings.image = imgWings
svHorizon = UIScrollView(frame: CGRect(x: 0, y: 0, width: imgBezel.size.width, height: imgBezel.size.width))
svHorizon.contentSize = CGSize(width: imgBezel.size.width, height: imgHorizon.size.height)
svHorizon.contentMode = UIViewContentMode.scaleToFill
svHorizon.bounces = false
svHorizon.backgroundColor = UIColor.cyan
svHorizon.contentOffset = CGPoint(x: 0, y: 0)
svHorizon.addSubview(imgViewHorizon)
addSubview(svHorizon)
addSubview(imgViewBezel)
addSubview(imgViewWings)
From the discussion in the comments it turns out that the Adjust Scroll View Insets option was checked in the attributes inspector of the ViewController. Unchecking it resolved the problem. Have a look at the image below. You need to uncheck the highlighted option.

Resources