How to implement scroll-then-fix items in iOS? - ios

I have a problem but I don't know what keyword should I use to indicate this issue.. so I named it scroll-then-fix.
What I want to do is make element behave as below
It scrolls up and down with other contents
When scrolling up, when it reaches the top of the screen, it does not go up anymore and stays at the top, while other contents continuously scrolls up.
For example, when you click any app in app store, the segmented control in the middle act like this.
I have no idea and I don't know what keyword I should search in google to find any information (I don't even know what this is called).
Please help me or give me a hint.
Thanks in advance.

How I would do that effect from the app store is that I would have a UITableView with 2 sections. The first would contain no section header and only one cell (containing the app icon, app name and "GET" button), and the second section would have a section header (containing the segmented control) which will stick to the upper side of the screen. The second section cells would contain the app screenshots, description etc.

Plain style UITableView's header behaves like that. Try it.

Related

Swipe to delete on entire section in UITableView

I have a UITableView which has a variable amount of sections and every section has a variable amount of rows. Every section contains a section header, a section footer and the rows for that section. They are shown and displayed inside a container. Everything up until now works as expected. To demonstrate what my UITableView currently looks like:
I am now trying to implement the possibility to swipe left on the entire section, so that the header of the section, the rows inside this section and the footer of this section move to the left and display another UIView. I am capable of swiping the cells separately, but enabling this feature on the entire sections have caused headaches for the past two days. This is what I would like to achieve:
I have thought about implementing UIGestureRecognizers but I am afraid they might conflict with my UITableView. Also, I started implementing it, but I would not know how to move solely the section on which was swiped to the left.
Then I thought I could maybe implement a UIScrollView as container for each section. How I would accomplish this is still a mystery to me, but it seems like a possible solution if this could be done.
Furthermore I am out of ideas and stuck on how this should be done. It's something I have not found on the Internet so far - at least no working examples of some kind so I have zero inspiration on how to achieve the effect.
I therefor would like to ask if somebody has an idea of how this could work and what I have to keep in mind when implementing this. Every clue pointing me towards a working solution is gratefully appreciated!
EDIT: I have already seen the possible duplicate this afternoon. However, the suggestion there shows touchesBegan() on the header, which does not work in my case as I need the entire section to be "draggable".
I think one way you can implement this is with a vertical stackview containing views that contains a tableview and the trash icon. When a user swipes left on the tableview header, it will show the hidden trash icon in the view. I would think that each tableview only has one section so it will be easier to keep track of which "section" the user has swiped.
I have currently managed to arrange a similar solution. I take the rectangle of the section with rect(forSection:int), add a UIPanGestureRecognizer in which I add a UIView on top of the UITableView if touches began, I calculate the location of the finger and let the cudtom UIView follow. When a certain point (100 from left edge of the UITableView) is reached, the section gets removed with deleteSections(indexSet:with:).
This works. It does the job, but it adds an overlay to the section rather than pushing it to the left.
Therefor I am asking of someone knows if there is any way of setting the offset for one specific section or for an area of a UIView, so I can offset the rectangle of the section. I have been able to setContentOffset on the entire UITableView but this is not the desired result.
If there is no way to do this, I would consider keeping the solution I have now or maybe implement a snapshot feature which takes a screenshot and crops the rect of the frame, adding this UIImage to the custom view to simulate the section. But that would be tricky. Any ideas for this idea are also welcome.

UITableView scroll like in Yummly app

I'm looking for a way to implement scrolling in UITableView similar to what is done in Yummly app, or like google play or whatsapp header, in which the top image sort of hangs or sticks, while the bottom content scrolls over it, until the content catches up with it.
Meaning, make it so that the cells will not scroll up together, but stick a little, like the section headers do, accept that with section headers the content scrolls below the section, and not on top of it.
Does anyone has any idea how this can be implemented in objective-c?
Thanks!
I have checked yummly and found the good solution for you i have used this for some of my application/demo as well.
https://github.com/destin-m/parallax_tableview
Please let me know if you require any other modification as well.
Regards.

Submenus in UITableView

I am building an app that uses a side menu, within that side menu is a UITableView displaying some text. When you click on one of those, it takes you to another ViewController. I searched the internet for it but didn't find something useful. My question is: how to make a "submenu" inside the tableview, so that when you click on it, it needs to dropdown and show more options.
I don't have any idea how to do this, so a little help would be really appreciated!
Thanks
You may use sections for building a submenu structure. You can overwrite viewForHeaderInSection for each section for which you don't want to display the section header and return an empty UIView object with a size of (0.0, 0.0) or even null. (I never tried returning null/nil myself.)
For each menu on the highest level you have exactly one corresponding section and each of them has just one row. They may or may not have header views.
For the menu that you want to display as submenu you set the header view of the related section accordingly and then have one row for each item of the submenu.
Unfortunately this allows for a 2-level menu heirachry only. But on the upside everything you need is already sort of build-in into cocoa touch.
Perhaps this could possibly help you achieve what you are looking for:
Expandable Sections UITableView IndexPath SWIFT
You may have to have a good look through the code but it should set you on the right track.

change order of list in tableview by clicking on whole cell

I currently have a 'tableview' with a list of items and I have enabled an 'edit' button to go into edit mode which shows the 'reordering controls' on the right side of the screen. I have also enabled 'canMoveRowAtIndexPath' and 'moveRowAtIndexPath:toIndexPath' to allow for the user to hold and drag the reorder control on the right side to reorder the list and have the data model update.
Is there a way to enable this but allow the user to click and drag the whole cell and not only the 'reorder controller'? Essentially I want to enlarge the area of the reorder controller's function to the whole cell when tableview is in editing mode.
for anyone else who is interested, I used this guide to get it working: b2cloud
the starting code template does not work as optimally since it has nib files and I'm using Xcode5 but it still works. The important code is all in the actualy tutorial as he lists how to set the reorder control to the size of the size via inserting it as a subview.
There is a way to enable this that allow the user to click and drag the whole cell and not only the 'reorder controller'!
Please check it out: https://github.com/FlorianMielke/FMMoveTableView
This might be helpful to you, Sir :)

Giving a grouped UITableView "First Crack" at touches when using a section header view containing a control

I am using a standard grouped style UITableView that returns a custom header view for one of it's sections (using the tableView's delegate method viewForHeaderInSection:). The view that is returned for the section header contains a control. It displays an image and is a control so it can tapped to let the user change the image. My desired UI is similar to the photo for a contact in the Apple Contacts app (a floating imageView-like control in a grouped style table).
The problem I'd like to solve is that touches on the tableView section header go straight to the control. I'd like the table to get a chance to determine if the touch is actually the beginning of a scroll gesture. If not, then the table can pass the event to the section header view for processing.
This is how all the rows in the table behave since I have "delaysContentTouches" for the table on. I suspect the problem is because the section header view is not in the table's view hierarchy. So everything is probably working per spec. just not the way I want.
I want the section header view to behave regarding touches just like rows do (table gets first chance to process).
BTW I am not placing this control in a table row (which would solve the problem) because I want the rounded rect grouped style for all table rows, but not for this one UI element. This control is in the center of my table (header for section 1) which is why I want drags on it to scroll the table.
OK, so apparently this is simulator issue only. On a device my tableView gets the first chance at the event. So I guess I need to listen to the Apple mantra of "always test on an actual device" before posting to StackOverflow. Sorry friends... may my error be helpful to others who, like me, probably spend too much time in the simulator.

Resources