Swift tableview cell radio button implementation - ios

I need to place a radio button in tableview custom cell. whenever user clicks the tableview cell or button then radio button needs to work. I tried by using below code but didn't execute well.
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell:TableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as! TableViewCell
cell.country.text = self.animals[indexPath.row]
cell.selectionStyle = UITableViewCellSelectionStyle.none;
if selectedRows.contains(indexPath)
{
cell.radioButton.setImage(UIImage(named:"check.png"), for: .normal)
}
else
{
cell.radioButton.setImage(UIImage(named:"uncheck.png"), for: .normal)
}
return cell
}

Here's a great solution for creating radio buttons in a UITableView using a storyboard that requires zero code - and has 2 great Cool Tips!!
Make sure your table view is set to Single Selection, and to use Static cells.
Add a Basic cell, set the image to be your unchecked button image, and make sure the selection style is Default
Cool Tip # 1: Click on and select the cell's image view, and then set it's highlighted image to be your checked state. When the cell is highlighted or selected, the image view within will change to show its highlighted state.
Cool Tip # 2: Next, drag a UIView into the cell's content view, behind the text label. As you're using a basic cell, you won't be able to drop it directly into the cell, you'll need to drag it into onto the Document Outline on the left instead. Then hook this up to the cell's selected background view outlet. When a cell is selected (or highlighted), this view will be displayed in the background. In this case, we're going to use it to prevent the grey background appearing, so set its colour to Clear. Note that it doesn't matter what size the view is, and there's no need to set any constraints - it's automatically sized to match the cell at runtime.
Finally, duplicate this cell and change the text for each of your radio button options. Build and run, and you have code-free radio buttons!

In your TableViewCell class why don't you create a data source element and override the didSet for it. also in your data source for the UITableView I would recommend an array of something more than just a String.
I haven't compiled the below so this is just an idea.
import UIKit
class TableViewCell : UITableViewCell {
var data: Animal? {
didSet {
self.country.text = data.description
if (data.isSelected) {
self.radioButton.setImage(UIImage(named:"check.png"), for: .normal)
} else {
self.radioButton.setImage(UIImage(named:"uncheck.png"), for: .normal)
}
}
}
}
in your view controller you will of course have to set the isSelected property whenever a row is tapped.
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
var animal = self.animals[indexPath.row]
animal.isSelected = !animal.isSelected
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell:TableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as! TableViewCell
cell.data = self.animals[indexPath.row]
}
and for your Animal maybe something like this:
struct Animal {
var description: String
var isSelected: Bool
}

Related

Change custom cell content view color

I added a change theme button in my main view controller where I have a tiny table view. I can change every color except a table view cell's Content View background color, and I can't access it outside cellForRowAt.
What should I do? Is there anyway to trigger a function from my custom Cell to change the color?
You can add a property in your controller to determine the color of the cells. When you wanna change the color, you call tableView.reloadData(). This will make cellForRowAt be called on each visible cell, and you can change color in this delegate method.
Your viewController
YourViewController: UIViewController {
fileprivate var cellColor = UIColor.blue
// where you change color
func changeColor() {
cellColor = UIColor.red
// this will make the delegate method `cellForRowAt` be called on each visible row
tableView.reloadData()
}
}
cellForRowAt:
// delegate method
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "reuse id", for: indexPath) as! YourCustomCell
cell.contentView.backgroundColor = cellColor
// anything else...
return cell
}
You can achieve this by implementing delegate, if you have custom cell class and access the delegate method to change content view color.

Xcode - Custom TableViewCell Shows Wrong Data

I was trying to create a custom TableView Cell in Storyboards. The correct data shows when the ViewController is loaded. However, when I start scrolling back and forth, the data is showing up in random cells, not in the right place. I was also trying to make the text of a Right Detail cell bold programmatically like this:
if dayOfWeek!-1 == indexPath.row {
cell.textLabel?.font = UIFont.boldSystemFont(ofSize: (cell.textLabel?.font.pointSize)!)
cell.detailTextLabel?.font = UIFont.boldSystemFont(ofSize: (cell.detailTextLabel?.font.pointSize)!)
}
However, similar things happened: the bold seems right at first and the text are bolded in random cells. Any idea how to fix this? Thanks!
class CustomTableViewCell: UITableViewCell {
override func prepareForReuse() {
// your cleanup code
}
}
in cell for indexpath
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell: CustomTableViewCell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath) as! CustomTableViewCell
if dayOfWeek!-1 == indexPath.row {
cell.textLabel?.font = UIFont.boldSystemFont(ofSize: (cell.textLabel?.font.pointSize)!)
cell.detailTextLabel?.font = UIFont.boldSystemFont(ofSize: (cell.detailTextLabel?.font.pointSize)!)
}
return cell
}
You have to reload the tableview when you have called it.
The random shown data is due to the property undertaken by the various cell from the each other.
You have faced these type of problem when you are using the multiple tableview on the single view.
Hence the cell having the elements wrongly considered the properties, which can be solved by refreshing the table view which is "RELOAD".
If the Data coming is from the API , then it would be an advantage, put the Response data to your main array and Reload the table view .

