Trying to get full-size cell images on table view - ios

So I have this going on by using regular image views and buttons to work:
But now I want it to bounce as the user scrolls, any ideas on how to get this going? I've tried using the table view but I can't figure out how to get the images to be the background. Any perks between using a table view and the current method I'm using? This is a learning experience for me, and that's the whole point of the project. Any help would be appreciated, thanks in advance.

Here is one way to achieve what you want (change image names accordingly):
cell.contentView.backgroundColor = UIColor(patternImage: UIImage(named: "NewYork")!)
For example:
override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
switch indexPath.row{
case 0:
cell.contentView.backgroundColor = UIColor(patternImage: UIImage(named: "NewYork")!)
case 1:
cell.contentView.backgroundColor = UIColor(patternImage: UIImage(named: "LA")!)
case 2:
cell.contentView.backgroundColor = UIColor(patternImage: UIImage(named: "Miami")!)
default:
cell.contentView.backgroundColor = UIColor(patternImage: UIImage(named: "default")!)
}
}
You can also set it inside of cellForRowAtIndexPath the same way.
The disadvantage of this is the image either needs to be a repeating pattern or fit the cell size exactly which isn't very flexible for different size devices.
Another option is to use a custom table cell and create a UIImageView the same size as the cell. Here is a tutorial link describing how to create a custom cell. Now you can just set the image in your cellForRowAtIndexPath similar to this:
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("MyCustomCell", forIndexPath: indexPath) as! CustomTableViewCell
switch indexPath.row{
case 0:
cell.img_Thumbnail?.image = UIImage(named: "NewYork")
case 1:
cell.img_Thumbnail?.image = UIImage(named: "LA")
case 2:
cell.img_Thumbnail?.image = UIImage(named: "Miami")
default:
cell.img_Thumbnail?.image = UIImage(named: "default")
}
return cell
}

Related

How do I make this UITableView clear (transparent) in Swift 3

How do I make this UITableView and it's cells clear in Swift 3.
I have gone through the previous threads but I am still getting a white background.
As you can see from my code I have tried the various methods mentioned:
override func viewDidLoad() {
self.communitiesTableView.delegate = self
self.communitiesTableView.dataSource = self
let background = CAGradientLayer().bespokeColor()
background.frame = self.view.bounds
// view.addSubview(background)
super.viewDidLoad()
// Do any additional setup after loading the view.
}
and in my cell table function:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let title = self.communities[indexPath.row]
let cell = UITableViewCell()
cell.textLabel?.text = title
cell.textLabel?.font = UIFont(name: "Avenir", size: 12)
cell.textLabel?.textColor = UIColor.red
cell.textLabel?.backgroundColor = UIColor.clear
cell.contentView.backgroundColor = UIColor.clear
communitiesTableView.backgroundColor = UIColor.clear
cell.layer.backgroundColor = UIColor.clear.cgColor
return cell
}
This gif shows the problem - notice the black lines showing the table is present just not populated (as no-one is logged in)
But for a second it is clear, then turns white.
Where am I going wrong?
This is from another post that I have found:
Apple document says
... In iOS 7, cells have a white background by default; in earlier versions of iOS, cells inherit the background color of the enclosing table view. If you want to change the background color of a cell, do so in the tableView:willDisplayCell:forRowAtIndexPath: method of your table view delegate.
You might need to use willDisplayCell UITableView delegate method to have a transparent background for your table view .
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cellforRowAtIndexPath:(NSIndexPath *)indexPath
{
[cell setBackgroundColor:[UIColor clearColor]];
}
How do I apply the code above as it says its for iOS 7?
Note: Below code been tested in Swift 3.
Method 1:
Select your tableViewCell from your storyboard and goto Attributes Inspector under View change Background to clear
Method 2: Try below code inside your cellForRowAt
cell.layer.backgroundColor = UIColor.clear.cgColor
Note : If above method didn't works.try clear your project build by pressing shift + option + command + k
Update: Update your cellForRowAt from below code...
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath as IndexPath)
cell.textLabel?.text = communities[indexPath.row]
cell.textLabel?.font = UIFont(name: "Avenir", size: 12)
cell.textLabel?.textColor = UIColor.red // set to any colour
cell.layer.backgroundColor = UIColor.clear.cgColor
return cell
}
You can try this
In viewDidLoad:
tableView.backgroundColor = UIColor.clear
In cellForRowAt:
cell.contentView.backgroundColor = UIColor.clear
It's work for me.
The two first answer doesn't work for me so I add a clear background everywhere and the white bg go away.
cell.layer.backgroundColor = UIColor.clear.cgColor
cell.backgroundColor = .clear
tableView.layer.backgroundColor = UIColor.clear.cgColor
tableView.backgroundColor = .clear
SWIFT 5.5.3
You have to set both table and cell background clear.
Inside tableView function:
tableView.backgroundColor = .clear
cell.backgroundColor = .clear
tableView.tableFooterView = UIView()
For this to work you have to implement a new tableview method:
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell,
forRowAt indexPath: IndexPath) {
cell.backgroundColor = UIColor.clear
}
You are missing setting the background colour of contentView of the cell.
cell.contentView.backgroundColor = UIColor.clear
Maybe, you can check your table view's alpha.
Setting these wont be enough as you have not applied clear color to the contentView of the tableView and so it is coloring white in it. Try this in cellForRowAtIndexPath
cell.contentView.backgroundColor = UIColor .clearColor()
Make sure in the Identity Inspector you have Custom Class -> Class "YourCustomClassCellName" selected in the Drop Down Menu. With your UITableViewCell selected in Interface Builder, make sure your Identifier is "YourCellName" and then in the func tableView(_ tableViewL UITableView, cellForRowAt) method before the return cell that you have cell.backgroundColor = UIColor.clear i.e,
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if let cell = tableView.dequeueReusableCell(withIdentifier: "YourCellName", for: indexPath) as? YourCellNameClass {
cell.configureCell(parameter: ClassDataModel[indexPath.row])
cell.backgroundColor = UIColor.clear
return cell
} else {
return UITableViewCell()
}
I had the same issue and wrote all the code before I checked to see make sure my CellClass was selected and face palmed when I spent an hour wondering why it worked on another viewController and not in this instance. Even if you use IB to clear out the default white backgrounds, you still have to write the cell.backgroundColor = UIColor.clear. I was like yep, I found another bug in 8.2.1, but no just an iD10t operator bug.
I tested using swift 3. It's working
uiTableName.backgroundView = nil
uiTableName.backgroundColor = UIColor.clear
In the Storyboard for the TableView and TableViewCell, instead of setting the background to "Clear/Default" set the background to white (or any color) with an opacity of 0.
Also make sure you set the ContentView background to clear, but the TableViewCell is what was tripping me up. By doing this you shouldn't need to do anything in the code.
In Swift 4, Write the following code under viewDidLoad of your desired class:-
tableView.backgroundColor = UIColor.clear
Write the following code under the cellForRowAt i.e dataSource of your tableView:-
let cell = tableView.dequeueReusableCell(withIdentifier: "CellIdentifierName", for: indexPath) as! UITableViewCell //Cell ClassName
cell.layer.backgroundColor = UIColor.clear.cgColor
return cell
Why nobody said about this?:
#IBOutlet weak var tableView: UITableView!
// Drag and drop the tableView from the storyboard
override func viewDidLoad() {
super.viewDidLoad()
tableView.isHidden = true
}
The result gives you an opportunity to hide the whole tableView with a single line.

