scrollIndicatorInsets out of UITableView frame - ios

Can I make visible scrollIndicator ouf or frame tableview by
self.tableView.scrollIndicatorInsets = UIEdgeInsetsMake(0, 0, 0, -5);
tableview add on main View, and View have backgroundColor with image, I have next situation
So can I make it without enlarge width of tableView. If not I think i can easy make with method
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
But I want know, maybe it is very simple, but I don't know how to do it

Related

Scrollable UITableView as an overlay

I'm trying to replicate the following GIF from Postmates checkout - a scrollable UITableView positioned on top of a MapView. This tableview can be scrolled, with the normal bounce effect if I go too far down or up.
Currently, I have the MapView and UITableView added as sibling views to my ViewController's view. I have adjusted the frame of the table view to move it down.
CGRect rect = CGRectMake(
0.f,
200.f,
self.view.bounds.size.width,
self.view.bounds.size.height - self.navigationController.navigationBar.bounds.size.height - 200.f
);
The two main issue's I'm having are:
I cannot figure out how to drag the entire tableview down when pulling down. E.g. the grey (my tableView.backgroundColor) sticks when I scroll down. If however, I make that background clear, then when I drag up, you see the map emerging from behind the view.
My cells keep disappearing when I scroll up. I have clipsToBounds = false, and I'm not actually dequeuing cells, just creating them in my cellForRow method, but they still disappear.
I feel like this should be a straightforward layout, but I'm missing something!
I've tried adjusting the contentInset of the table view, but then the scrollbar does not align with the cells as it does in the gif and does not look nice.
We needed similar effect in our app, along with parallax in the underlying view(map here/ we had a photos gallery).
I assume you want something like shown on this blogs video here
I wrote a small blog on how to achieve this. You can find this here
Basically its just a play of contentInsets and contentOffset properties of UITableView
If this does not suits you, here my suggestion in your two main points.
Controller's View has subviews
Map View (fills complete super view)
UITableView (fills complete super view) and in code set content insets.top = kHeightOfVisibleMap
The solution was simpler than I thought, no autolayout or crazy weird tricks required.
Add a full screen table view to your controller, and insert a full screen map view behind it.
self.mapView = [[MKMapView alloc] initWithFrame:self.view.bounds];
[self.view insertSubview:self.mapView belowSubview:self.tableView];
Add a dummy view with the background color of your table view with a height of around 200 pixels, and a full width, into the tableFooterView on your table view.
CGFloat footerHeight = 200.0;
UIView *dummyView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.bounds.size.width, footerHeight)];
dummyView.backgroundColor = [UIColor whiteColor];
self.tableView.tableFooterView = dummyView;
Set the content offset of the table view to be the inverse of that footer view's height:
CGFloat footerHeight = dummyFooterView.bounds.height;
self.tableView.contentOffset = CGPointMake(0, -footerHeight);
Set the content inset of your table view to offset the footer view.
self.tableView.contentInset = UIEdgeInsetsMake(footerHeight, 0, -footerHeight, 0)
Adjust the scrollbar position, again, based on the footer's height.
self.tableView.scrollIndicatorInsets = UIEdgeInsetsMake(footerHeight, 0, 0, 0);
This will push down the tableview, ensure the scroll bars match the table view, but allow it to bounce 'up' above its initial position and will ensure the background does not peek through the bottom of the tableview.

Set UITableViewHeaderFooterView margin values (on scrolling)

I build a UITableView with section header that can expand a specific section. I am using a custom view from a .xib file for a UITableViewHeaderView. I want to set margin values of the HeaderView so that it is not full width and stays on top when scrolling down (not full height).
As you can see in the animation the view has full width - is it possible to add a margin to the header that there is some space between the HeaderView and the edge of the screen.
I want to reduce the height of the sticky header if the UITableView is scrolled - so that there is just the text of the button visible on top of the screen. I have implemented the following delegate command from UIScrollView which works fine, but it reduces the margin for the first HeaderView so that it moves behind the navigation bar (see in animation) - how can I avoid that?
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat sectionHeaderHeight = 20;
if (scrollView.contentOffset.y<=sectionHeaderHeight&&scrollView.contentOffset.y>=0) {
scrollView.contentInset = UIEdgeInsetsMake(-scrollView.contentOffset.y, 0, 0, 0);
} else if (scrollView.contentOffset.y>=sectionHeaderHeight) {
scrollView.contentInset = UIEdgeInsetsMake(-sectionHeaderHeight, 0, 0, 0);
}
}
You could put a subview with a margin in your headerview.
Setting the height is certainly possible and is done by setting the frame, but you could also make your navigation bar non-translucent, which would save you a ton of coding.
[self.navigationController.navigationBar setTranslucent:NO];
If you want to change the height, your code would look something like:
CGRect frame = header.frame;
frame.size.height = 44;
header.frame = frame;
[self.tableView setTableHeaderView:header];

IOS - Keep UIView on top of UITableView on scroll

