I have a UIScrollView inside a UITableViewCell to allow zooming on a UIWebView inside the cell. When the view is zoomed in, the UITableViewCell is enlarged to fit the new size of the web view after being zoomed in. This is being done by changing the height constraint on the UIScrollView and implementing UITableView's automatic row height.
The issue right now is that zooming inside the scroll view does not zoom at the origin of the pinch, but somewhere above, so the view does not get zoomed in where the user intended.
Here is the view hierarchy:
[UITableView]
[CustomUITableViewCell]
[UIView] (Content View)
[UIView]
[UIScrollView]
[UIWebView]
[UIView]
The cell is both a UIWebViewDelegate and a UIScrollViewDelegate:
Custom UITableViewCell:
func configure() { // Called from tableView:cellForRowAt:
scrollView.delegate = self
webView.delegate = self
webView.scrollView.isScrollEnabled = false
webView.scalesPageToFit = true
webView.scrollView.bounces = false
webView.scrollView.clipsToBounds = false
let htmlTemplate = TableViewCell.messageTemplate
webView.loadHTMLString(htmlTemplate, baseURL: Bundle.main.bundleURL)
}
// UIScrollViewDelegate
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return webView
}
func scrollViewDidZoom(_ scrollView: UIScrollView) {
updateWebViewFrame()
scrollViewHeightConstraint.constant = webView.frame.height
layoutIfNeeded()
delegate?.updateCellHeights()
}
The table's view controller is the delegate for the cell, which implements updateCellHeights:
func updateCellHeights() {
// https://stackoverflow.com/a/30110230/482536
let offset = tableView.contentOffset
tableView.beginUpdates()
tableView.endUpdates()
tableView.layer.removeAllAnimations()
tableView.setContentOffset(offset, animated: false)
}
How do I make the scroll view zoom to the pinch origin?
Is this even the right approach to this problem? I tried using the scrollView inside the UIWebView directly, but couldn't get the UIWebView to resize to the inner scrollView correctly.
Related
I have a requirement to support zoom in UICollectionView.
Requirements:
After zoom in, it has to support to view the UICollectionViewCell’s hidden area ( area out of viewport) by horizontal and vertical scroll.
After Zoom out/in, it has to support the selection of UICollectionViewCell and able to scroll the UICollectionView ( Basically the default UICollectionView behavior on going back to no zoom state. ).
The list of approaches tried:
Added GestureRecognizer
a. Added UIPinchGestureRecognizer to transform the UICollectionView by scale.
b. After Zoom in, it was not possible to move the UICollectionViewcell to view the hidden area.
c. Added UIPanGestureRecognizer to move the center of UICollectionView
d. It was working fine to move the UICollectionView.
e. Now we can’t able to select the UICollectionViewCell and can’t able to scroll UICollectionView.
Added UICollectionView inside UIScrollView
a. Added UIScrollView with delegates.
b. Added UICollectionView as sub view of UIScrollView
c. Zoom out is not happening because UICollectionView (inherited by UIScrollView) consumes the zoom gesture
Added UIColectionView and UIScrollView both as siblings
a. Added UIScrollView and UICollectionView to parent.
b. Bring UIScrollView to front.
c. Zoom is working but not able to pan to see the hidden area.
Please suggest if there any way to fix above approaches or a better strategy to achieve zoom in a collectionView.
I have solved this using a UIScrollView and a UICollectionViewLayout subclass.
1) place a UIScrollView on top of the UICollectionView with the same frame.
self.view.addSubview(scrollView)
scrollView.addSubview(dummyViewForZooming)
scrollView.frame = collectionView.frame
scrollView.bouncesZoom = false
scrollView.minimumZoomScale = 0.5
scrollView.maximumZoomScale = 3.0
2) Set the contentSize of the UIScrollView and zoomingView to be the same as the UICollectionView
override func viewDidLayoutSubviews() {
super.viewWillLayoutSubviews()
scrollView.contentSize = layout.collectionViewContentSize
dummyViewForZooming.frame = CGRect(origin: .zero, size: layout.collectionViewContentSize)
scrollView.frame = collectionView.frame
}
3) Remove all gesture recognizers from the UICollectionView and add a delegate for the UIScrollView. Add a tap gesture recognizer to the UIScrollview
collectionView.gestureRecognizers?.forEach {
collectionView.removeGestureRecognizer($0)
}
let tap = UITapGestureRecognizer.init(target: self, action: #selector(scrollViewWasTapped(sender:)))
tap.numberOfTapsRequired = 1
scrollView.addGestureRecognizer(tap)
scrollView.delegate = self
4) When the ScrollView scrolls or zooms, set the contentOffset of the UICollectionView to be the same as the ScrollView contentOffset, set the layoutScale of your UICollectionViewLayout as the zoomscale and invalidate the layout.
func scrollViewDidZoom(_ scrollView: UIScrollView) {
if let layout = self.layout, layout.getScale() != scrollView.zoomScale {
layout.layoutScale = scrollView.zoomScale
self.layout.invalidateLayout()
collectionView.contentOffset = scrollView.contentOffset
}
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return dummyViewForZooming
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
collectionView.contentOffset = scrollView.contentOffset
}
5) override the prepare method in the UICollectionViewLayout, scan through all your layoutAttributes and set a transform:
attribute.transformedFrame = attribute.originalFrame.scale(layoutScale)
let ts = CGAffineTransform(scaleX: layoutScale, y: layoutScale)
attribute.transform = ts
let xDifference = attribute.frame.origin.x - attribute.transformedFrame.origin.x
let yDifference = attribute.frame.origin.y - attribute.transformedFrame.origin.y
let t1 = CGAffineTransform(translationX: -xDifference, y: -yDifference)
let t = ts.concatenating(t1)
attribute.transform = t
6) ensure you scale the collectionView content size:
override var collectionViewContentSize: CGSize {
return CGSize(width: width * layoutScale, height: height * layoutScale)
}
7) Intercept taps from the tap gesture recognizer and convert the location in view to a point in the collection view, you can then get the indexPath of that cell using indexPathForItem(point:) and select the cell or pass on events to the underlying views of the cell etc..
hope this helps
In my application I have to implement ScrollView and page control, I used ScrollView for both vertical scrolling and horizontal scrolling. when I drag the screen with scroll horizontal means it works fine but when I drag the screen with scroll Vertical means it has some glitches like(scrolling both vertically and horizontally) unable to stop that or unable to find the issue.
So I decided to place two buttons named next and previous for horizontal scrolling for next page and previous page in page control so I want to stop horizontal scroll when dragging the screen, but I don't know how to stop horizontal scrolling(not vertical scrolling).
Here I have posted the code for Scrolling in page control and Next and previous button actions.
I have declared and called the ScrollView Delegate.
UIScrollViewDelegate
override func viewDidLoad() {
super.viewDidLoad()
configurePageControl()
scrollMainHolderView.delegate = self
scrollMainHolderView.isPagingEnabled = true
}
ScrollView Method is:
//MARK:- Scrollview delegate -
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let pageNumber = round(scrollView.contentOffset.x / scrollView.frame.size.width)
pageControlNew.currentPage = Int(pageNumber)
self.scrollMainHolderView.contentSize=CGSize(width: self.view.frame.size.width * CGFloat(templateMutArray.count), height: CGFloat((globalYarr[Int(pageNumber)] as? CGFloat)!))
}
Set up code for Page control,
func configurePageControl() {
self.pageControlNew.numberOfPages = templateMutArray.count
self.pageControlNew.currentPage = 0
self.pageControlNew.tintColor = UIColor.red
self.pageControlNew.pageIndicatorTintColor = UIColor.black
self.pageControlNew.currentPageIndicatorTintColor = UIColor.green
}
Code for next and previous button action is,
#IBAction func pagePreviousBtnTapped(_ sender: Any) {
isHorizontalSCrolling = true
scrollMainHolderView.delegate = self
let scrollBounds = self.scrollMainHolderView.bounds
let contentOffset = CGFloat(floor(self.scrollMainHolderView.contentOffset.x - scrollBounds.size.width))
self.movScrollToFrame(contentOffset: contentOffset)
}
#IBAction func pageNextBtnTapped(_ sender: Any) {
isHorizontalSCrolling = true
scrollMainHolderView.delegate = self
let scrollBounds = self.scrollMainHolderView.bounds
let contentOffset = CGFloat(floor(self.scrollMainHolderView.contentOffset.x + scrollBounds.size.width))
self.movScrollToFrame(contentOffset: contentOffset)
}
From what i understand from the comments is that you want to stop horizontal scrolling. That is actually pretty straight forward.
You can stop horizontal scrolling or vertical scrolling in the ScrollViewDelegate Method. Here it is how,
Setting the contentOffset.x value to zero will prevent the scrollview scroll in horizontal direction.
func scrollViewDidScroll(_ scrollView: UIScrollView) {
sender.contentOffset.x = 0.0
}
I am using a viewController to handle two ChildViewControllers, each containing a UITableView. Would it be possible to set the the position y of a SubView of viewController (e.g. a UILabel) depending on the scrollView.contentOffset of the current ChildViewController?
It works fine with its own subviews already,..
func scrollViewDidScroll(_ scrollView: UIScrollView) {
self.testConstt.constant = scrollView.contentOffset.y
}
Thanks for helping!
Just observe the correct scroll view using a conditional statement. I assume the scroll views of the children are table views, so you may do something like this:
let tableViewA = UITableView(...)
let tableViewB = UITableView(...)
let someScrollView = UIScrollView()
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if scrollView == tableViewA {
// observe a specific table view's scroll view and do something
} else if scrollView == someScrollView {
// observe a specific scroll view and do something
}
}
Remember, UITableView is a subclass of UIScrollView so they can be treated the same in scrollViewDidScroll(_ scrollView:).
I am making an iOS app which contains a detailed text under UITextView.I added a share button in the view beside a UITextView. I want the button to be hidden when the user starts scrolling and return back when scrolling is not detected.
What I did was this...
if(detailDescriptionTextView.isScrollEnabled == true)
{my button.isHidden = true }
The above code hides the button entirely since scrollview is on by default. So what shall I do?
As of UITextView inherits from UIScrollView you can use UIScrollViewDelegate method for this purpose. You need to just set the delegate of UITextView and implement below methods of UIScrollViewDelegate and you all set to go.
func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView) {
if yourTextView = scrollView {
yourButton.isHidden = true
}
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
if yourTextView = scrollView {
yourButton.isHidden = false
}
}
UITextView is a UIScrollView subclass. Therefore the UIScrollView delegate method you are using is also available when using UITextView.
you should use scrollViewDidScroll to detect scroll
func scrollViewDidScroll(_ scrollView: UIScrollView) {
button.isHidden = true
}
You can use scrollViewDidEndDecelerating . It will call when textView stop scrolling.
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
button.isHidden = false
}
I have a UICollectionViewController (embedded in a NavigationViewController), which scrolls a UICollectionView horizontally via paging through some sections:
if let flowLayout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout {
flowLayout.scrollDirection = .horizontal
flowLayout.minimumLineSpacing = 0
}
collectionView?.backgroundColor = .white
collectionView?.register(FeedCell.self, forCellWithReuseIdentifier: cellId)
//collectionView?.contentInset = UIEdgeInsetsMake(MenuBar.height, 0, 0, 0)
//collectionView?.scrollIndicatorInsets = UIEdgeInsetsMake(MenuBar.height, 0, 0, 0)
collectionView?.isPagingEnabled = true
Each section or page contains another UICollectionView (inside the FeedCell) which scrolls vertically through some UICollectionViewCells.
Inside the UICollectionViewController, I set
navigationController?.hidesBarsOnSwipe = true
which was working as long as there was only one UICollectionView. But since the (Top)CollectionView is scrolling horizontally and is containing additional (Sub)CollectionView, that are scrolling vertically, this feature seems not to work any longer.
I would like the NavigationBar to hide when the (Sub)CollectionView is scrolling vertically. Is there any hack to achieve this?
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if let navigationBar = self.navigationController?.navigationBar {
let clampedYOffset = contentOffset.y <= 0 ? 0 : -contentOffset.y
navigationBar.transform = CGAffineTransform(translationX: 0, y: clampedYOffset)
self.additionalSafeAreaInsets.top = clampedYOffset
}
}
This is a solution that I came up with. Basically modify the transform of the NavigationBar to move it out the way when necessary. I also modify the additionalSafeAreaInset, as this will automatically shift all your content up to fill the space left by the navigation bar.
This function will be called as part of the UICollectionViewDelegate protocol.
This was suitable for my purposes - but if you want the navigation bar to appear when the user rapidly scrolls up (like in safari) you will have to add some additional logic.
Hope this helps!
You can try the code like this (Swift 3.0):
extension ViewController: UICollectionViewDelegate {
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let isScrollingUp = scrollView.contentOffset.y - lastY > 0
lastY = scrollView.contentOffset.y
self.navigationController?.setNavigationBarHidden(isScrollingUp, animated: true)
}
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
if !decelerate {
// show navigation bar ?
}
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
// show navigationBar ?
}
}