How to design an expandable view with tableview content? - iphone

I have a client that would like this implemented:
http://i.imgur.com/hWxfg.png
X expandable views each with a scrollable tableview with Y cells.
The main view is not scrollable. If i tap Drawer C then Drawer A should collapse and Drawer C should expand.
I've seen similar constructs, but not with tableviews inside, so I don't know exactly how to go around this.
What's the best approach to this?
1) A tableview with "inner" tableviews
2) Multiple customs views with a button and a tableview
3) Something other?
How would you implement this?
Thx!

I have done this type of implementation but dont carry source code with me.. still i can guide u the way i did it...
i will explain u the way i did and considering ur example image.
u will need 3 buttons (give them diff tags) with 3 bool flags to handle their on off state.
u will need 3 tableview(give them diff tags)
if screen height is 480 and all button height is 20, then remaining height will be 480-3*20=420.
so this is the height of all the table view.
on the click event of any button ,based on clicked button tag find its associated table view .
set the flag value on button click and using the bool flags value decide to show and hide the table view and also the on/off image on the button.

Related

Why Xcode Storyboard preview and emulator button texts are not compatible?

I am trying to drag and drop buttons to the storyboard. The buttons seem good in my storyboard and preview like the following;
However, when I run the simulator, the button texts seem like the following;
Why the buttons are not shown to fit in the buttons of the simulator and how can I fix this?
Note: Preview and device types are iPhone13 Pro.
The iOS 15 / Xcode 13 style buttons are highly dependent on auto-layout.
Based on your screen-shots, it doesn't look like you've given the buttons any constraints.
You do NOT need to set widths or heights, but you DO want to set at least horizontal and vertical position constraints.
So, constrain all 4 of your buttons centered horizontally, and constrain:
First button Top to view Top (safe area)
Second button Top to First button Bottom
Third button Top to Second button Bottom
Fourth button Top to Third button Bottom
Then you should see them laid-out correctly at run-time.
I think it's because of the auto layout constraints. I am not very familiar with storyboards, if you don't set width of the view component, it seems fine on the storyboard but when compiling the view it actually has default size.
Try to set some constraints for width. Maybe it would help.
The first thing you need to do is to create identical buttons with identical size and with identical font size.
As you can see in your project, the buttons have different sizes, but the text is the same size in all buttons.
To make it faster - you can create one button and make a copy with option + drag’and’drop…
Then, you can put them in a Stack View. So, it will be easier for you to work with them in the future.
Select all buttons and make a Stack View...
https://i.stack.imgur.com/QLTJP.png
https://i.stack.imgur.com/OlOia.png
After that, resize your Stack View like you want.
Then, tap on a Stack View and clear the constraints.
https://i.stack.imgur.com/1pMT8.png
Fix the dimensions like this. But, without “Constrain to mergins”.
https://i.stack.imgur.com/8HKKF
After that, make for the Stack View - horizontally and vertically position in your storyboard.
https://i.stack.imgur.com/a29wL.png
The result is…
https://i.stack.imgur.com/mvQjg.png
Hope it’s break your problem! :)

Scroll content over fixed background image in swift

I am trying to achieve a scrolling over a fixed image, as you can see on the picture.
I thought I should use a scrollview but I didn't quite get it how to use it and what to include into the scrollview, since the image and the button on the bottom should be fixed. In addition, the content should only be scrollable, when the text is to long.
I think the best solution here would be using a UITableView inside a UIViewController.
You can then set up the cells to make it look exactly the way you want.
For instance the first cell would just be the image, the second cell would be your title, the third one would be your menu bar, and so on.
This may be really useful if you plan to present dynamically the elements inside your UIViewController (for example if you need to use a database, you may want to animate the insertion of the rows only if the content has be downloaded already)
So using a UIViewController, you can just add the UITableView to it and set it up using contraints so that it fills the entire view. Then you can just add your button on the top of your table view, as a subview of your UIViewController's view (not as a subclass of your table view otherwise your button would end up scrolling too).
And again here you would need to add a few constraints to your button to make it look alright!
Just try it like this and let me know if you have any difficulties in the implementation :)
It is very complex to explain, To understand you must know good autolayout
To achieve that you need two scrollview and little math :)
Suppose your headerview height is 200
As you know when using autolayout we need following view hierarchy
Your view Hierarchy should be
--> Main View
--> ScrollView
--> Container View
-->Your HeaderView (200)
-->Content View (Equal height to UIView)
--> UIView (Your tabs like button , followbutton)
--> ScrollView 2
--> ContainerView
-->Subviews
Scroll view 1 Will used wo scroll the headerview and second scrollview will used to scroll other content of scrollview (Like Tab and text content as shown in picture )
Content View (Equal height to UIView) will allow your content view to give height of 200 extra to scroll bottom and your second scrollview will scroll to top which will allow to scroll your other content too
https://media.giphy.com/media/a2A4AQeAIkAhO/giphy.gif

