I have added header with custom view to my TableView. It is used as a search bar, I set contentOffset so it is hidden in beginning.
Everything works as expected but I am wondering if there is any way to make it harder to pull down? (should be stickier) Now it opens with just regular scrolling which is too easy.
EDIT: ScrollViewDidScroll Code
if tableView.contentOffset.y < 80 && tableView.contentOffset.y > 40 {
subscriptionsTableView.contentOffset.y += 0.23
print("Content offset")
print(tableView.contentOffset.y)
}
I had a similiar problem and solved in quite easily in the end. I set the table view top inset to the height of the header
tableView.contentInset.top = -1 * headerView.frame.size.height
This makes the header be shown "off screen", the user is now not being able to scroll to it. I added a code to change the top inset to 0, showing the header, when the user scrolls to the top over the header
func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView) {
if scrollView.contentOffset.y < 0 {
UIView.animate(withDuration: 0.25, animations: {
self.tableView.contentInset.top = 0
})
} else if scrollView.contentOffset.y > headerView.frame.size.height {
UIView.animate(withDuration: 0.25, animations: {
self.searchBar.resignFirstResponder()
self.tableView.contentInset.top = -1 * self.headerView.frame.size.height
})
}
}
I also set the top inset back when the user scrolls the table view.
My 2 cents: observe the contentOffset property of the table view (or implement the scrollViewDidScroll: method) and adjust the position of the view you want to stick.
Here is a reference to something that uses the same principle:
make UIView in UIScrollView stick to the top when scrolled up
Is it possible to add fixed content to a UIScrollView?
Make static UIView sticky when UIScrollView is scrolling
Related
I am trying to hide the search field by default in my app like seen in multiple Apple apps.
(Image credit: OS X Daily http://osxdaily.com/2017/07/27/search-notes-ios/)
Right now, the search field is on top of the contained view and it works fine. I could set a default offset to hide the search bar, but it won't prevent being shown when the scroll content size length is smaller than the scrollview.
By the way, I am NOT using a UITableView inside the UIScrollView, it's a custom view with subviews.
Hook the height constraint of you custom search view as IBOutlet and make this to hide it
self.searHeightcon.constant = 0
self.view.layoutIfNeeded()
Show
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if(scrollView.contentOffset.y == 0)
{
self.searHeightcon.constant = 50
}
else
{
self.searHeightcon.constant = 0
}
self.view.layoutIfNeeded()
}
If you always set the contentHeight to be same or larger than the scroll view’s height you can hide it by starting at an offset.
IMPORTANT: My problem is not that I'm implementing didDeelectRowAt instead of didSelectRowAt. Already checked that :)
I have a UITableView that is shown on part of the screen in a modally presented view controller. When the user is dragging it resizes to full screen and back to some defined min height. I'm doing this by implementing the following methods from the UIScrollViewDelegate:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
guard !scrollView.isDecelerating else { return }
let contentOffset = scrollView.contentOffset.y
if tableViewHeightConstraint.constant < view.frame.height && contentOffset > 0.0 {
tableViewHeightConstraint.constant = min(contentOffset + tableViewHeightConstraint.constant, view.frame.height)
scrollView.contentOffset.y = 0.0
return
}
if tableViewHeightConstraint.constant > minViewHeight && contentOffset < 0.0 {
tableViewHeightConstraint.constant = max(tableViewHeightConstraint.constant + contentOffset, minViewHeight)
scrollView.contentOffset.y = 0.0
}
}
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
// Here I have some calculations if depending the dragging end position and the velocity the end size should be full screen or `minViewHeight`
// After calculating what the end size should be I'm animating the size change
heightConstraint.constant = newConstraintHeight
UIView.animate(withDuration: TimeInterval(calculatedAnimationDuration), delay: 0.0, options: .curveEaseOut, animations: {
self.view.layoutIfNeeded()
}, completion: nil)
}
Everything about the resizing and the scrolling works fine, but there is a problem that I cannot figure out why it's happening. It's the following:
When the view controller with the table view is shown for the first time with the min height and I tap on a cell it works fine.
If I drag to expand the table view to full screen height and tap on a cell, again it works fine.
If I drag to expand the table view to full screen height and then drag again to return it to the min height and then tap on a cell, nothing is happening, no UIScrollViewDelegate or UITableViewDelegate method is called at all. If I tap once more on a cell everything works fine.
One thing that I noticed is that after dragging the table view back to the min height the scroll indicator does not hide. On the first tap it hides, and on the second tap the didSelectRowAt is called.
UPDATE:
Here is a test repo for the problem: https://github.com/nikmin/DragTest
Please don't mind if the dragging doesn't work perfectly, I just put something so anyone can try it out, but I think the problem is easily reproducible.
Also one more thing... If you drag from full size all the way to the bottom so the table view reaches min height and you continue dragging so the content offset is < 0 and the you release, the problem is not happening.
Drag TableView to return it to the min height and then tap on a cell, nothing is happening because:
When you drag to expand the table view to full screen, scrollView.isDecelerating is true. So the code inside scrollViewDidScroll method will run.
But when you drag TableView to return it to the min height, scrollViewDidScroll is false. So the code inside scrollViewDidScroll method won't run. It's make the first tap do nothing.
Simply remove guard !scrollView.isDecelerating else { return } from scrollViewDidScroll. You will tap cell normally after drag TableView down.
But you need change logic a little, animation will go wrong after remove above line.
Hope it can help you ;)
After trying to figure out a solution to this without result, we (me and a UX designer) decided to change the behaviour a bit.
So in the real scenario in the app I'm implementing this in, the table view is inside another view that has also a title label and some other views above the table view. We decided to add a pan gesture recognizer to this root view and disable the scrolling of the table view when the view has the min size. This way the pan gesture recognizer will take over whenever the user tries to drag anywhere inside the view (including the table view), so the expanding of the view works. And the tap in the cell still works.
When the view has the max height the table view scroll is enabled so the user can scroll. The downside of this approach is that when the user scrolls to the top of the table view and continues scrolling the view will not decrease the size. But he still has the option to drag it down by dragging any of the views above the table view. When dragging down in this way, only the size of the table view changes, and the content offset isn't, which is the root of the problem (changing both at the same time).
It looks like incorrectly set content offset. The first touch cancels incorrect position(unscroll), this is why it is not registered. It might be better if we got an access to the full code to check it, because I can't tell you where exactly the problem lies, but I guess it is in method scrollViewDidScroll.
I know that the sticky header is not a new thing to ask advice on, but still...
I am trying to create a sticky header (UIImageView) and the scrolling part (UIScrollView with a UIStackView in it)
Im using the scrollViewDidScroll method from the UIScrolLViewDelegate. The only problem is, that when I scroll the view up, I am not only decreasing the height of the header view, but also scrolling the content of the stack view. So when I scroll further up, you still can see the header view, but the top content of the scroll view disappears by scrolling.
Can this be solved somehow that when I scroll up, the content of the stack view is scrolling up and not also disappearing? And starts disappearing when the header view disappears?
Thank you
The easiest way to do this is to use a table view. Your sticky header is the table's first section header, while the scrolling part is the second section.
If you can't use a table, for whatever reason, then you have to mess around with the scroll view's content offset. When the contentOffset.y is growing (but not beyond your header's height), reset it to 0 and decrease the header's height accordingly. After the header's height is 0, stop messing with contentOffset - until you come back and the contentOffset.y wants to go into negatives.
P.S. the second solution requires you to enable bouncing on the scroll view. Otherwise, the header will be hidden, but won't show again (unless you reset the controller)
L.E. Some (old) code for my second solution:
let headerHeight = self.headerView.height
self.scrollHandler = {
var offset = self.detailsTable.contentOffset
self.headerTopConstraint.constant -= offset.y
if self.headerTopConstraint.constant < -headerHeight {
self.headerTopConstraint.constant = -headerHeight
let size = self.detailsTable.contentSize
if offset.y + self.detailsTable.frame.height > size.height {
offset.y = size.height - self.detailsTable.frame.height
}
self.detailsTable.contentOffset = offset
}
else {
if self.headerTopConstraint.constant > 0 {
self.headerTopConstraint.constant = 0
}
self.detailsTable.contentOffset = CGPointZero
}
}
Please note that my code moved the header upwards to hide it. As far as I understood, you just have to change the header's height (by the same amount I move it upwards).
I set the content size so vertical scrolling becomes activated but I only want the user to be able to scroll north and not south. Any ideas on how I can accomplish this?
//set high greater than view
myScroll.contentSize = CGSize(width: myView.view.frame.width,height: myView.view.frame.height + 190)
I only want the ability to scroll up and disable the ability to scroll down which is the default direction of the scrollview
You can set the content offset of the scroll view to the bottom. i.e.,
myScroll.contentOffset = CGPoint(x: 0,y: 190) // Here 190 is the same value that represent the height increase done in contentSize.
Make a subclass of UIScrollView. Override layoutSubviews to make sure contentOffset.y only increases, except when it's beyond the end of the content range, so the scroll view can bounce at the bottom.
class MyScrollView: UIScrollView {
var priorOffset = CGPoint.zero
override func layoutSubviews() {
var offset = contentOffset
if offset.y < priorOffset.y {
let yMax = contentSize.height - bounds.height
if offset.y < yMax {
offset.y = priorOffset.y
contentOffset = offset
}
}
priorOffset = offset
super.layoutSubviews()
}
}
Result:
select your Scrollview
select identity inspector
set user define attributes (see image)
in image first 435 vertical scrolling & second 116 is horizontal scroll
Note : set your own scrolling
You can set the direction of UIPanGestureRecognizer which is attached to your UIScrollView.
Check out some popular question which has an up-to-date answer, for example this one.
Or just go with pod 'UIPanGestureRecognizerDirection'
I have a UIScrollView A (in fact a UICollectionView) filling the screen inside a UINavigationController B. The controller B's adjustScrollViewInsets is set to true.
I want to hide the navigation bar when user scrolls up, and show it when down. Following is my code:
func scrollViewDidScroll(scrollView: UIScrollView) {
if (self.lastContentOffset < scrollView.contentSize.height - scrollView.frame.size.height && self.lastContentOffset > scrollView.contentOffset.y) {
// dragging down
if self.navigationController!.navigationBarHidden {
self.navigationController?.setNavigationBarHidden(false, animated: true)
}
} else if (self.lastContentOffset > 0 && self.lastContentOffset < scrollView.contentOffset.y) {
// dragging up
if !self.navigationController!.navigationBarHidden {
self.navigationController?.setNavigationBarHidden(true, animated: true)
}
}
self.lastContentOffset = scrollView.contentOffset.y
}
Now the problem is, since the screen of iPhone 6+ is too large, the contentSize of the scroll view A is smaller than its frame(i.e. the full screen frame) when the navigation bar is hidden. In such circumstance, the scroll view will not be scrollable, and the navigation bar will never be back again.
I want to manually maintain the height of the contentSize of A to screen at least height + 1, but don't know how to do this. Could anyone help? Or provide a better solution?
BTW, I am using iOS 8 and Swift.
Lets say you need to keep the minimum content size of scroll view to 100(of course this will be dynamic and vary according to device)
NSInteger minScrollViewContentHeight = 100;
After populating the scroll view with content, you need to check if the scroll view's content size is less than minimum required scroll views content size. If its lesser than the required content size than you need to set the minimum content size of the scroll view as follows -
if(scrollView.contentSize.height < minScrollViewContentHeight)
[scrollView setContentSize:CGSizeMake(scrollView.frame.size.width, minScrollViewContentHeight)];
Off the top of my head (I'm on a phone), contentSize is not read-only I think.
How about changing it manually to the desired amount depending on the circumstances of scrolling direction etc?
Something like:
IF navbar is hidden THEN contentSize = whatever
An option would be to use the appearance and disappearance of cells to trigger the show/hide.
Use the delegate methods collectionView:willDisplayCell:forItemAtIndexPath: and collectionView:didEndDisplayingCell:forItemAtIndexPath: to detect movement. You can work out the direction from the index change of the cells being shown or removed. If you cannot scroll off screen then nothing happens.
You have to change no offset (which is actually just scrolling position), but contentSize itself. That means, that when you hide navigation bar, increase contentSize by navigation height (don't remember numbers) and when you show navigation bar, decrease contentSize. Or... Use AutoLayout and layoutIfNeeded method after showing/hiding navigation bar.
I stumbled upon a similar problem. I needed a minimum scrollable area for a tableview i was using.
ScrollView might be a bit easier since you can directly modify the contentView size.
If you're using autoLayout, try adding equal heights constraint between the contentView and the scrollView itself. Something along the lines of contentView.height = scrollView.height + scrollMin;
For my tableView i had to subclass UITableView and override the contentSize setter.
#define MIN_SCROLL 60
- (void)setContentSize:(CGSize)contentSize {
//take insets into account
UIEdgeInsets insets = self.contentInset;
CGFloat minHeight = self.frame.size.height - insets.top - insets.bottom + MIN_SCROLL;
if(contentSize.height < minHeight) {
contentSize.height = minHeight;
}
[super setContentSize:contentSize];
}