I'm working on a UITableView where I need to change the background color of every second cell to help visibility of the data.
To do this, I tried making a simple variable called "cellAlteration" which I set to 0 before Loading the data (So the first cell should always be white)
var cellAlteration: Int = 0
Then where I setup my cell I do the following:
// #BackgroundColor
if cellAlteration == 0 {
self.backgroundColor = UIColor.whiteColor()
cellAlteration = 1
} else {
self.backgroundColor = UIColor.formulaWhiteColor()
cellAlteration = 0
}
(I know this should be changed to a BOOL datatype instead of Int, but that seems irrelevant for my issue at this moment)
Here is an image of the result:
As you can see it's not alternating correctly.
When I've been trying to test this, it looks like it gets the cells that is loaded first correctly (UITableView only loads and displays the cells you can see) - the problem with the coloring doesn't seem to happen until I scroll down and the UITableView has to load and display new cells.
So since my simple variable check approach isn't working, what's the correct way to do cell alternation in Swift?
Any help would be greatly appreciated :)!
You don't need a variable to do this. Base the color on whether the row is even or odd. Put this in cellForRowAtIndexPath after you dequeue a cell,
if indexPath.row % 2 == 0 {
cell.backgroundColor = UIColor.whiteColor()
}else{
cell.backgroundColor = UIColor.formulaWhiteColor()
}
Related
As a technical assessment for a job I'm interviewing for, I'm making a basic word search game, where the user looks for translations of a given word in a given language. I've got a fair amount of iOS experience, but I've never done dynamically-generated views with run-time-determined text labels, etc. before.
To be clear, I know this is a job assessment, but regardless of whether I get the job, or whether I'm even able to finish the assessment in time, I think this is an interesting problem and I'd like to learn how to do this, so I'll be finishing this as an app to run in the simulator or on my own phone.
So. I have a view embedded in/controlled by a UINavigationController. I have a couple of informational labels at the top, a set of buttons to perform actions across the bottom of the view, and the main view area needs to contain a 2D grid of characters. I'd like to be able to take an action when a character is tapped, such as highlight the character if it's part of a valid word. I'd like to be able to support grids of different sizes, so I can't just create an autolayout-constrained grid of labels or buttons in Interface Builder.
I've tried various methods for displaying the 2D grid of characters, but the one I thought had the most promise was as follows:
Use a UITableView to represent the rows of characters. Inside each table view cell, use a UIStackView with a dynamically generated collection of UILabels.
To fill my UITableView, I have the following:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = gameGrid.dequeueReusableCell(withIdentifier: "GameGridCell") as! TWSGameGridCell
if indexPath.row < word.grid.count {
cell.characters = word.grid[indexPath.row]
cell.configureCell()
return cell
}
return cell
}
The function in the custom table cell class that configures the cell (ideally to create and display the row of characters) is this:
func configureCell()
{
self.stackView = UIStackView(arrangedSubviews: [UILabel]())
self.stackView.backgroundColor = (UIApplication.shared.delegate as! TWSAppDelegate).appBackgroundColor()
self.stackView.distribution = .fillEqually
let myRect = self.frame
self.stackView.frame = myRect
let characterGridWidth = myRect.width / CGFloat(characters.count)
for cIndex in 0..<characters.count {
let labelRect = CGRect(x: myRect.origin.x + (CGFloat(cIndex) * characterGridWidth), y: myRect.origin.y, width: CGFloat(characterGridWidth), height: myRect.height)
let currentLabel = UILabel(frame: labelRect)
currentLabel.backgroundColor = (UIApplication.shared.delegate as! TWSAppDelegate).appBackgroundColor()
currentLabel.textColor = (UIApplication.shared.delegate as! TWSAppDelegate).appTextColor()
currentLabel.font = UIFont(name: "Palatino", size: 24)
currentLabel.text = characters[cIndex]
self.stackView.addArrangedSubview(currentLabel)
}
}
My guess is that it's running into trouble in that the labels have no visible rect when they're created, so they don't display anywhere.
The resulting view when run in the simulator is a white box covering as many rows of the table view as should be filled with rows of characters, and the rest of the table view shows with the custom background color I'm using), as per this image:
What I'm trying for is for that white box to have the same background color as everything else, and be filled with rows of characters. What am I missing?
Problem might be about adding 'labelRect', you already specify the rect of your stackView. I think regardless of the frame of labels, stackView should naturally be able to create it's inner labels and distribute them inside of itself.
Also can you add the following, after you initialize your stackView, inside your configureCell method:
self.stackView.axis = .horizontal
Edit: from the comment below, the solution was to create the labels (though I switched to buttons for further functionality), add them all to a [UIButton], then use that to create the UIStackView (self.stackView = UIStackView(arrangedSubviews: buttons)).
I have a custom cell with two labels and a image. I receive some data from internet in Json. Everything works fine; every cell fills with the correspondent data. I've added a new label that has to be filled just like the other ones. This is the data:
let cell = tableView.dequeueReusableCellWithIdentifier("friendCell") as! friendCell
cell.friendPicture?.image = newImageUser
cell.friendName.text = "#\(theName[indexPath.row])"
if repliesNumber[indexPath.row] == "0"{
cell.repliesNumber.textColor = UIColor.redColor()
}
else{
cell.repliesNumber.textColor = UIColor(patternImage: UIImage(named:"backgroundPattern")!)
}
if AttachedImage[indexPath.row] != ""{
cell.backgroundColor = .orangeColor()
}
For testing I've made to be colored the first two cells. My issue is that the fist two cells get colored, but if I scroll down, every two, three, four cells (depending on the device -device height I guess-, another two cells get colored too.
It's odd/weird because the rest of labels work fine.
Where should I start looking?
If I print the json data I receive everything is okay
Here is a gif:
GIF
Basically my problem is that when I scroll down the data disappear but only from a label, the rest of labels and images doesn't.
It's not very clear from your code which are the cells that are "colored". Is it from the orangeColor() condition ?
Anyway, UITableViewCells in an UITableView are reused, which means you are given them in the exact same state you left them. This is why, if you don't reset your backgroundColor, they still are orange as you scroll.
So basically, whenever you do something in a certain condition in a cell, don't forget to restore its state when the condition is not met. In your case, this gives :
// cellForRowAtIndexPath {
if itemIsMultimedia() {
cell.Multimedia.text = "it's multimedia"
cell.Multimedia.hidden = false
}
else {
cell.Multimedia.text = ""
cell.Multimedia.hidden = true
}
here #aimak
if AttachedImage[indexPath.row] != ""{
cell.Multimedia.text = "It's multimedia"
}
else{
cell.Multimedia.hidden = true
}
I have a custom UITableViewCell with a UILabel that has multiple lines. I'm trying to implement a tap expand/contract feature so that when the label is only one line, no expansion happens when you tap the cell, but if the label is multiple lines, the cell is capable on expanding/contracting when tapped. I got the expansion and contracting working, but I can't figure out how to make it work based on the number of lines in the UILabel.
This is currently what I'm doing for the cell expansion, but its not based on the UILabel at all.
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
if (indexPath.row == self.selectedRow?.row && self.expand == true)
{
self.previousRow = self.selectedRow?.row
return 200
}
else if(self.previousRow == self.selectedRow?.row && self.expand == false){
return 65
}
return 65
}
You can use table view dynamic cell sizing with autolayout in conjunction with the numberOfLines property of UILabel to expand and compress cell.
The heart of the solution is this:
tableView.beginUpdates()
label.numberOfLines = label.numberOfLines == 0 ? 1 : 0
tableView.endUpdates()
This is essentially triggering an animation on the table and toggling the number of lines from 0 (any number of lines) to 1 line. Autolayout is doing the rest.
I think this is better than updating height metrics manually. The full example project can be found on my github: https://github.com/rayfix/MultilineDemo
You probably need to measure the text yourself because the label won't have more lines until you expand.
Something like this (the 100000 just needs to be a big number)
CGSize textSize = [self.label.text sizeWithFont:self.label.font constrainedToSize:CGSizeMake(self.label.bounds.width, 100000) lineBreakMode: UILineBreakModeWordWrap];
Each UICollectionViewCell has its own button hooked up to the following action:
#IBAction func dropDown(sender:UIButton){
var pt = sender.bounds.origin
var ptCoords : CGPoint = sender.convertPoint(pt, toView:sender.superview);
var ptCoords2 : CGPoint = sender.convertPoint( ptCoords, toView: collectionView!);
var cellIndex: NSIndexPath = self.collectionView!.indexPathForItemAtPoint(ptCoords2)!
//var i : NSInteger = cellIndex.row;
//var i2 : NSInteger = cellIndex.section;
var selectedCell = collectionView?.cellForItemAtIndexPath(cellIndex) as CollectionViewCell!
selectedCell.button.backgroundColor = UIColor.blackColor()
for (var i = 0; i < 3; i++){
var textView : UITextView! = UITextView(frame: CGRectMake(self.view.frame.size.width - self.view.frame.size.width/1.3, CGFloat(50 + (30*(i+1))), CGRectGetWidth(self.view.frame), CGFloat(25)))
textView.backgroundColor = UIColor.whiteColor()
selectedCell.contentView.addSubview(textView)
}
}
What I want to do is add 3 subviews to only the cell that's been tapped. The subviews are added successfully, but as soon as I scroll, cells that come into view & correspond to the previously set indexPath are loaded with 3 subviews. I figure this is due to the dequeueReusableCellWithReuseIdentifier method, but I can't figure out a way around it. I considered removing the subviews on scrollViewDidScroll, but ideally I would like to keep the views present on their parent cell until the button is tapped again.
EDIT:
Okay, I ditched the whole convertPoint approach and now get the cell index based on button tags:
var selectedCellIndex : NSIndexPath = NSIndexPath(forRow: cell.button.tag, inSection: 0)
var selectedCell = collectionView?.cellForItemAtIndexPath(selectedCellIndex) as CollectionViewCell!
Regardless, when I try to add subviews to only the cell at the selected index, the subviews are duplicated.
EDIT:
I've created a dictionary with key values to track the state of each cell like so:
var cellStates = [NSIndexPath: Bool]()
for(var i = 0; i < cellImages.count; i++){
cellStates[NSIndexPath(forRow: i, inSection: 0)] = false
}
which are set by cellStates[selectedCellIndex] = true within the dropDown function. Then in the cellForItemAtIndexPath function, I do the following check:
if(selectedIndex == indexPath && cellStates[indexPath] == true){
for (var i = 0; i < 3; i++){
var textView : UITextView! = UITextView(frame: CGRectMake(cell.frame.size.width - cell.frame.size.width/1.3, CGFloat(50 + (30 * (i+1))), CGRectGetWidth(cell.frame), CGFloat(25)))
textView.backgroundColor = UIColor.whiteColor()
cell.contentView.addSubview(textView)
println("display subviews")
println(indexPath)
}
} else {
println("do not display subviews")
println(indexPath)
}
return cell
where selectedIndex, the NSIndexPath of the active cell set via the dropDown function, is compared to the indexPath of the cell being created & the cellState is checked for true.
Still no luck - the subviews are still displayed on the recycled cell. I should mention that "display subviews" and "do not display subviews" are being logged correctly while scrolling, so the conditional statement is being evaluated successfully.
MY (...hack of a...) SOLUTION!
Probably breaking a bunch of best coding practices, but I assigned tags to all the created subviews, remove them at the beginning of the cellForItemAtIndexPath method, and create them again if the cellState condition returns true.
No problem. Basically, you need to store program state OUTSIDE your UI components in what is commonly called a "model". Not sure what your app is so I am going to make up an example. Assume you want to show a grid where each cell is initially green and they toggle to red when the user taps it. You would need to store the state (I.e., whether a cell has been tapped or not) in some two dimensional array, which is going to contain a Boolean for ALL cells, and not just the ones that are currently showing (assuming you have enough cells to make the grid scroll). When the user taps a cell you set the flag in corresponding array element. Then, when the iOS calls you back to provide a cell (in the dequeue method) you check the state in the array, apply the appropriate color to the UIView of the cell, then return it. That way, iOS can reuse the cell view objects for efficiency, while at the same time you apply your model state to corresponding cells dynamically. Let me know if this clear.
One of two things:
- Disallow pooling of cells.
- Maintain sufficient info in your mode to be able to draw cells depending on the model rather than on their location on screen. That is, store a bit in your model that determines whether or not to show the three views for each "logical" cell. Then, when asked to dequeue a cell, check its model and add/remove the backgrounds dynamically.
What's the best way to have UITableView cells with multiple lines ? Let's say 5.. or 6 ?
Instead of textLabel and la detailTextLabel ? Should I create a custom style ? or a custom view ?
Any tutorial / example is well accepted.
thanks
You can use the existing UILabel views in the UITableViewCell for this. The secret is to do the following:
cell.textLabel.numberOfLines = 0;
cell.textLabel.lineBreakMode = UILineBreakModeWordWrap;
By default, the UILabel only allows 1 line of text. Setting numberOfLines to 0 basically removes any limitations on the number of lines displayed. This allows you to have multiple lines of text.
The setting of the lineBreakMode to Word Wrap tells it to word wrap long lines of text onto the next line in the label. If you don't want this, you can skip that line.
You may also have to adjust the height of the table view cell as needed to make more room for the multiple lines of text you add.
For iOS 6.0 and later, use NSLineBreakByWordWrapping instead of UILineBreakModeWordWrap, which has been deprecated.
Since Swift 3:
func allowMultipleLines(tableViewCell: UITableViewCell) {
tableViewCell.textLabel?.numberOfLines = 0
tableViewCell.textLabel?.lineBreakMode = .byWordWrapping
}
There is a method to accomplish this just using storyboard. First, select the cell and go to the attributes section on the right panel. The first option should be 'Style'. Change this from custom to basic. Now, in your cell you should see text that says 'Title'. Double click it and in the right panel you should be able to set the number of lines.
cell.textLabel.numberOfLines = 0
together with
tableView.rowHeight = UITableView.automaticDimension
Does work but only if the number of lines is limited (2-3 lines).
What I had to do as well was embed the cell fields in a StackView. That made all the difference. Now I can display as many lines as I want.
I found this worked for me on Xcode Version 8.0 (8A218a)
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) UITableViewCell {
let cell = UITableViewCell()
//MARK: word wrapping in cell
cell.textLabel?.text = self.choices[(indexPath as NSIndexPath).row]
cell.textLabel?.numberOfLines=0 // line wrap
cell.textLabel?.lineBreakMode = NSLineBreakMode.byWordWrapping
return cell
}