Home / Questions / 157095
Accepted
Bruno Sosa Fast Tag
Asked: 2020-04-19 09:18:52 +0800 CST 2020-04-19 09:18:52 +0800 CST

background gradient

  • 772

I have a table which has custom cells,

enter image description here

like the one in the image, I have the background to be gray, but my goal is for the gray to be in degrades, that is, to have a stronger gray from the right to the lighter one on the left, example image:

enter image description here

So far I have

enter image description here

I leave the code of the cell class:

    class PanelHomeTableViewCell: UITableViewCell {

    @IBOutlet weak var strLblTitleOptionsMenu: UILabel!
    @IBOutlet weak var imgOptionsMenu: UIImageView!
    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
    }



}

The Method where I set the background gray

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let mainCell = Bundle.main.loadNibNamed("PanelHomeTableViewCell", owner: self, options: nil)?.first as! PanelHomeTableViewCell
    mainCell.selectionStyle = .none
    // SETEO GRIS ; QUIERO DEGRADES
    mainCell.backgroundColor = Utils.Color.COLOR_E8E8E8

    mainCell.strLblTitleOptionsMenu.textColor = Utils.Color.COLOR_2B5034
    switch (indexPath.section)
    {

    case 0:

        mainCell.strLblTitleOptionsMenu.text=NSLocalizedString("strLblOption1",comment:"")
        mainCell.imgOptionsMenu.image = UIImage.init(named:"PagarMenu")
        return mainCell
    case 1:
        mainCell.strLblTitleOptionsMenu.text = NSLocalizedString("strLblOption2",comment:"")
        mainCell.imgOptionsMenu.image = UIImage.init(named:"BillingMenu")
        return mainCell
    case 2:
        mainCell.strLblTitleOptionsMenu.text = NSLocalizedString("strLblOption3",comment:"")
        mainCell.imgOptionsMenu.image = UIImage.init(named:"CollectionNotificationsMenu")
        return mainCell
    case 3:
        mainCell.strLblTitleOptionsMenu.text = NSLocalizedString("strLblOption4",comment:"")
        mainCell.imgOptionsMenu.image = UIImage.init(named:"billingQueryMenu")
        return mainCell
    case 4:
        mainCell.strLblTitleOptionsMenu.text = NSLocalizedString("strLblOption5",comment:"")
        mainCell.imgOptionsMenu.image = UIImage.init(named:"MovsBalanceMenu")
        return mainCell
    case 5:
        mainCell.strLblTitleOptionsMenu.text = NSLocalizedString("strLblOption6",comment:"")
        mainCell.imgOptionsMenu.image = UIImage.init(named:"CashOutMenu")
        return mainCell
    default:
        break
    }
    return mainCell
}

i use xcode with swift

swift

1 Answers

  1. Best Answer

    To apply a background with a gradient color to your cell you can use the following extension:

    extension UIView {
    /** Aplica un gradiente a la instancia. Pueden haber 2 o más colores. El sistema de coordenadas del gradiente es como el que se muestra en la siguiente figura.

            (0,0)____(1,0)
                |    |
                |    |
            (1,0)----(1,1)
    */
     /// - Parameter colores: Arreglo de los colores usados por el gradiente. Default: blanco y gris
     /// - Parameter ubicaciones: Arreglo conteniendo las ubicaciones de los colores. Default: nil.
     /// - Parameter puntoInicial: CGPoint del punto de inicio del gradiente. The minValue(x = 0, y = 0) maxValue(x = 1, y = 1). DefaultValue(x = 0, y = 1)
     /// - Parameter puntoFinal: CGPoint del punto final del gradiente. The minValue(x = 0, y = 0) maxValue(x = 1, y = 1). DefaultValue(x = 1, y = 0)
     func aplicarGradiente(colores: [UIColor] = [.white,.gray], ubicaciones: [NSNumber]? = nil,puntoInicial: CGPoint = CGPoint(x: 0, y: 1), puntoFinal : CGPoint = CGPoint(x: 1, y: 0)) {
        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.name = "gradientLayer"
        gradient.colors = colores.map { $0.cgColor }
        gradient.locations = ubicaciones
        gradient.startPoint = puntoInicial
        gradient.endPoint = puntoFinal
        self.layer.insertSublayer(gradient, at: 0)
     }
}

    And to use it, it would be as follows:

    view.aplicarGradiente(colores: [.white, .gray])

    or in your case it would be

    cell.aplicarGradiente(colores: [.white, .gray], puntoInicial: CGPoint.init(x: 0, y: 0.5), puntoFinal: CGPoint.init(x: 1, y: 0.5))
    • 2