How to redesign horizontal cells to vertical cells

This is what all of my cells look like. With some information displayed on right hand side of the cell. Instead of this design with a circular radius image on the left hand side and information on the right hand.I want my cells to be an Image and the information to be on top of that image.
This is the type of style I want on my cells to have, without the space in between images, I gave this an attempt by removing the information labels and using a horizontal Stack View on the cell.
But this is what the cells ended up looking like. For the radius of the image I didn't do it programatically I did trough the Identity Inspector
Keypath layer.cornerRadius
Type Number
Value 30
which makes the images round. Other than that there's no much code involved in the tableView, It's all mostly done trough the Main.StoryBoard, below I added some code showing how I configured the cells. Any tips or ideas on how I can accomplish this?
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cellIdentifier = "Cell"
let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as! RestaurantTableViewCell
//* Configure the cell...
cell.nameLabel.text = restaurants[indexPath.row].name
cell.thumbnailImageView.image = UIImage(named: restaurants[indexPath.row].image)
cell.locationLabel.text = restaurants[indexPath.row].location
cell.typeLabel.text = restaurants[indexPath.row].type
cell.accessoryType = restaurants[indexPath.row].isVisited ? .Checkmark : .None
return cell
}
If you want the cell to show an image and then show text on top of that image, I'd suggest you set the image as the cell background view (rounding the corners if needed) and then populate your labels and accessory view as you are already doing.
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let dictData : NSDictionary = arrayOfData.objectAtIndex(indexPath.row) as! NSDictionary
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)
cell.textLabel?.text = "THIS IS SOME TEXT"
if let image = dictData.objectForKey("Image"){
cell.backgroundColor = UIColor.clearColor()
let imageView = UIImageView(image: image as? UIImage)
imageView.layer.cornerRadius = 30.0
imageView.clipsToBounds = true
cell.backgroundView = imageView
}
return cell
}
That will give you text on top of an image :
So it looks like you use AutoLayout problem here is that you have right constraint. You can try removing constraint and set fixed width.
Step 1: Add UITableView and add constraints
Step 2: Add UIImageView and set it to "Aspect Fill" Otherwise your rounded corner image will not cover whole cell. (You can also set it to "Aspect fit" if you want). And add constraints as shown in image.
Step 3: Add labels and other information and also add constraints according to your requirement.

