I'm having problems trying to implement a layout for my app. Whenever I use tableviews, it wants to take up as much space as possible. I'm trying to have (from top to bottom) a tableview with two rows, a text field, and a horizontal stack view rooted to the bottom with two buttons. Something like this:
Mockup
My issue is that constraining this has been a bit of a nightmare. At the moment I actually have the view looking just like this, but its hard coded with the top constraint of the tableview being inset by 400. I need a way for this to be flexible, as when I click on the textfield, i'm going to have that adjust to the top of the keyboard, along with the tableview above it.
At the moment I currently have the TableView within a View, which is in a StackView with the textfield and bottom stack view with the buttons. How can I set up the constraints in such a way that the entire stack seems to appear rooted to the bottom of the screen?
I'm sorry if this is a broad question, it's more of a 'How should I go about this' rather than 'How can I do this' kind of question. I should mention I'm doing this programatically too, using SnapKit for the constraints.
Thanks all!
Fixed by rethinking the whole thing an simplifying. Took the table view out of the stack, put that and the stack view in. Then the problem was my original one, the cells being stuck to the top of the screen and constraining not changing it at all.
So I flipped the table view using
tableView.transform = CGAffineTransform(scaleX: 1, y: -1)
And doing the same to the two cells to flip them back to normal orientation. Now the view is perfect! Hope this helps anyone in the future
Related
I’ve been struggling with this for a few days now…I can’t figure out how to correctly layout these constraints…. the bottom container view on the left is a UIPageViewController that loads the VC on the right…. that VC has a background view and 2 stackViews inside it… any ideas on how best to layout? I've tried constraining the leading and top of the background view to the safe area, then the same of the stackview (containing other stackviews) to the background view, but no matter what the stackviews display over each other?
The problem wasn't with auto-layout or my constraints, I was simply trying to fit too big of a view (the graph) inside it's superviews...when I shrunk the size of the graph, the existing constraints laid out the views perfectly.
To anyone else facing a similar issue however, Honey's comment is good advice, generally you should add the furthest "back" view first, add it's constraints, test to make sure it's correct, then repeat on each subview you add, as opposed to dragging all your views, then constraining them. The former is always the better approach. 👍
I've many troubles with a ScrollView that is more little than main view.
My goal is the layout in the figure
where gray view is a TableView and blue is a hierarchy composed by a View inside the ScrollView. Everything is plaed all inside a main View. So the general hierarchy is the follow
In the ScrollView i've to put many elements, Switch for the final product, Label to understand. So i want the possibility to scroll.
Reading around the web i've found always the same, more or less, solution, this: one, two, three, four, five, etc.
As soon as i add various constraints as explained (for me are not all 0), both on the emulator and on the real device, the ScrollView disappears.
But as we see, in these example there is the case of a single ScrollView inside a main View, on full display. So i've tried also with another View to contain the hierarchy ScrollView-View. Unfortunately, i've the same results.
What is the problem? Where wrong i?
Control-drag from the content view of the scrollView to the viewControllers view and make Equal widths then change that constraint multiplier to 0.5 , same for the tableView sure minue margin between it and the scrollview
also make sure constraints are properly hooked from top to bottom
Here is a demo of what you want exactly scrollViewHalf
I have created a horizontal scrollview in swift with 3 view controllers and it almost works fine except for one thing. When I scroll between view controllers, it is possible for half of one view controller to take up one half of the screen and the next view controller in the other half. I was wondering if there was any way to prevent this so that the view controllers do not get "stuck" halfway and that there will always be only one view controller displaying on the screen.
-Also on a side note I have one left and one right swipe gesture within one of the viewcontrollers in this scrollview, and I noticed that after about 7-10 swipes, the screen no longer responds to the swipe gestures(left, right). Any clues as to what could be solving this?
If anyone could answer or attempt to steer me in the right direction for solving one or both of these questions, it would be greatly appreciated.
First, you need to enable pageing for your scrollview. You should be using something like
scorllView.isPagingEnabled = true
Then most importantly, you to make this paging work, each "page" in your scroll view must has equal width with your scroll view.
I'm trying to develop something like CSStickyHeaderFlowLayout but customized for my table, but I'm not sure how can I achieve this goal. The idea is
Someone can give me a hint how achieve this objective?
To add to Vollan's answer, to make the title stay still you could use a view that contains two subviews: the first is the scrollview (with the image and table as Vollan suggests) and then add another view (like a UILabel) for the title. Thus, while the image and table scroll in the scrollview, the title will stay still.
Best solution would be to wrap everything inside an UIScrollView. That will allow you to scroll to bottom of the screen and then only scroll the tableview. That way it will appear like the tableview will overlay the image.
While using a tableview within a scrollview would likely work, your tableview would have to always be it's full size (without some annoying constant re-sizing), so you'll lose the value of the enqueuing/dequeueing that makes tableViews work so well.
The CSStickyHeaderFlowLayout has example pretty similar to what you want to do, did you look at their examples? You may be able to play with it and get it to do what you want If your problem is simply having a constant title, you can just add a view above the table or use the NavBar and adjust the contentInsets
You might also consider using a collectionView instead. It's much more flexible as far as layout goes.
I work on a app, nothing fancy, but since is my first app, there alot of stuff I never did before.
So, I'm trying to build a view like the image attached.
I've looked up on the Internet how to do something like that but I don't know what is better/cleaner way to do.
As you can see I have 3 areas: the title, the tableview in the middle and a button on the lower side.
The table will expand based on the content (3 lines or 30 lines) so the button must move down and a scroll bar should appear.
So, my idea:
Using a tableview having 3 static cells: one to put my title, second to put a tableview having prototypes cells, and a third one for the button.
That way I would have a scroll bar when the table in the middle grows, pushing the button.
Here I have a question: how to have the table view (the inner tableview) resize itself, pushing the height of the middle row, instead of having a fixed width with a scroll.
Is the the best way to achieve that?
Thanks for any idea.
C.C.
Are you sure you want to push the bottom UI down as the table grows? You say whether the table has 3 or 30 cells, but what if it has 300 cells? Your user then has to scroll to the bottom to reach the button and tab bar. I think you'll find that it would be better to use Auto Layout and let the table fill the screen space between the title and the button. The table will scroll so if you have 300 cells then you can scroll through inside the table's available area.
The advantage here is you won't be fighting with Auto Layout. If your user rotates an iPhone 4S into landscape you'll only have a few rows displayed but conversely if they run in portrait on an iPad you'll fill all of that space.
As for how to do it, the other advantage is that you don't need the nested table you describe. Use a constraint to attach the title label to the top layout guide, then attach the tab bar to the bottom layout guide. Put a vertical space constraint between the button and the tab bar. Finally, put vertical space constraints between the table and the title & the table and the button. (You'll need to implement constraints for the horizontal axis as well, but that's pretty simple.)
There's are refinements you can put into place if you want the table to shrink to fit if there are only 3 rows, but this should get you started and you may not want that anyway.
Key point: the tableView wants to scroll naturally, inside a view sized to fit the display. Don't change that behavior unless you really have to. Neither your users nor UIKit expects what you're trying to do, and the table is going to fight you all the way about it.
Nesting UIScrollViews (which your nested table would do) works, but it opens up a lot of bad UI flow problems. In my experience every time somebody wants nested scrollViews there's some other approach which is more "natural" to iOS interface paradigms.
If you're dead set on the UI you described I wouldn't use a table for the outer structure. Just make it a UIScrollView and calculate your content size based on the number of rows the table will display. You can actually do that, and then use Auto Layout as I described.