Overlaying buttons on tableviewcell with collectionview inside

I have implemented a image slider with a UICollectionView inside a UITableViewCell which the user can slide to left and right. I want to create two buttons on this UITableViewCell so the user can also tap on that buttons to slide the images.
I've done this by adding the buttons on the images inside the UICollectionViewCells but with that the buttons also are swiping when the user swipes to left or right or taps the buttons.
I tried to fix the buttons on the UITableViewCell, but anyhow the buttons does not get displayed, when I do it like this.
So how can I achieve this, that the buttons are fixed inside the UITableViewCell and the UICollectionView inside the UITableViewCell can move it cells without effecting these two slider buttons?
At storyboard it looks like this:
Can't rearrange the buttons:
Add the buttons directly to the content view of the table view cell, don't add them to the collection view. That way they will stay in position. If you can't see them it's possible that they were underneath the collection view and were obscured. Change the order of the views in interface builder by dragging and dropping in the document outline. This changes which view is on top.
The document outline is the view you have posted as a screenshot in your question, starting at "brandsCollectionTableViewCell". The outline contains the subviews of the cell. Views with the same parent, like the image view, label and buttons currently shown in the outline, will be ordered "on top" of each other by their position in the list. So you drag the items in that list to change the order, or select the buttons then go to Editor -> Arrange -> Send XX to adjust the position.
Use the Xcode view hierarchy debugger to help you understand what is happening (that's this button on the debugging toolbar):
The 3D view will let you see where your "missing" buttons are.
If you really want to include the buttons in the collection view, then you need to use a custom collection view layout implementing floating views. That's not a straightforward task, but I've written something about it here.

UITableView with dynamically set size

I have a UITableView as a subview in a ScrollView with other widgets around like a button. I'd like to put the button always at the end of the ScrollView and I'd like to have the UITableView to show dynamically more section. How and where shall I determine the Table size, correctly set it and visualize it?
From Interface Builder it seems that I can only set static size to the TableView (which of course limits the number of sections visible) and stick the button position to the bottom whether a rotation happens.
If you have only few simple controls after the table then I'd suggest putting them to the table itself and get rid of the unhealthy (in my opinion) combination of table view inside scroll view.
You might add the button you are talking about to the table's footer.
It may be done in the Interface Builder (drag-n-drop the button to the bottom of the table view) or in the code ([tableView setTableFooterView:myButton];).
If your button should be smaller that table's width then put it inside UIView and locate as you need.
You can also add table header in a similar way...

iPhone: How to Place a Scrollview Inside of Tableview Cell

I want to put a scroll view inside of the table view cell. I have a number of buttons in one cell of table view and I need to scroll that cell to show the appropriate button.
If you want to use a vertical scroll view then I wouldn't suggest you doing it because, as TechZen wrote, there will be a mess in this case.
If you want the inner scroll view to scroll horizontally then it might be achieved by 2 ways:
Implement a custom table view cell that will include a scroll view inside it.
Add a scroll view as a sub-view to your cell that you will return from tableView:cellForRowAtIndexPath: method.
I suggest you to use the second approach.
There are plenty of examples online. Usually the sub-views are labels or image views, but it is not complicated at all to add a scroll view instead...
I don't think you can do this. It would require nesting of scrollviews which isn't really supported.
Even if it was, it would be very difficult for a user to know which scrollview they were hitting with their pudgy finger. Remember, you don't have the one pixel precision of a mouse on the iPhone. You have an area of at least 15x15 pixels. You don't have a scroll bar but instead just drags anywhere on the screen.
Instead, you should use a master-detail pattern. Selecting the cell in the tableview pushes a detail view which has the scroll view with all the buttons.
Why do you want to do it like this?
I think the best idea is to draw your table view manually above your uiscrollview. I did it, and it works. It just takes more effort and drawing accuracy. But that takes a lot of time. :)