I have a view which displays the music interests that a user has. Since the text of each interest can be different in length, I have used a UICollectionView to render these items.
The problem is that I would like to limit the size of the list to just 7 lines. If there is more items than can fit, I need to show an item [...] at the end to indicate that there is more items.
In the example above, I would change the word "Grimes" for "...".
Is there any way, with dynamic sized UICollectionView cells, to know HOW MANY items fit into the given space, before it gets rendered on the screen, and thus be able to change the last item to "..." (either by removing the extra items and adding a new one, or by updating the last cell title).
You could also handle it after the fact by allowing the collectionview to lay itself out and determine it's last cell, then grab the last cell in the collectionView's .visibleCells array.
[self.collectionView performBatchUpdates:^{
[self.collectionView reloadData];
} completion:^(BOOL finished) {
UICollectionViewCell *targetCell = self.collectionView.visibleCells.lastObject;
targetCell.backgroundColor = [UIColor blueColor];//or whatever needs to change
}];
I assume you already have a method to calculate the dimension of each item. It's not that hard to implement this behavior by yourself.
You need a method to estimate the size (or rows) needs for a list of items. Something like:
func preProcessList(originalList: [Item]) -> (displayList: [Item], needThreeDots: Bool)
Related
I need to display a dynamic table view inside a cell (of a static table). Using sections instead will not be enough for me. But I don't want this table to be scrollable, so the entire table must appear at once. The problem is that this table size [and rows count, and each row size] varies according to the content being shown. How can I associate the cell (which holds the table) autoresizing property with a table inside that must show all content at once?
Currently I have the tableView inside the cell, and constraints bonds it to all the 4 sides. The first table (not the one inside the cell) rowHeight property is set to UITableViewAutomaticDimension, but the table inside the cell doesn't appear entirely.
If I set the static cell height to a value greater than the tableView(inside cell) height, the whole table appears, and also an extra space beneath it (as the table is bounded to 4 sides of the cell)
So, any ideas on how to show this entire table inside a cell that dynamically has the perfect size for it ?
ps: I tried using collection view inside the cell. Unfortunately it doesn't serve my purpose.
Thanks!
Update
I tried to create a class for the inner table and use (as pointed by iamirzhan) contentSize didSet, like so:
override var contentSize:CGSize {
didSet {
self.invalidateIntrinsicContentSize()
}
}
I then used this method to call a function that resizes the cell that holds the table: self.frame.size.height = table.contentSize.height. The function is on this cell's own class.
This worked, the table now appears entirely. The problem is that it overlaps the cell underneath it, so i'm still looking for a solution.
I don't see why this requires 2 tableviews. The static portion should be uitableviewheaderfooters or just a UIStackView. But to answer your question simply query your child tableView for its size and return this in tableView:heightForRowAtIndexPath: for the outer tableview. The height of the child tableView is simply the sum of the hieght of all of its children (including any headers/footers). This is usually not difficult to calculate unless you are using something like a webview where you need to actually load the content and get the size asynchronously. You can calculate the size of elements that are based on their intrinsic content size with UIView.sizeThatFits(_:). The other elements should have fixed sizes or constants in the storyboard that you can sum up.
For inner tableView you should write such implementation.
Firstly, disable the scrollEnable flag
Then you should override the intrinsicContentSize method of tableView
Your inner tableView custom class:
class IntrinsicTableView: UITableView {
override var contentSize:CGSize {
didSet {
self.invalidateIntrinsicContentSize()
}
}
override var intrinsicContentSize: CGSize {
self.layoutIfNeeded()
return self.contentSize
}
}
Now, delete the height constraint, and the height will be calculating by its content.
I have two questions :
1- Is it possible to know if a cell indexPath.row has changed in a UITableView ? for example if I have an element at index (0) and then I add another one, the first element will be at index (1). Is it possible to detect this change ?
2- Is it possible to fnd the index of an element by the cell title ? for example I have X,Y,Z element in the tableview and I want to know in which cell 'X' is placed ?
thanks guys,
Generally speaking, it's common practice to isolate model and view. What I mean by this, is separate the storage of the data and the view that's rendering it.
For example, you may be creating a table view of color names. Therefore, you could store an array of color names as a property of your view controller
class UIColorViewController: UITableViewController{
let colors = ["Black", "Blue", "Yellow"]
As I'm sure you're doing, you can assign the view controller as the data source of the table view so you can tell it how many sections you want, the number of rows you want in a section, and what to render onto a cell.
In this elementary example, the number of sections could be 1 and the number of rows in this section would be the length of the colors array. Now when rendering data onto the cell, you simply index the colors array by the index path.
fun tableView(UITableView, cellForRowAt: IndexPath){
var color = colors[indexPath.row]
cell = //dequeue cell
cell.textLabel?.text = color
return cell
}
So by separating the data from the view, if you want to find what cell a particular value is at, you can simply search through the array where the color is at and the index returned would be equivalent to what cell this color is or will be at depending on if that cell has been rendered onto the screen yet.
For example using the colors array, if I were looking for "Blue"
for (index, color) in self.colors.enumerated{
if color == 'Blue'{
print("Found Blue at index \(index)")
}
}
When you want to add a cell or delete a cell, you simply modify the colors array which is storing the model data, perform the appropriate table view related action, and the invariant remains that the index of the color in the array would be equivalent to the index of the cell in the table view.
I have a UITableViewCell that is using auto-layout. When a user selects the cell, I want to display extra information in a details view that slides downwards, extending the bottom of the cell.
I'm having trouble figuring out the correct way to do this.
The transitionFromView:toView:duration:options:completion: method does not seem appropriate, because I am not replacing one view with another.
The transitionWithView:duration:options:animations:completion: method seemed like it should do the trick, but I can't figure out the correct way to achieve my goals using it.
This is what I tried initially (C#, but Objective-C/Swift equivalents should be obvious):
private void AnimateDetailsIntoView()
{
this.detailsView.Hidden = true;
this.ContentView.ConstrainLayout(() =>
this.detailsView.Top() == this.nameLabel.Bottom() &&
this.detailsView.Bottom() == this.ContentView.Bottom() - Layout.StandardSiblingViewSpacing &&
this.detailsView.Left() == this.nameLabel.Left() &&
this.detailsView.Right() == this.nameLabel.Right());
this.AddSubview(this.detailsView);
UIView.Transition(
this,
0.2,
UIViewAnimationOptions.ShowHideTransitionViews | UIViewAnimationOptions.TransitionFlipFromBottom,
() => { },
() => { });
}
This results in the table cell "spinning around", but the details view does not actually show. Even if I remove the line that hides detailsView, I still don't see it after the animation.
I suspect this is layout related, but am unsure how to "grow" the cell vertically.
Can anyone tell me what I'm doing wrong?
PS. I realize there's more to do once I get the initial animation working. I'll have to animate any previously selected cell up and remove its details panel.
As per the OP wants to expand and collapse the cell, following are the procedure to achieve it:-
Design your whole detail cell in a single prototype cell.
Now tableView heightForRowAtIndexPath: specify 2 sizes one for collapse cell and another size for (expanded)detailed cell,by giving a condition something like BOOL variable"isExpanded".
Now on didSelect of tableView or in the button's action if you are using button in cell, just store the value of indexpath.row to determine which row to expand and add this code to reload the row, this will easily do the animation trick of expand
[tbl beginUpdates];
[tbl reloadRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationBottom];
[tbl endUpdates];
Same goes for collapsing a cell, just some logic tweaks, which you can easily do.
I need some help.
That i want to scrollup uitalbeview cell which is partially
displaying.See screen shot.
Here my tableview has a three section and u can see that in morning
section the row is displaying partially.I just want to move up that
kind of row.
I tried content offset but not getting any idea that how to get first
visible row offset so,i can calculate and move it up or down
.
Note: not for bottom row only top rows.
This is the default behavior of a UITableView. The section headers will stick at the top of the screen until the next section header will reach it. One easy work around is to not use headers at all and simply use two cells. You would then have to add code in your viewForCellAtIndexPath:
if(indexPath.row == 0) {
//setup a header cell
} else {
//setup a data cell
}
I have a tableview with customized header sections and cells. I have created my model, and right now the model keeps a reference to the section view header, which is "bad" design, but I actually just followed sample code from apple. Well, my cell has a label witch will hold multi lined data, and so it should be resized so every line is visible. I guess that would be the controllers job, with heightForRowAtIndexPath right? As a fact that wouldn't be difficult to just retrieve the cell from there and get its height from there. However, that is not possible as for the fact that the cell is not created yet. (Correct me if I am wrong)
The only way I can think of this to work would be to make a reference to the cell in my model, Yes I know, bad citizen. But in that way I could easily get the height I need.
Another way would be to create a method that would calculate the height with sizeWithAttributes:, but that really seems to be bad design, as I shouldn't know my views appearance.
Am I overseeing something basic here? Or is it just the way it is.
I didn't attach any code because, I don't know what you would want, but feel free to ask me to insert something.
You don't need to call cellForRowAtIndexPath to get the specified result.
I believe you are using an array or an array of dictionaries to hold the content,
Let the array be
NSArray *arrData = [[NSArray alloc]init];
Now, in
**heightForRowAtIndexPath**
{
if ( [[arrData objectAtIndex:indexPath.row].length] < 30 )
return 40; // Initial height
else if ( [[arrData objectAtIndex:indexPath.row].length] > 30 )
return 60; // Or any other value as per your need
}
This would resize the height of the cell, depending on the length of the string inside that cell.
And, in cellForRowAtIndexPath
use
[cell.lblText setFrame:CGRectMake(0,0,cell.frame.size.width, cell.frame.size.height)];
// If you wish to make it more dynamic
in heightForRowAtIndex write
{
int _iCount = [[self.arrData objectAtIndex:indexPath.row].length] % 40;
if ( _iCount == 0 )
return 40;
else
return 40*_iCount;
}
This would solve it.
I think the cell is already created when the heightForRowAtIndexPath is called. So in that method you can get the cell, calculate the height of the label and return the correct height for the tableviewCell.