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()
}
Related
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
}
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 .
In my viewcontroller,
I added my tableview (#IBOutlet weak var MyTableView: UITableView!) in which I added several custom cells with specific size depending on the elements needed inside.
I call each cell with identifier :
func tableView(_ MyTableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if indexPath.row == 0 {
let cell = MyTableView.dequeueReusableCell(withIdentifier: "FirstCell") as! FirstCell
self.SettingsTableView.rowHeight = 220
return cell
} else if indexPath.row == 1 { etc etc...
And at a specific row, I've added a UIswitch directly in the cell that should expand / collapse this cell depending if it's ON or OFF.
I'd like to make it work a bit like the SelectRowAtIndexPath method and animate it to make appear 3 textFields below....
I'm looking for hours a solution, if you have any idea... Any suggestion is welcome !
If your switch is properly hooked up to the cell, the problem may be that you didn't refresh the UITableView, and thence it doesn't expand.
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!
I would like to confirm the approach I took to solve an issue with dequeuing custom cells in a UITableView as it scrolls such that the cells do not contain the old cell's data...
The app that contains a UITableView with custom UITableViewCells ("CustomCell"). Each CustomCell contains a UIStackView with one or more custom views via a nib ("CustomView"). I reuse the CustomCell as follows:
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier(ReuseIdentifierCustomCell, forIndexPath: indexPath) as! CustomCell
configureCell(cell, atIndexPath: indexPath)
return cell
}
The issue was that the cell would contain "old" data as the cell was being reused. To fix this, I override the prepareForReuse method in CustomCell as follows:
override func prepareForReuse() {
super.prepareForReuse()
for case let view as CustomView in stackView.subviews {
view.removeFromSuperview()
}
}
Then in layoutSubviews, I add the subviews back in:
override func layoutSubviews() {
super.layoutSubviews()
if stackView.subviews.isEmpty {
addCustomViewsToCell()
}
}
Performance seems fine thus far, but curious if this is a proper approach or if I will run into issues with scale in the future. I have not been able to find another workable approach thus far.
Thanks
Your code to reuse cells is correct. A common approach is to configure your cell's data within the cellForRowAtIndexPath function by setting a variable or calling a function on your custom cell:
let cell = tableView.dequeueReusableCellWithIdentifier(ReuseIdentifierCustomCell, forIndexPath: indexPath) as! CustomCell
cell.data = myData[indexPath.row] // where myData is an array of type [Data]
return cell
Your cell would be in charge of its own layout to display the new data:
var data: Data {
didSet {
// configure and refresh your UI here
}
}
I suspect your issue has to do with your configureCell function. If you can, move this code into your cell's logic instead. This will be cleaner and easier to understand.
As far as performance, you might be fine now if your stack views don't have much content in them, but if they continue to grow in complexity you might see frame rate drops on older devices.