My view have 2 UITableViews.
The bottom button slides a table view to the front of the other as you can see at the images.
The problem is that when the table view slides up, the only clickable area turns out to the red area that I have painted on the second image.
If I touch outside this area, is actually touches the table view with green cells behind this one.
I tried disabling the userInteractionEnabled while the yellow table view is expanded but nothing works.
Any ideas?
I guess you should check userInteractionEnabled on your view hierarchy. If you have it disabled on one view, all subviews won't be interactive.
For example; if you're using UIImageView, its default value is 'NO'.
Related
I have added cross button on the edge of collection view cell and half part of this button gets overlapped by the cell below it. How can I make the lower half for this button tappable?
Edit:
Is there anyway we can change the zposition for button or we can make it appear above the collection cells?
Here is a part of the AirBnB app I would like built.
Here are the 3 questions that I'm in need of advice on.
How do i get a cell on a UITableView to act like the [ MORE FILTERS ] button? The button seems to act like a UITableView cell that always stay at the top. YET, it fades away just before going out of scope. Is this even a tableViewCell?
The view [ARRIVES | DEPARTS]. What view is this on a UITableView? When the tableView is scrolled all the way to the top it connects seamlessly with the [MORE FILTERS] button making it seem like its one view. But when the tableView starts scrolling, the [MORE FILTERS] button can be seen sliding over it as it fades away.
What is the [SHOW FILTERS] button? Is it a UINavigationItem titleView property or some separate view? As the table scrolls up it can be seen attaching itself to the UINavigationBar in a fade transition. At first i thought it was a just a UINavigationBarItem, but I do not know how to add items under the title of the bar. Any clarification on what this is or how can be accomplished?
I have already looked at Apple's Example on customized UINavigationBar, but it doesnt provide any clues to accomplish this. Any help appreciated
just like you did, when I came across an application like this one which has cool UI effects and animation, I would like to analyse and if possible try to do the same effect by myself, so that I could get innovations as well as knowledges.
Let's analyse it first, at the meantime you will probably find all the answers. I just drew a graph which shows the UI hierarchy of the screen, of course this hierarchy is based on my analysis, I cannot guarantee that the hierarchy is 100% correct.
I will do a bit of explanations here. From top to bottom:
1. The Navigation Bar(Red), just a opaque navigation bar, nothing special;
2. The Show Filters View(Purple) is a view which anchors to the bottom of the Navigation Bar(Red), and it is hided when the screen launches. Please note that this view is not a subview of Arrives & Departs View(Blue). It is added directly to the view controller's root view. Which means Purple and Blue are siblings;
3. The Arrives & Departs View(Blue), nothing special;
4. The More Filters View(Green), nothing special;
5. The Table View(Orange), nothing special;
So from my analysis, Purple, Blue, Green and Orange are all siblings.
Now let's move on to the fancy UI effects and animations. The trick here is you need to observe the change of the table view's contentOffset (I recommend to do it in the scroll view's delegate - scrollViewDidScroll), and move, hide or show the views accordingly. There are four stages:
1. The initial stage, like the graph above.
2. The Blue starts fading out, Green moves up as the finger moves, Orange increases its height. (Purple is still at the same position and hided, I just removed it from the graph in order to make it clearer);
Blue totally faded out, Green starts fading out and Purple starts fading in. Orange is still doing the same - increasing its height;
Green totally faded out, Purple totally faded in and Orange increases its height to fill the screen and then anchors to the bottom of Purple.
The [MORE FILTERS] button does appear to be a cell of the UITableView. Since it is a different type of cell than the other cells containing the UIImageView and the UILabels using a different identifier you can tell the cell to fade away with an animation. Try this link for more information.
The [ARRIVES | DEPARTS] seems to be its own view. I believe that this and the tableview are both part of a UIScrollView. This is the reason that it seamlessly disappears when the [MORE FILTERS] cell scrolls up towards it.
The [SHOW FILTERS] button could just be a part of the navigation bar. When the scrollView finishes scrolling the navigation bar can be extended. However, it is also possible that the button is in a view of its own and is hidden until the scrollview finishes scrolling. Either way should be possible but I would recommend putting it in its own view rather than attaching it to the navigation bar.
I am trying to add a UIImageView to the back of a navigation bar.
The reason is because I want to create a UITableView whose navigation bar is actually a picture (with back button on the left) but I want the picture to scroll with the tableview and when the picture is fully scrolled out. The navigation bar is shown as per normal.
My solution to this problem:
Add a UIImageView to the top of the UITableView and make the navigation bar transparent. Set a contentOffset for the UITableView which is a subclass of UIScrollView so that when the view is presented, it looks like the picture is filling the navigation status bar.
Problem:
If I scroll up, instead of bouncing back, the transparent status bar is shown (with a color of the background as it is transparent).
Possible way to solve this new problem:
I was thinking of trying to limit the ScrollView size to get around with problem but failed.
So I feel is it possible to add the UIImageView to the "back" of the navigation bar so that it is there without any offset? Since that way, my life will be much easier.
Any suggestions on solving this or another new approach to get the same UI/effect?
Related question.
I would do this by adding either a table header or cell at the top of the table which contains your image.
Create the table view so that it extends all the way to the top of the screen. Extend Under Top Bars option. I have not done this with a UITableViewController but I have done this with a UITableView embedded inside a UIViewController's view with the top constraint set to 0 for the view rather than the top layout guide.
Now when you run this your table will fill the whole screen and the top header or cell will be at the top showing your picture.
When you scroll you can either use the UIScrollViewDelegate to detect the movement or implement tableView:didEndDisplayingCell:forRowAtIndexPath:
I'm not 100% sure when you want the navigation bar to go non clear. If its when the image goes off screen then didEndDisplayingCell should be good. If its when the cell bottom passed under the bottom of the navigation bar then scroll view might be your only option.
This will also bounce as you expect when you pull down and it should snap back to the top.
Hope this helps.
I looked in this thread and tried everything I saw, and I can't seem to get it working.
Scroll to top of UITableView by tapping status bar
I have a UINavigationController and a UITabBarController. The application first opens to a UICollectionView.
When the user makes a selection, it brings up a ScrollView run by a custom UIViewController ("ScrollViewController"). The ScrollViewController makes four TableViewControllers and puts their TableViews in the ScrollView side by side with paging enabled, and has a floating UIPageControl as well.
Tapping the top bar scrolls the CollectionView to the top, but once I bring up the ScrollView, I can't scroll up from anywhere. I have tried setting all the TableViews' scrollsToTop to NO, no change.
Any suggestions?
That's correct. You can only have one scroll view controlled by the tap of the status bar. If you have multiple scroll views on the screen (either hidden or visible) you can set one of them to be controlled by the status bar tap by disabling the auto scroll on all of the other scroll views using scrollsToTop = NO, that includes anything that uses a scroll view within it, like a table view or a pager.
self.myTableView.scrollsToTop = NO;
According to Apple's documentation:
On iPhone, the scroll-to-top gesture has no effect if there is more than one scroll view on-screen that has scrollsToTop set to YES.
the situation is as follow: the self.view contains:1, a custom bar which is actually a uiview with some buttons on it and its height is 44px
2, a uitable view y-pos starts at 44th px. the rows have 150px tall and wide button. on touching the button, a tmp uiview with similar look to the button added on the table at same position where button is. some animation block happens and uiview covers the whole table and shows some content.
so far all is fine.
now if one scrolls the table up so that bottom half is visible and the top half is invisible.
the tmp view gets added properly at the same location but while using CATransform3DMakeRotation(M_PI_2, 0.0f, 1.0f, 0.0f) the left half looks on the top of the custom bar even though the tmp view added using insertSubview belowSubview:customBar.
i tried to send the view to back but no luck.
so any idea how to resolve this issue?
that was very easy. the view which should be on the top of all even during flipping should have a large positive zposition value before applying the animation.
self.myview.layer.zPosition =200.0f;