I have a grouped UITableView. Now unlike the default table view header my header should be next to the individual cells:
Standard:
[Header Cell]
[Item 1]
[Item 2]
What I need
+-------+----------------+
| | Item 1a |
| h1 +----------------+
| | Item 1b |
+ - - - +----------------+
| Item 1c |
+------------------------+
| | Item 2a |
| h2 +----------------+
| | Item 2b |
+------------------------+
| | Item 3a |
| h3 +----------------+
| | -placeholder- |
+-------+----------------+
Some remarks:
Group H1 has three items
Group H2 has two items
Group H3 has just one item (I have to insert a placeholder cell so that the header cell can have the full height of two item-cells
When the user scrolls the list then the header should be pushed upwards that the two header-cells don't overlap.
The challenge here is the height of the header cell:
If I set the height to 0 and uncheck clip subviews then that header cell is shown but does not get pushed away at the correct position.
If I set the height of the header cell to the visual height then there is an empty space of that height across the whole width of the table which I don't want...
Update 1: I just realized that apple uses such a list for the search (grouped by messages, mails, contacts, calenders etc.). So my question basically is how can I tweak UITableView in order to behave like the grouped search results... :-)
(source: mshcdn.com)
Update: I created a project on github, which does exactly this. I have extracted all the relevant code for the behaviour into two classes (BBFloatingHeaderViewController & BBFloatingHeaderCell). There is also an example project. I hope this is useful for others :-)
Here's the project: besi/FloatingTableViewHeader
This is an excerpt from the readme:
Floating UITableView headers
These classes aim to copy the behaviour found in iOS built-in Spotlight search, where the search results are grouped by category and the icon of the respective category floats on the left side of the search results.
Setup
Check out the example project so see how to setup the classes.
Add the .m + .h files of BBFloatingHeaderViewController and BBFloatingHeaderCell to your project.
Create a TableView and set the Class of the ViewController to your subclass of BBFloatingHeaderViewController
Create the header cell in IB and set its class to your subclass of BBFloatingHeaderCell
Make sure that your floating header view is the topmost view in the BBFloatingHeaderCell's view hierarchy.
The result
Floating Headers http://i.minus.com/jyea3I5qbUdoQ.png
Related
Is there a way to load a UIScrollView in a similar way to how a UITableView is loaded - in other words, only load the visible 'cells'?
For my example I have a large scroll view which can be scrolled in any direction. Inside that are 'cells' which I add to the scroll view using code. The cells consist of data gathered from json feeds (one feed per cell). I would like to only load the feeds for the visible cells, and then cache the ones already loaded, so they don't need to be reloaded.
Is there a good method of doing this? Or is there another direction I should be taking to get this result?
A couple of answers have suggested a tiling approach, but I'm not sure that tiling is quite the right approach, since the whole cell needs to be loaded when part of it is visible. Another approach which google hints at is putting a UITableView within a UIScrollView, but I've yet to try this.
——————————----------------------
| | | < a 'cell' row in the scrollview
| - - - -| - - - - - - - - - - |
screen > | | |
| | |
—————————— |
| | < whole of scrollable area
| |
| |
| |
--------------------------------
You are describing "tiling."
Take a look at Apple's sample code - it demonstrates an approach to tiling.
You can use CATiledLayer.
https://stackoverflow.com/questions/tagged/catiledlayer
https://developer.apple.com/library/ios/#documentation/GraphicsImaging/Reference/CATiledLayer_class/Introduction/Introduction.html
I have UI requirement shown below:
|------------------------|
|Header-1 |
| Checkbox1[] |
| Checkbox2[] |
| Checkbox3[] |
|------------------------|
|Header-2 |
| Checkbox1 [] |
| Checkbox2 [] |
| Checkbox3 [] |
and so on clicking below button.
BUTTON -> clicking on this button on bottom will create header and 3 checkbox everytime. How can i achieve this? This is very urgent. I can not take these in XML laypout as these need to be added dynamically on runtime.
If possible, Please provide any sample code and guide me.
Thanks,
Rachana
You should create a listView containing rows defined by a layout having :
a linear layout containing a textView with Header-1 (and so on) as text
another linearLayout containing three checkboxes.
You will create an arrayAdapter with a list of strings representing different values for Header-1 (I guess checkboxes will have same values all the time).
Adding a click listener (onClickListener) on your button. This listener will add an item to the arrayList used by the adapter to add new items in /remove items from your listview when your arrayList is modified (calling notifyDataSetChanged()) to refresh the listView.
All,
I have a regular view controller with several buttons on it, but when one of the buttons is pressed it retrieves information that I want to throw right above the buttons.
For the sake of this, imagine a blank view controller with one button at the bottom. When this button is called, it gets X number of items that need to be listed (and available for selection) right above the button.
I tried illustrating it for you here. :X lol. There are three items viewed, but say that 10 items came back - I need to be able to scroll through the list as well.
The question is this: how do I add a scrolling view (possibly table view) inside of my view controller so that this works as explained?
__________________
| |
| |
| item 1 |
| |
| item 2 |
| |
| item 3 |
| |
| |
| (button) |
| |
|________________|
Thanks
You simply add the UITableView as a subview of the view controller and implement the UITableViewDataSource and UITableViewDelegate protocols as usual.
It's not harder than that. Try it and if you get any problems ask another question.
Do you have Scrolling Enabled on Table View ?
I don't think so you need to do anything. TableView will take care of it.
I have seen apps that have table views that have rows that contain 2 or 3 cells. Something like the following:
| 3 cells in one row |
/-------\ /-------\ /-------\
|do this| | do | |do smth| <--- table view row that contains 3 cells
| | | that | | else |
\-------/ \-------/ \-------/
When you click on a cell they behave exactly like a cell and have different events. Is there a simple way to do this or do I have to use some trick.
Those aren't actually separate cells. A UITableView can only contain rows, not columns. But each cell can be laid out with its content in three equal-sized areas, thereby mimicking a real grid of content.
If they don't have to look like cells, I would use 3 Buttons in a custom UITableViewCell. They also get blue if you tap on them.
Adding buttons and then using the code from here seems to be the easiest way. Although the initWithFrame:CGRectZero looks hacky, it works.
I want to be able to embed a UIWebView into a tableview's cell (grouped style).
The web view is long (longer than the screen), and I want it to display it's full length. So there is no scrolling within the web view itself, just on the table.
------------------------
| a normal table cell |
------------------------
| a normal table cell 2|
------------------------
| a long webview |
| which doesn't scroll|
| within itself |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
------------------------
The web view will have various heights so how can I discover the the height of the webview in order to adjust the height in heightForRowAtIndexPath?
Here's how you could do it, but see my caution below:
You could load the web view, then use a javascript function to determine the height of the content. You could then use [myWebView stringByEvaluatingJavaScriptFromString: ..] to get the height.
Here's the problem. UIWebViews are fairly slow. The table can't present itself until it knows the heights of the rows, because that's how it determines which table cells to fetch. So scrolling your table view will be jerky, because every time you scroll down to a new cell, the height will need to be computed.
There are two approaches you can take:
1) Don't use a UIWebView embedded in a UITableCell. Instead use a UILabel and determine its height using some of the NSString convenience methods for doing this.
2) Use a UIWebView for the entire table. You can very closely simulate a tableview by doing this, and you will get the UI you need. To handle things like clicks, use the URL loading hooks provided by UIWebViewDelegate.