I'm trying to build an accordion style ( expand/collapse ) list in IOS/Swift 3. Was confused on which approach to follow like a static UITableView ( since my sub divisions have different types of Ui Controls in the cells ie some have checkbox ,spinner, textview etc. with labels to show configure a list of different Valves) , UIView with nested UIViews sections with an option to clip views . But both have been messed up with without any success.
Illustration
http://imgur.com/a/Bs9SF
Below are the links I followed
https://github.com/justinmfischer/SwiftyAccordionCells
http://www.appcoda.com/ios-static-table-view-storyboard/
https://github.com/Weebly/TableSchemer
https://github.com/Alliants/ALAccordion
Any other approach without UITableView?
Please help . Thanks in advance .
Static vs dynamic table will depend on your data source. Does your data source for your table change? If so you'll want a dynamic table, if not then you can design it out in a static one.
As for the accordion feature, what I've done in the past is to add a tap gesture recognizer to the header view of each section. When the tap is detected I change my datasource and reload the table view. What happens is that number of rows for section is called on reload, and I return 0 so that none of the rows show. When tapped again you can go back to showing the normal number of rows.
To get the animation you need to use delete rows with index paths and animate it.
Related
I currently trying to implement a dropdown menu. The content of this menu is supposed to be several buttons. The amount of the buttons is determined by the size of the struct array carsArray.
The title of the button shall be each structs value name:
for n in 0...carsArray.count - 1 {
button.setTitle(carsArray[n].name, .normal)
}
This menu shall slide in from above. To do this, I created a UIView - how can I dynamically create as many buttons as there are entries to the carsArray inside of the UIView?
Additionally, am I right to assume that with every entry the UIView's size have to adjusted? If so, how to also do this with every entry? Or do I have to create a table view to do so?
Is there another, easier way to create such a dropdown menu? Maybe with already from Apple given classes?
The way this can be achieved is by using a UITableView. To implement the opening and closing of dropdown, you would need to add or remove the cells or animate the height of UITableView. To close, you would make the height as 1 row height and to expand, you would make it maximum height or total number of rows height.
This is the library that I created a few months ago for one of my apps. It uses a UITableView to create the drop down. Have a look at this.
Let me know if you face any problem using this. Would be happy to fix.
How to design and code this in swift(IOS) AND Xcode.If we tap on down button it should display items and vice-versa like this:
You need a Collapsable TableView. In order to achieve that, in your TableView you must keep track of which sections are collapsed (contracted) and which of them are expanded. For this you need to maintain a set of indices of sections that are expanded, or a boolean array where the value of each index indicates if the corresponding section is expanded or not. Check for the values at the specific index while assigning height to a certain row. Check this link for more help.
Refer ans by #Cristik.Refer my previous ans for more info.
You need expandable table view. Basically, you need to control the open and close of sections of your table view.
Here is an good example with working code & animation written in swift 3.0
I am creating an iOS app that has a form to create a certain 'event'. This form is wrapped in a tableview. This tableview consists of static cells. But there is one section in the table that can be used to add persons to this event and thus on a button press a new tableview cell needs to be inserted at that section. To demonstrate this see the following image:
What I want to know is how to insert cells into a static table. And also how to grab them when the user submits the form, since, as far as I'm concerned, you can't grab a specific section of a table.
I already looked at this kind of concept but this does not apply on adding cells:
Mixing static and dynamic sections in a grouped table view
Thanks,
I think there are (at least) 2 workarounds for this:
You could add a dynamic UITableView as a child to the UITableViewCell. See this stack overflow question about this.
An other solution would be to bypass the table functionality in that cell and change the height of the cell and add the extra controls manually.
It's not possible to add or remove cells at runtime, you'll need to use a data source for your tableview. I asked a similar question here, with no luck.
In response to your second question, you can always grab cells using the cellForRowAtIndexPath: method on UITableView.
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.
I have several UITableViews, with different datasources in a iPad screen.
I need to copy/move a cell from the first tableView to the second, similar how is done with ListBox in other languages.
Now, I can reorder the cells, but the movement is restricted to the tableView. I want to drag the cell in tableView1 & drop in tableView2.
P.D. I'm open to use any other control to archive this. I take a look at AQGridView & DTGridView, however the layout is based in columns with different #items. If I can emulate columns with this controls or other then I can accept the workaround.
UPDATE:
I hope this links could help:
Observing pinch multi-touch gestures in a UITableView
This is the most close answer:
Drag and drop between two tables in ipad
I know how get a image from a view, I can detect the drag with a Gesture Recognizers, so I have all the setup in place but have not expertise in graphic development, so don't know how put this in motion...
This is definitely a very interesting question, and I wish I had the time to put together some test code to see if the idea I'm about to outline would actually work. My hope is that this will at least point you in the right direction.
UITableViewCell is a subclass of UIView, so I would create a subclass of UITableViewCell called something like DraggableTableViewCell so we can handle the touch events and then perform the following steps:
Create an instance of DraggableTableViewCell and configure it to appear like the selected cell.
Add the new cell as a subview of a view that is a common superview to both tables at the same location as the original cell.
Update the data source for the source table view and remove the original cell from the table view using deleteRowsAtIndexPaths:withRowAnimation:
Move the cell on the display by responding to touchesMoved:withEvent:
When touchesEnded:withEvent: is received, verify the cell is somewhat close to the other table view and determine the index path where to insert the new cell
Update the data source for the destination table view and call insertRowsAtIndexPaths:withRowAnimation:
Remove your draggable cell from its superview with a nice animation.
This entire process will need to be orchestrated by the view controller that controls the various table views on the screen.