I have a UITableView with a UIView on top. I want the UIView to stick to the top as the tableView cells scroll over it.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (self.tableView.contentOffset.y > 0) {
CGRect newframe = self.publicTopView.frame;
newframe.origin.y = -self.tableView.contentOffset.y;
self.publicTopView.frame = newframe;
NSLog(#"After: %f", self.publicTopView.frame.origin.y);
}
}
You need to set your table view header view to the view you want on top.
Add this code to you viewDidLoad
self.tableView.tableHeaderView = self.publicTopView
I'm not certain what you're trying to accomplish, but I have a guess at what is wrong. As you scroll your contentOffset will continue to change and let's say your tableView has a content size height of 1500, then your contentOffset will eventually be larger than the height of your view controllers view. Now see that you are putting that contentOffset into the origin.y of your publicTopView. So your publicTopView could possibly be moving too much, even offscreen depending on how large your tableview's content size is.

iOS UITableView HeaderView Stick to UINavigationBar on Pulldown

I am attempting to get the header view of my uitableview to stick to the bottom of the navigation bar when pulled down, and hide behind it when scrolling up.
Here is what I have for making it hide on scroll up.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat sectionHeaderHeight = 40;
if (scrollView.contentOffset.y <= sectionHeaderHeight && scrollView.contentOffset.y >= 0) {
scrollView.contentInset = UIEdgeInsetsMake(-scrollView.contentOffset.y, 0, 0, 0);
NSLog(#"contentOffset: %f contentinset: %f", scrollView.contentOffset.y, scrollView.contentInset.top);
} else if (scrollView.contentOffset.y >= sectionHeaderHeight) {
NSLog(#"1ST contentOffset: %f contentinset: %f", scrollView.contentOffset.y, scrollView.contentInset.top);
scrollView.contentInset = UIEdgeInsetsMake(-sectionHeaderHeight, 0, 0, 0);
}
}
I have been messing with insets and offset to try to get it to stick to to the navigation bar when pulling down. The image below demonstrates the behavior that is happening, and when the scrollview is pulled down, I do not want the red section to come down with it.
I've been thinking of other ways of doing this, and adding a subview that changes it's position and height during scrollViewDidScroll may be an option, but I am not sure how to assign it to the uinavigationbar instead of the scrollview. And I am not sure how to dynamically change it's height during that.
I have also found this: https://github.com/telly/TLYShyNavBar
Which does exactly what I want it to do if I disable the uinavigationbar hiding, but it has issues working with the uitableviewcontroller and opaque navigation bars.
Can anyone point me in the right direction of what I could possibly do, or if there is an existing solution that I am not aware of?
I ended up finding a working solution. This seems to work great as long as the uinavigationbar is set to be not translucent
https://github.com/ivanbruel/IBScrollViewFloatingHeader

how to expand image on UITableView like in CNN app

I have the CNN app on my iPhone.
If you open it will show "top stories", and has always a picture on the top of the table.
When we slide our finger down it expands/zooms the image.
When we slide our finger up to show more rows it does not move the image upwards at the same speed has the table rows instead the table rows move faster than the picture going off the screen.
Do you know how to do this effect?
You need UIImageView to UIScrollView contentInset and set top inset more than zero.
UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
UIImage *topImage = [UIImage imageNamed:#"photo"];
topImage.frame = CGRectMake(0, -topImage.frame.size.height, topImage.frame.size.width, topImage.frame.size.height);
[scroll addSubview:topImage];
self.contentInset = UIEdgeInsetsMake(topImage.frame.size.height, 0, 0, 0);
After that set UIScrollView's contentOffset like this
scroll.contentOffset = CGPointMake(0, topImage.frame.size.height);
So you have the UIScrollView with image inside it. Now you just need to add delegate to UIScrollView and wait for - (void)scrollViewDidScroll:(UIScrollView *)scrollView. Resize image and change contentInset right after this method called.
This advice you also can apply to UITableView similar way, or create category on UIScrollView.
I also advice you to read code of this project https://github.com/samvermette/SVPullToRefresh. It's also about UITableView and adding view to it's top side
It seems like a completely custom effect that you will have to implement yourself. To point you in the right direction, I'd first monitor contentOffset changes in the scrollViewDidScroll: messages sent by your myTableView instance, and when the contentOffset.y < 0, change the scale of your imageView via
[myImageView setValue:[NSNumber numberWithFloat:scaleIncrementAmountFloat] forKeyPath:#"transform.scale"];
My guess is that the top cell (or cells) of the tableview are transparent and there is a UIImageView behind the tableview that is resized/moved based on how the table view is scrolled.
Since the table view inherits from UIScrollView, its delegate (UITableViewDelegate) inherits from the UIScrollViewDelegate protocol which is notified when a the user scrolls the scroll view. Implement the - (void)scrollViewDidScroll:(UIScrollView *)scrollView method to receive these notifications and check the contentOffset property on the scroll view.
You may have to implement you own table view controller to build the desired UI in the interface builder.

Resources