Learn Courses My Dashboard

Buttons for array items

Hi everyone,
I have set up an array but want to create a different button for each of the items in the array, not sure how I need to approach this.

It’s kind of hard to answer without more context and sample code. What are you trying to do? How are the buttons related to the array items? What should the buttons do?

so this is my code and when they click on each of the array item it should take it to that specific fruits details page

FruitsArray = ["Apple","Apricot", "Avocado", "Banana", "Blackberry", "Blueberry", "Cherry", "Citrus Fruit"]
        
    }
    // MARK: - Table view data source

    override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return FruitsArray.count
    }
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = self.tableView.dequeueReusableCell(withIdentifier: "Cell")
            let fruit = FruitsArray[indexPath.row]
            cell?.textLabel?.text = fruit
            cell?.textLabel?.font = UIFont.systemFont(ofSize: 20)

            return cell!
        } 

@arinhai

Hi Arin.

If you want to present a Detail View of a particular item of fruit in the array then if you go back to the discussion we had some weeks ago (around March 5) then you could expand on the code example I provided by using the tableView method didSelectRowAt. In that method you can select the item of fruit from the array using the indexPath.row corresponding to the row selected and then present a Detail View by passing that item of fruit to the DetailView.

See this example project as a way to do that.

Got it! Thank you!
Would I be able to add an image next to each of the array items?

I assume that you mean a small image in the table View? Yes that can certainly be done. You will have to load images into your assets folder for each item of fruit and name them so that the names match the names in the array. You will then have to create a custom tableViewCell so that you can have an imageView for the photograph and a Label for the description.

yes, exactly. I have already added the images to the assets folder and the names match with the list in the array. I do have the tableviewcell with the image and label on storyboard already. what do I do after that?

Sorry about the delay in getting back to you. We are on different time zones.

When you want to customise the Table View Cell you need to create a Custom TableViewCell class and in that class, link the imageView and the Label from your storyboard by Control dragging the outlet from the storyboard to that class file.

In your storyboard you also need to add that custom class to the table View Cell via the Identity Inspector.

In your ViewController where you have the tableView methods, you now need to reference those properties in your custom TableViewCell class to assign the image name to the ImageView.image and the name of the fruit to the label.text.

For Example this is what you could have for a custom TableViewCell class:

class FruitTableViewCell: UITableViewCell {

    @IBOutlet weak var fruitImageView: UIImageView!
    @IBOutlet weak var fruitLabel: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
}

Then in the cellForRowAt method;

  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Fruit") as! FruitTableViewCell

        let fruit = allFruit[indexPath.row]
        cell.fruitImageView.image = UIImage(named: fruit)
        cell.fruitLabel.text = fruit.capitalized
        cell.fruitLabel.font = UIFont.systemFont(ofSize: 20)

        return cell
    }

Hope that helps.