Collapsable/Accordion like view in iOS - ios

I am trying to develop a collapsable/accordion like feature in my iOS app. This would be your typical FAQ type feature that would be found on web sites. I would like to tap the heading and then the detail is displayed.
Since this is for the help section and there are only a few items I thought I would be super simple to embed an HTML file with some JS in it to perform the action and render it in a web view. I got that to work without an issue. It loads and works great. However, with the web view I can 'bounces'/pull down the view to reveal the background of the main view. Now, this would not be a problem normally but since the designers use some gradients it looks awful. I set bounces to false and all is well but not super smooth when scrolling.
Here is an example of the accordion I am talking about.
I then found this project.
Which is a little more on the right track. But the table view height stays fixed and does not act like the other accordion view.
My question is this....am I missing something? Should I be looking at a different design pattern? Any ideas are appreciated.

I never found the answer. I ended up creating a basic master - details table view instead.
I created an array with 4 dictionary objects. Each object has a title and an array of the items for the details.
My main table view is showing the 4 dictionary object titles and the detail view is showing the rest of the array elements. Seems fine. I was hoping to find a dynamically sizing table view but no such luck. Maybe for the next release.

Related

Implementing PageViewController in Swift

I can't seem to get a simple answer to this anywhere. I have a Page View Controller and similar lay-outs for all of the other view-controllers.
This is working without problems if I have one view-controller per view, but it seems very inefficient given that all the lay-outs are the same.
I've seen tutorials like this, but not for Swift. Is it possible to use a single view controller for all the pages and just switch out the text or images? If so, can you please explain how this is done?
All you have to do is make each page link to the same viewController and then dynamically change the content on each page based on the page number associated with it. You could easily have some elements that were hidden or diabled on certain views.

Best practice add multiple object at one page on storyboard

I am wondering what is the best practice for creating a page in storyboard that consist of multiple object (It can be imageView, View, label, etc). Look at this image, I feel ridiculous adding new object under the bottom view that is outside the page view.
I know a little how to arrange view with relativeLayout etc in Android. But how can I arrange this page with storyboard and autolayout? I want to arrange a page that consist of multiple object with different size. This maybe a stupid question, but I mean it a lot for me as a newbie developer. Thank you.
Its hard to say without knowing more about what you are trying to do.
It looks to me like it might be a good candidate for using a UITableView. You'd create a table view and add cells for each of the items that you want.
You could also create a scroll view and install the items on the scroll view, either through custom code, or with AutoLayout if there are a fixed number of items.
You could also use a UICollectionView if you need a layout other than a vertical scrolling list of items.
Edit your question with more details on what you're trying to do if you want more specific help.

IOS table view inside of a table view

I have a table view with expanding cells for each of them. I want to make every expanding cell be a new table inside of the bigger one. Is that possible? I've done the research, someone said that duplicate UITableView cannot put in one file.
For example
dish order1
=================
dish order2
rice
coke
===============
dish order3
which every "dish order #" is a cell of a table, and when you expand one cell, there will be a smaller table appears. I've done all the expanding stuff. But don't know how to put a small table into a bigger one. Thanks
Well if i understand your question correctly, what you search is called nested tableView, here's some examples:
SDNestedTable
ExtensiveCell
CollapseClick
JKExpandTableView
Good luck.
It would likely be impossible to put one table view inside of another table view, and if you did manage to do it, it would be awful. Ask yourself, have you EVER seen this in a commercial app? If not, as a novice iOS developer, you are out of your depth trying to invent new UI paradigms.
Master the existing UI tools first. Don't try to use the UI elements in totally novel ways until you have a strong feel for the standard way to use them. Expect this to take 6 months or more.
Others have suggested a sectioned table view where initially only the first element of a section is visible, but when you tap on it, it expands to add other rows. This works quite well.
Another approach would be to use a master/detail UI, where tapping on one table view cell pushes a new view controller the uses a new table view to display detail information about the previously selected item. There are some use cases where you might have several levels of increasing detail.
I really do not think you want two instance of UITableView, instead what you want is a sectioned UITableView which expands when it's header is tapped. Apple has a good sample code for this here:
UITableView expand/collapse
i have demo for you , just got from github..
https://github.com/mitsBhadeshiya/ExpandingCell
i hope this is helpfull for you...
Have you considered using one UITableView with multiple sections? You can accomplish what you are depicting above with only one tableView.
Since this was a problem for many people in the past, iOS 9 has a thing called Stack View, it does exactly what you are saying.
Check out this article.

When I transfer from my master view to my detail view after adding a new item, my detail view is empty

I'm making a sample app to learn iOS dev, and I have the app create default items to populate the tableview originally, and you can add further ones as well.
If I tap on the default ones (well, there's only one) and segue to the detail view it shows all the details (Name, Location and Date) as intended. But if I add a new one, it comes up with those fields being Empty.
I can't figure out why. I have seemingly all the view refreshing methods set, and it should be setting the detail view's data object which then feeds the labels.
Could anyone help? I'd supply further code if requested, I just don't know what to supply now as I'm not sure exactly where the problem is. It's a rather simple app, though.
Project available here: http://cl.ly/3N0o272M3y1K
Ok this took a bit longer than planned - but it is a good way to learn.
I have attached the project in a zip file.
The code is a bit different then what you posted, but if you compare them side by side, you will see how they are planned and build differently.
It shows the Segue working within the Storyboard.
There where 2 big problems with your project outside of your misuses of the methods.
You need something like Core Data if you want your data to be persistant. In the example I have given you I have used Plist, this will do the trick, but is not persistant in this case.
Also your detailViewController had no labels for the text to appear, so you will need to look into Custom Cells for that - to match your design.
Good Luck and I hope this is useful:-)
Updated Project

table view is covered with an empty table view when integrate TTCatalog to a Tabbar template project

I created a project with Tabbar template. The First View of my Tabbar project just wants the same function of the TTCatalog sample project. The Second View will integrate a Map function.
I integrate some code from TTCatalog sample project to do so. But when my App starts, only an empty tableview displayed in my first view. It's just a white table with some empty rows. nothing else.
When I quit my App from emulator, and start it again from emulator,first I can see a table view like that of TTCatalog ( with blue titles and labels), But soon the table view is covered with an empty table view.
Please help
thanks
There is no need to inherit CatalogController, if the only thing you need is a tableView inside a tabBarController then there is even no need to use three20 at all. To get started I would recommend you use a simpler approach. While three20 and the TTTableViewController can help a lot with a certain kind of setups, it is not the general best way to do things.
Let your FirstViewController inherit from UITableViewController, implement the UITableViewDataSource methods. If you are experiencing problem or need with a specific problem feel free to ask here.
If you got this working and you really need something that three20 can help you achieve, read through the TTTableViewController sources, TTModel, TTTableViewDataSource, find a tutorial and go on.
Maybe this question may help you: Three20's URL-based navigation + tab bar example? especially this link: http://three20.pypt.lt/url-based-navigation-and-state-persistence

Resources