UITableViewCell background hiding UI Elements

I've created a custom UITableView Cell and everything seems to be working with one exception. I have a UISwitch that is inside the cell (hooked up to it's own UITableViewCell class that the tableView loads) but it only appears when you click on the cell or the cells background is clear/transparent. Ideally I have a white background for the cell and the switch on top of the background.
I've tried some hacky stuff like:
cell.bringSubview(toFront: cell.switch)
and
cell.switch.isHidden = false
But that obviously didn't work.
The switch is enabled and ON by default.
The tableview and switch is created from storyboards.
The hierarchy looks like this - TableView > Cell > Content View > Switch
Here's a video to see in detail - http://quick.as/rpyub8mv
Xcode Storyboard Screenshot
Custom TableViewCell Class
class SettingsBoolCell: UITableViewCell {
#IBAction func switchAction(_ sender: UISwitch) {
}
#IBOutlet weak var switchOutlet: UISwitch!
}
ViewController Implementation
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "settingsSectionOne", for: indexPath) as! SettingsBoolCell
switch indexPath.section {
case 0: cell.textLabel?.text = titles[0]
case 1: cell.textLabel?.text = titles[1]
case 2: cell.textLabel?.text = titles[2]
default: ()
}
return cell
}
If you're using storyboard, make sure that your UISwitch is inside the right view, and that it is under the other components in your document outline.
If you're generating the view inside the cell programmatically, make sure that you add the UISwitch to the right view with addSubView last. You can also set zPositions with view.layer.zPosition attribute.
So I was setting -
cell.textLabel.text?
to change the text of the cells inside the tableView. The problem is, apparently when you are using a custom cell, you can't access the default cell properties without some funky behavior.
Thanks everyone for your help!

UITableViewRow displays Buttons without Color

I a have 2 Buttons within my custom TableViewCell.
The Buttons are in bright colors. (BackgroundColor set)
However: Running the app - The Buttons color disappear and it becomes white:
I tried to programmatically change the color in viewDidLoad but Xcode doesn't react.
Any Ideas?
The heart of the problem is that you have introduced buttons but you are also setting the cell's textLabel!.text. You can't mix and match like that. If you're going to use a custom cell, you must use a completely custom cell.
Set the cell's type to Custom, drag a label into it, use a custom cell class, give it an outlet to the label, set this label's text, and all will be well.
Here's my custom cell with an outlet:
class MyCell : UITableViewCell {
#IBOutlet var label : UILabel!
}
Here's my cellForRow:
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! MyCell
cell.label.text = "Hi" // NOT cell.textLabel!.text
return cell
}
As you can see, the result is that button appears just fine.
You have an extra word in there:
cell.noButton.backgroundColor = UIColor.greenColor()

Comment controller with table view section header and footer

How can I achieve this screen with UITableViewCell and UITableViewController. With table section and header. Some ideas to achieve this?? Thanks!
What have you tried so far?
Your question seems a little broad.
You will need a set of custom UITableViewCell Subclasses, which you design in nibs.
To make the cells seem apart from each other, resize the content size of the Cells, and make the cell background another color.
Create a Segmented Control and add it to the Tableviews HeaderView.
For the FooterView it seems like this is some kind of subclassed Tabbar.
Easiest way to customise it in such a way, would be to create a View, and add buttons to it. Add this View as Subview to your TableViewController.
Have 2 UITableViewCell's one for each type i.e. 1 for showing the image and text and another for showing just the text.
Then in the cellForRowAt delegate method determine which to type to use based off the object you are data binding it to.
Example:
public final func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let customObject = customObjects[indexPath.section]
switch customObject.type {
case .imageAndText:
if let cell = tableView.dequeueReusableCell(withIdentifier: ImageAndTextCell.identifier, for: indexPath) as? ImageAndTextCell {
cell.customObject = customObject
return cell
}
case .text:
if let cell = tableView.dequeueReusableCell(withIdentifier: TextCell.identifier, for: indexPath) as? TextCell {
cell.customObject = customObject
return cell
}
}
return UITableViewCell()
}

Resources