How do I change the background image of a UICollectionViewCell that has been tapped?

I have multiple UICollectionViewCells. When the user taps on a specific cell, I would like my app to change the background image of the touched cell.
My approach is to focus on the didSelectItemAtIndexPath method. When a cell is touched, this method will be called.
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
var cell: UICollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("cellIdentifier", forIndexPath: indexPath) as! UICollectionViewCell
cell.backgroundView = UIImageView(image: UIImage(named: "myImage"))
}
However, I can't get it working but I don't know why. The issue is probably related to indexPath, that doesn't return a correct value of the cell. I tried using indexPath.row and this does actually return an Int number of the cell.
What's more, I'm also creating a new UICollectionViewCell with var but this cell already exists.
Why isn't the cell updating its background image? How do I change the background image of a UICollectionViewCell that has been touched by the user?
I totally agree with the Josh's answer, but if you change the background image using the didSelectItemAtIndexPath method it works fine as well. Then, you can use the cellForRowAtIndexPath method that returns the UITableViewCell at the specified indexPath, like in the following way:
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
var cell = tableView.cellForRowAtIndexPath(indexPath) as UITableViewCell!
cell.backgroundView = UIImageView(image: UIImage(named: "photo2"))
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! UITableViewCell
cell.backgroundView = UIImageView(image: UIImage(named: "photo1"))
cell.selectionStyle = .None
return cell
}
I just put the selectionStyle to .None to avoid the highlight. I hope this help you.

Swift : Single Selection with UITableViews

I have a regular UITableView with single selection enabled. My problem is that if the user selects multiple rows then the original rows remain selected. I also have a problem where the highlight remains gray no matter if I set the cell.selectionStyle = UITableViewCellSelectionStyle.Blue
My view controller is defined in the Storyboard.
Table View
Content: Dynamic Prototypes
Selection: Single Selection
Show Selection on Touch [X]
Background: Black Color
Index Row Limit: 0
Table Cell View
Style: Custom
Selection: Blue
Background: Black Color
Here are some screenshots:
Here is my code:
class AreaViewController: UITableViewController
{
override func viewDidLoad()
{
super.viewDidLoad()
self.tableView.backgroundColor = backgroundColour
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
{
let cell = tableView.dequeueReusableCellWithIdentifier("areacell", forIndexPath: indexPath) as! UITableViewCell
cell.selectionStyle = UITableViewCellSelectionStyle.Blue
cell.textLabel?.text = "Cell Contents"
cell.textLabel?.textColor = UIColor.whiteColor()
return cell
}
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath)
{
let cell = tableView.dequeueReusableCellWithIdentifier("areacell", forIndexPath: indexPath) as! UITableViewCell
}
}
I must be missing something obvious but I've not been able to see anything non standard.
From the UITableViewCell Class Reference
UITableViewCellSelectionStyleBlue The cell has a default background
color when selected.
In iOS 7, the selection color is no longer blue. Use
UITableViewCellSelectionStyleDefault instead.
If you want a special background color for selected cells you have to set the cells' backgroundView:
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("myCell", forIndexPath: indexPath) as! UITableViewCell
// Configure the cell...
let backgroundView = UIView()
backgroundView.backgroundColor = UIColor.redColor()
cell.selectedBackgroundView = backgroundView
return cell
}
Looks like this:
Argh! I found it at last. Seems like I was calling let cell = tableView.dequeueReusableCellWithIdentifier("areacell", forIndexPath: indexPath) as! UITableViewCell in the didSelectRowAtIndexPath method. Removing it caused everything to start working again. Obvious really. Thanks for your help zisoft in putting me on the right road.

UITableViewCellAccessoryType Change checkmark colour

I am trying to figure out how to programmatically(not in storyboard) set the colour for UITableViewCellAccessoryType.Checkmark.
I feel kinda stupid asking how to do something as simple as this, but I could not find the answer in the apple docs. Any help would be great. Thanks.
I set the accessory type like this:(works fine)
cell.accessoryType = .Checkmark
EDIT : If you want to change the image used for checkmark, this worked for me. But POB's answer is what I ended up using to simply change the colour.
let checkImage = UIImage(named: "checkmark.png")
let checkmark = UIImageView(image: checkImage)
cell.accessoryView = checkmark
The following code should work:
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as UITableViewCell
//Change cell's tint color
cell.tintColor = UIColor.redColor()
//Set UITableViewCellAccessoryType.Checkmark here if necessary
cell.accessoryType = .Checkmark
/* ... */
return cell
}
Here is code for Swift 3.0
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
cell.tintColor = UIColor.red
cell.accessoryType = .checkmark
return cell
}
You can also do it globally (for all table view cells) like this:
UITableViewCell.appearance().tintColor = .green
Nice little trick :)

Resources