right now I'm trying to move up and move down an UIView based on roll up or down in UITableView. So, if I rolled up the view, which means indexPath.row will keep incremented; the view will appear slide down until certain position and stopped. Then when I rolled down the table view, which means indexPath.row, decremented; the view will disappear by slide up outside the display view.
Do anyone have any idea what I need to code? Right now I'm just simply able to hide and unhide the view. I need the code for animate it slide up and down.
mark=indexPath.row;
flag=flag+1;
if (flag-mark>1) {
postBox.hidden=NO;
flag=indexPath.row;
}
else
postBox.hidden=YES;
Thanks in advance for your help ^^
If you want to move the view according to the movement of the UITableView, you can calculate the content offset of the UITableView and apply it to your moving view. Declare a ivar of type CGFloat named lastOffset.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat distance = scrollView.contentOffset.y - lastOffset;
lastOffset = scrollView.contentOffset.y;
[UIView animateWithDuration:0.2 animations:^{
self.movingView.frame = CGRectOffset(self.movingView.frame, 0.0f, distance);
}];
}
Related
So I have a UIViewController and I have a UIScrollView inside of it, which has some UI elements.
I want the user to be able to drag the UIScrollView up and down, but when it drags past a certain threshold, I want it to animate off the screen. There needs to be some springiness to it though. I tried using -(void)scrollViewDidScroll: but couldn't seem to get it right. Any thoughts?
In scroll view delegate method -(void)scrollViewDidScroll:(UIScrollView *)scrollView; observe scrollView.contentOffset.y and trigger animation when it reaches expected y position.
for example:
CGFloat yTranslation = -200.f; // Value you want to shift
[UIView animateWithDuration:0.35 animations:^{
scrollView.transform = CGAffineTransformMakeTranslation(0, yTranslation);
} completion:^(BOOL finished) {
// code after completion
}];
There is a button at the bottom of my view controller. When the user scrolls down the button has to be attached to the scrollview at certain height.
I need to attach a button to the scrollview, immediately when the contentOffset.y reaches a particular value. -(void) scrollviewDidScroll doesn't help me as there might be a jump in contentOffset when the user is scrolling fast. Any leads on this are helpful.
Also, whenever I add a subview to the scrollview, -(void) viewDidLayoutSubviews is called. Which in turn sets the contentOffset to {0,0}. How can I achieve the functionality I need?
I needed to do the same thing with a UITableView and for me using scrollViewDidScroll worked.
I created a view called staticBar and added it as a subview of the tableView, but I had to rearrange the tableview subviews for it to appear in the right place. I don't have my code in front of me, but in -scrollViewDidScroll: it looked something like this:
- (void)scrollViewDidScroll:(UIScrollView*)scrollView
{
CGFloat staticBarAdjustedY = _staticBarY - scrollView.contentOffset.y;
CGFloat scrollViewYFloor = scrollView.frame.size.height - _staticBar.frame.size.height;
// This way maximum Y the view can have is at the base of the scrollView
CGFloat newY = MIN( staticBarAdjustedY, scrollViewYFloor);
_staticBar.frame = (CGRect){ { _staticBar.frame.origin.x, newY}, _staticBar.frame.size}
}
I will check my code later today and add more details here.
Also, you said the scrollviewDidScroll has jumps in contentOffset, but it's worth mentioning that these jumps are the same that the scrollView uses to scroll its own view. So it's not like you are "losing" frames on this delegate method.
Hope it helps.
PS: So, here is the rest of my code.
//I place my custom view as a subview of the tableView below it's last subview
//The last subview is for scroll indicators.
WTButtonsBar *buttonBar = [[WTButtonsBar alloc] init];
[self.tableView insertSubview:buttonBar belowSubview:self.tableView.subviews.lastObject];
In scrollViewDidScroll:
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
//In my app I needed my view to stick to the top of the screen
//thats why I use MAX here
//self.buttonsBarOriginalY is the view's position in the scrollView when it isn't attached to the top.
CGFloat newY = MAX(scrollView.contentOffset.y, self.buttonsBarOriginalY)
[_buttonsBar setFrame:(CGRect){{0, newY}, _buttonsBar.frame.size}];
}
Basically I have a uiscrollview. The uiscrollview scrolls down when i push a certain button. However once the content offset has been set it will not allow me to scroll the uiscrollview back to the to.
For example...
If I set the content off set to 100 and animated:yes. The scrollview will scroll to that position and allow me to continue to scroll down the page but when trying to scroll up you pull up and see the upper par of the view but it then bounces back down.
Here is my code:
Firstly when the button is pressed I call the void function:
[self downExecute:scroller];
Secondly I run the void statement which set's my content off set...
- (void)downExecute:(id)sender {
NSLog(#"scroll down");
CGFloat currentOffset = scroller.contentOffset.y;
CGFloat newOffset;
newOffset = currentOffset + 100;
[UIScrollView animateWithDuration:0.3 animations:^(void) {
[scroller setContentOffset:CGPointMake(0.0,newOffset)];
}completion:^(BOOL finished) {
}];
}
Any Help would be greatly appreciated...
If your intent is to allow normal scrolling after you've repositioned the content, you could use scrollRectToVisible:animated: instead of changing the content offset.
try something like this to allow scrolling:
scroller.alwaysBounceVertical = YES;
and to manage duration of scrolling use this:
scroller.viewForBaselineLayout.layer.speed = 1.0f; // 1.0f is default
[scroller setContentOffset:(some CGPoint) animated:YES];
Using storyboard, I have placed an imageView as my tableView's headerView inside a ViewController.
This is how my storyboard is set up:
Depending on what data the user is viewing, the viewController will either show or hide the headerView. My question is, that when the headerView is visible and the user drags down on the tableView, how can I have the imageView stick to both the navigationBar and the tableView as it resizes to cover the space in between?
This is what it currently does:
But this is what I'm going for:
Any help would be greatly appreciated. I've looked at parallax libraries, but none support sectionTitles, and I'm not necessarily going for the parallax effect either. When the user scrolls up, I want it to bounce back to the regularView and not hide the headerView. Thanks!
UPDATE:
I have followed the advice posted by Dany below and have done the
following:
-(void)scrollViewDidScroll:(UIScrollView*)scrollView {
CGRect initialFrame = CGRectMake(0, 0, 320, 160);
if (scrollView.contentOffset.y < 0) {
initialFrame.size.height =! scrollView.contentOffset.y;
childHeaderView.frame = initialFrame;
} }
childHeaderView is an imageView and for some reason when I drag down,
the image moves up (like half of it behind the navBar) and doesn't return. Any advice would be
greatly appreciated!! Thanks!
I recently posted a blog post about accomplishing this using constraints which might help, turns out it was quite straight forward.
Here is the link: Creating parallax effect on UIScrollView using constraints
First of all you should remove the UIImageView from the header and add it as a simple UIImageView on top of the UITableView then since UITableViewDelegate protocol conforms to UIScrollViewDelegate protocol you can implement the scrollViewDidScroll: method to check when the tableView is scrolling down and has a bouncing effect. something like this:
-(void)someInitMethod {
initialFrame = yourHeaderView.frame;
}
-(void)scrollViewDidScroll:(UIScrollView*)scrollView {
if(scrollView.contentOffset.y < 0) {
initialFrame.size.height -= scrollView.contentOffset.y;
yourHeaderView.frame = initialFrame;
}
}
Also make sure you set the proper contentMode for your UIImageView. Also I think this implementation will create a bouncing effect but I'm not sure because I can't test it right now but I think this is a good start point for you.
This is how I achieved it, in my case I was using a map view up the top:
Create a View Controller in storyboard.
Add a Table View and set the constraints to 0 from all sides.
Add a Map View (or whatever view) below the Table View so that it will get rendered over the top. It will look like it is overlapping.
Add constraints to the top left and right.
In the view controller viewDidLoad add the following: tableView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0) where 200 is the height of the View. This will push the contents of the table view downwards.
In the view controller add the following code, which resizes the view based on the scrolling:
func scrollViewDidScroll(scrollView: UIScrollView) {
var scrollOffset = scrollView.contentOffset.y
var headerFrame = mapView.frame
if (scrollOffset < 0) {
// Adjust map
headerFrame = CGRect(x: mapView.frame.origin.x,
y: mapView.frame.origin.y,
width: mapView.frame.size.width,
height: -scrollOffset)
} else {
// Adjust map
headerFrame = CGRect(x: mapView.frame.origin.x,
y: mapView.frame.origin.y,
width: mapView.frame.size.width,
height: 0)
}
mapView.frame = headerFrame
}
If I could set contentInset from the storyboard it would be even more pretty
Please have a look at this https://github.com/matteogobbi/MGSpotyViewController which implements the same effect as per your requirement.
The earlier solutions on this page gave me some trouble when I needed this to work along with section titles and index bar, so I came up with the following alternative myself. Please note; I don't use autolayout in my project and I've only tested this on iOS9+;
In your project's storyboard:
Create a UITableView within a UIViewController (or try it with a UITableViewController).
Drop a UIView at the top (but within) the UITableView, so it becomes a table header above the first cell.
Give this header view a desired height (like 200px for example) and set the background color to "Clear Color". The Clear Color is important, the view needs to be see-through.
Drop a 2nd UIView within the table header UIView and make it the same size as it's parent. This will be the actual header, so feel free to give it any color, setup an image view or other content.
Connect this 2nd UIView to your UIViewController IBOutlet, I named it "headerView" in my case.
Next, go to your UIViewController.m:
- (void)viewDidLoad
{
[super viewDidLoad];
// Remove view from table header and place it in the background instead.
[self.headerView removeFromSuperview];
UIView *backgroundView = [UIView new];
[backgroundView addSubview:self.headerView];
self.tableView.backgroundView = backgroundView;
}
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
/* Set initialScrollOffset ivar to start offset, because in my case
the scroll offset was affected by the statusbar + navigation bar heights
and the view controller's "extend edges under top bars" option. */
initialScrollOffset = self.tableView.contentOffset.y;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
/* Modify headerView height only if the table content gets pulled
beyond initial offset. */
if (scrollView.contentOffset.y < initialScrollOffset) {
CGRect frame = self.headerView.frame;
frame.size.height = self.tableView.tableHeaderView.frame.size.height + -scrollView.contentOffset.y;
self.headerView.frame = frame;
}
}
I needed this implementation only for a stretching header with background color and labels. It should be easy to add a UIImageView to this header though.
Also, steps 1 to 5 are completely optional of course. You can programmatically create your header view or use a XIB instead. As long as you make sure the table has a Clear Colored header view set with the same height as your desired header because this serves as a spacer to keep your cells and section titles in line.
EDIT:
I found an even cleaner way to accomplish this;
Build up your table header in interface builder as described above: 1 UIView as container with a 2nd UIView embedded within.
Skip the viewDidLoad code above, there is no need to pull the UIView out of it's container and we won't need to set it as a table background.
Change the scrollViewDidScroll: method to this:
UIViewController.m:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (scrollView.contentOffset.y < initialScrollOffset) {
CGRect frame = self.headerView.frame;
frame.size.height = self.tableView.tableHeaderView.frame.size.height - scrollView.contentOffset.y;
frame.origin.y = self.tableView.tableHeaderView.frame.origin.y + scrollView.contentOffset.y;
self.headerView.frame = frame;
}
}
That's it. Only visual difference from the other solution is that the contents will now scroll up along with the rest of the cells instead of being overlapped by them.
I don't know, if this would help you or not ..
Set your scroll delegate to self.
and then implement this:
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
float scrollViewHeight = scrollView.frame.size.height;
float scrollContentSizeHeight = scrollView.contentSize.height;
float scrollOffset = scrollView.contentOffset.y;
if (scrollOffset == 0)
{
// then we are at the top
}
else if (scrollOffset + scrollViewHeight == scrollContentSizeHeight)
{
// then we are at the end
// Do what you need here
}
}
Forgive me to the obtuse title, as I'm unsure how to describe this question.
Recently many iOS apps utilise a scrolling UI design pattern which helps to maximise screen real-estate, typically hiding the header when the user scrolls downwards.
For example, Instragram's main view has the Instragram header at the top. Scrolling upwards on this view keeps the header fixed at the top, and the view bounces back normally to the top of the content. But scroll down and the header acts as part of the content, making way for an extra 44 points of vertical space.
Its probably that I haven't done much iOS work in a while, but I can't easily figure out how best to impliment this? Apologies for the terrible description.
If the header stays put no matter what, use a separate view on top of the scroll view.
If you use UITableView, you can use section headers.
EDIT Use this code:
- (void)scrollViewDidScroll:(UIScrollView*) scrollView
{
CGPoint offset = scrollView.contentOffset;
CGRect headerFrame = _headerView.frame;
if(offset.y > 0){
headerFrame.origin.y = offset.y;
}
else{
headerFrame.origin.y = 0.0;
}
[_headerView setFrame:headerFrame];
}
(Assumes _headerView is your header, sitting on top of the scroll view, not inside it. Also, both scroll view and header begin at the top of their parent view, y==0. Also, your view controller must be set up as delegate of the scroll view)
I just wrote this code from memory; haven't tested it but at most it should only need tweaking.
I tried ranReloaded's answer above but it seems that calling setFrame: on a UIScrollView stops the view from bouncing when going beyond its bounds.
Instead I set the scroll view to fit inside another UIView called scrollerWrapper. Applying the calculated origin and height to this view gives me effect I'm after plus retains the bounce behaviour.
- (void)scrollViewDidScroll:(UIScrollView*) scrollView
{
CGPoint offset = scrollView.contentOffset;
CGRect headerFrame = header.frame;
CGRect wrapperFrame = scrollerWrapper.frame;
if(offset.y > 0){
headerFrame.origin.y = -offset.y;
wrapperFrame.origin.y = MAX(0, headerFrame.size.height - offset.y);
}
else{
headerFrame.origin.y = 0.0;
wrapperFrame.origin.y = headerFrame.size.height;
}
wrapperFrame.size.height = self.view.frame.size.height - wrapperFrame.origin.y;
[header setFrame:headerFrame];
[scrollerWrapper setFrame:wrapperFrame];
}