Créer un UITableViewCell Couleur au pourcentage spécifique

Question

J'ai une application de quiz de l'application divisée en différentes catégories. Les catégories peuvent être vues dans un UITableView par exemple. Catégorie A, Catégorie B, Catégorie C ... etc. J'essaie d'afficher le pourcentage de questions auxquelles on a répondu en tant que représentation visuelle dans UITableView en coloriant l'arrière-plan d'une cellule de catégorie UITableView. Par exemple, si la personne a répondu à 75% des questions de la catégorie A, je souhaite que l'arrière-plan de la catégorie A de l'UITableView soit coloré de 75% de l'arrière-plan de la cellule de gauche à droite. La seule façon de savoir comment le faire est de faire des images d'arrière-plan d'un fond vert et en fonction du pourcentage de questions posées, placer l'image d'arrière-plan en relation avec l'arrière-plan de la cellule.

Existe-t-il un moyen plus simple? que je pourrais peut-être utiliser quelque chose comme

Cell.backgroundcolor = UIColor.greencolor().75%ofCell. 

Je sais que ce code est incorrect, mais il obtient sorte de l'idée à travers ce que je suis en train de faire.

Answer 1

Je pense que vous pouvez le faire sans ajouter une vue de vous cellule en utilisant une couche:

Dans votre classe cellulaire, vous pouvez ajouter ce qui suit fonction:

func addGradientLayer(percentage: Double) { 
    let color1 = UIColor.green 
    let color2 = UIColor.clear 

    let gradientLayer = CAGradientLayer() 
    // sets the gradient frame as the bounds of your cell 
    gradientLayer.frame = bounds 

    gradientLayer.colors = [color1.cgColor, color2.cgColor] 

    // tells the gradient to go from left to right 
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5) 
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5) 

    //this line is the important one: as 
    //long the second Double is smaller than 
    //your percentage, you will not get a gradient 
    //but a clear separation between your two colors. 
    gradientLayer.locations = [percentage, 0.0] 

    layer.addSublayer(gradientLayer) 
} 

vous pouvez appeler cette méthode dans votre méthode awakeFromNib() ou cellForRowAt (délégué tableView):

tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
    ... 
    cell.addGradientLayer(percentage: 0.8) 
} 

Answer 2

Vous pouvez ajouter un UIView en tant que sous-vue à la cellule et rendre la couleur d'arrière-plan de l'UIView la couleur que vous voulez.

Avant d'ajouter la vue, définissez la largeur des vues sur 0,75 * cellWidth.

Answer 3

En supposant que vous utilisez storyboards, ajoutez un UIView avec backgroundColor = .greenColor() à la cellule

Ajouter haut, à gauche et en bas pour la vue limite égale à la superview, puis ajouter une contrainte largeur pour la vue et créer un débouché pour cela.

Ensuite, dans la cellule que vous pouvez dire:

var pctScore: CGFloat { 
    didSet { 
     let viewWidth = cell.contentView.frame.width * pctScore 
     widthConstraint.constant = viewWidth 
    } 
}