I'm trying to wrap my head around how to make the layout work as I want.
So the blue container is a view that will contain a bunch of rendered UIImageViews that will be added in viewDidLoad. The amount of subviews can vary, so sometimes there might be one row, sometimes two and maybe three.
I want the blue view container to wrap all subviews added, and the Table View should be right under the blue view container, and not overlap the toolbar at the bottom.
Here is a preview of my view.
Related
I’m trying to sync two collection views proportionally for navigation. One of the collection views is menu-like and is at the top, and the second is a larger one below. What I would like is for the top collection view to scroll a distance of the width of one cell (the cells are dynamically sized) when the user scrolls the bottom collection view a distance of the main screen’s width. The closest thing I've seen to this effect would be iOS: Custom top segmented control works as expected only when using debugger. What I would like to change is to have the left most cell in the top menu always selected. In addition, when the user scrolls the bottom collection view the width of the screen, a new cell should Replace the left-most cell in the upper menu and be selected. Any help in Swift would be especially appreciated, but ObjC answers are also welcome.
I've just vertical scrolling a few times in the past, but now I'm trying to implement horizontal scrolling but when I run it it doesn't scroll.
What is the problem with it?
P.S. is it possible to design and layout views using a storyboard for scrolling? In this example the blue view is still visible within the screen representation, so its ok to deal with, but suppose I wanted to add another view which is further to the right and thus not visible within the screen representation? Is there anyway of visually designing a scroll view where you can see all the entirity within the storyboard what it will look like?
You don't have a trailing constraint on the scroll view's direct subview, so the scroll view cannot compute the correct contentSize.
Also, it's easier to understand the constraints in the document outline if you give each view a unique label. You have two views labelled “View” so it's difficult to be sure which constraints connect to which “View”.
After banging my head against all the walls of the building, I have noticed that whenever I have a UICollectionView as a subview of my view controller's main view, the following holds:
If the collection view is the first subview in the "Structure" pane in Interface builder, the cells are pushed down by about 128 points (see images below:)
(red background is collection view)
However, if I add another view above the collection view, the item cells line up at the top (as expected), no extraneous margin:
...but it has to be placed above the collection view: If I re-arrange the views and place the dummy below the collection view, the bug resurfaces.
This collection view is horizontal scroll, one line (section). Ideally, the collection view height is the same as the cell height (no margin), so the bug caused the cells to not show at all. I had to try and enlarge the the collection view's canvas vertically to finally realize what was going on.
Is this a documented feature I am somehow missing, or is it a bug?
I fell like naming my dummy view "spacer.gif" and enjoying some late-nineties nostalgia.
ADDENDUM: I have further investigated and discovered that, the dummy view placed above the collection view is a necessary condition for it to work, but not sufficient. Moving it around (mostly to hide it) or adding/changing constraints on it makes the bug resurface in some cases. Very annoying, can't quite figure out the exact conditions...
I am trying to add collection view to UIView and there is a problem that doesn't make any sense. Screenshot. I made the background color of the collection view, to make show the view area more clearly.
If I add the collection view straight to the controller (just like in UICollectionViewController), the top padding doesn't exist.
In this example, I have autolayouted the collection view to resize to the whole view but the problem existed the moment I added collection view to the UIView.
Also, if I add another collection view right after this view, there items start from the top, without any margins.
If there is anything else you need me to provide, I will do it. I think this is a storyboard bug or something because there are no insets, in the view's attributes.
I am trying to recreate a UIView I have seen in multiple apps, mainly Shazam. The top half of the screen has some interactive buttons, and the bottom half looks like a tableView with custom cells. When the bottom half is panned/swiped up, the tableView scrolls over the top half with velocity, much like a scroll view.
I have been researching this and experimenting for a couple days now. I have gotten close, but not quite there.
My last approach was a view that had a tableView inside it. When the view was panned, the view would move to wherever the finger moved it to, but then would not have any velocity afterwards. Also when the tableView was panned/swiped down, it wouldn't move the whole view down.
Before that I tried a scrollView that took up the whole length of the screen. That gave the desired effect, but the button wasn’t tappable, and you could scroll the view in the button area, which is undesired.
Does it utilize ScrollViews or is it using a tableView that acts much like a ScrollView somehow.
Here is the Shazam UI/UX I am looking to recreate:
The top portion has interactive buttons, and doesn’t scroll. The bottom half shows content and when scrolled, covers up the top portion.
Below is what I have tried so far: This one is the panning view, which sort of works, but doesn’t have velocity and the tableView doesn’t scroll the view back down.
Any thoughts on a direction I can take from here is greatly appreciated. I am using Swift.
Cheers
This sort of thing is perhaps best done with a collection view and a custom layout — you can have some items for which you set layout attributes absolute to the view, and others relative to the scroll content offset.
There's a great (if wandering) discussion of this and other techniques in the Advanced User Interfaces with Collection Views talk from WWDC 2014.
This is actually simple than it seems at first. Here's how you can achieve this:
Create a UIViewController (not a UITableViewController).
Add some buttons to the top area of the screen.
Add a table view spanning the entire view controller's view. Make sure the table view is on top of the buttons added in the previous step.
Configure the top cell of the table view to be transparent (by setting its background color to Clear). Set the background color on the table view to Clear as well. This way it won't obscure the elements at the top of the screen, unless the table is scrolled up.
Because your table view is now transparent, you'll need to explicitly set the background color on the table cells other than the top one.
Profit!