web-dev-qa-db-fra.com

Comment changer l'image UITableViewCell en cercle dans UITableView

Mon code fonctionne pour la plupart.

  • Le problème que je rencontre est que les images commencent sous forme de carré et deviennent cercle lorsque je fais défiler le tableau ou que je l'actualise.

Qu'est-ce que je rate? 

Voici mon code: 

    cell.imageView.layer.cornerRadius = cell.imageView.frame.size.width / 2.0;
    cell.imageView.layer.borderWidth = 3.0;
    cell.imageView.layer.borderColor = [UIColor colorWithRed:157.0/255.0 green:34.0/255.0 blue:53.0/255.0 alpha:1.0]
    .CGColor;
    cell.imageView.clipsToBounds = YES;

    NSDictionary *Tweet = (self.results)[indexPath.row];

    dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
    dispatch_async(queue, ^{

        NSString * imageString = [Tweet valueForKeyPath:@"user.profile_image_url"];
        NSData * imageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString:imageString]];

        if (imageData != nil)
        {
            dispatch_async(dispatch_get_main_queue(), ^{

                cell.imageView.image = [UIImage imageWithData: imageData];

                [cell setNeedsLayout];
            });
        }
    });

EDIT---- Le code est dans cellForRowAtIndexPath

  • Dès que je lance l'application, les images des cellules sont carrées. Si je tire pour actualiser le changement pour arrondir ou si je commence à faire défiler le tableau, ils se arrondissent. 

EDIT DEUX

Un autre problème que je vois est que les images changent lorsque je défile. 

Comment puis-je empêcher cela? 

iosobjective-cuitableviewuiimageview
17
Luke Irvin

Si quelqu'un ayant ce problème a la solution, voici la solution: 

Rapide

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    var cell:ContactCellTableViewCell? = tableView.dequeueReusableCellWithIdentifier("contactCell", forIndexPath: indexPath) as? ContactCellTableViewCell



    var contact : ContactStruct
    image = searchResults[indexPath.row]
    let newImage = resizeImage(image, toTheSize: CGSizeMake(70, 70))
    var cellImageLayer: CALayer?  = cell?.imageView.layer
    cellImageLayer!.cornerRadius = 35
    cellImageLayer!.masksToBounds = true
    cell?.imageView.image = newImage


    return cell!
}

Comme vous l'avez peut-être remarqué, le 35 hardcode correspond à la moitié de la taille de l'image, ce qui correspond à 70 in here .

func resizeImage(image:UIImage, toTheSize size:CGSize)->UIImage{


    var scale = CGFloat(max(size.width/image.size.width,
        size.height/image.size.height))
    var width:CGFloat  = image.size.width * scale
    var height:CGFloat = image.size.height * scale;

    var rr:CGRect = CGRectMake( 0, 0, width, height);

    UIGraphicsBeginImageContextWithOptions(size, false, 0);
    image.drawInRect(rr)
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext();
    return newImage
}

Remarque: j'utilise une classe de cellule personnalisée comme ci-dessous:

import UIKit

class ContactCellTableViewCell: UITableViewCell {

    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var contactImage: UIImageView!
    @IBOutlet weak var phoneLabel: UILabel!




    override func awakeFromNib() {
        super.awakeFromNib()

    }

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

        // Configure the view for the selected state
    }
}

Il m'a vraiment fallu un certain temps pour comprendre celui-ci. Les images deviennent arrondies après le défilement au début, mais maintenant, en utilisant ce code, vous allez avoir les images arrondies dans la cellule depuis le début. J'espère que ça a aidé quelqu'un.

10
Siavash Alp

Essayez ceci en dérogation-

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    // image Width(84) / 2 = 42
            cell.CellImage.layer.cornerRadius = 42.0
            cell.CellImage.layer.masksToBounds = true
         //or   

        cell.CellImage.layer.cornerRadius = cell.CellImage.frame.width / 2
        cell.CellImage.clipsToBounds = true
}
7
Binoy jose

Très probablement, le cadre de la cellule (et donc le cadre de l'imageView) n'est pas défini lors de la toute première création de la cellule. Donc, définir la variable cornerRadius de la couche imageView en fonction de cette image initiale ne fonctionne pas. La meilleure solution consiste à implémenter la méthode déléguée tableView:willDisplayCell:forRowAtIndexPath: et à y placer le calque:

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    cell.imageView.layer.cornerRadius = cell.imageView.frame.size.width / 2.0;
}
4
rmaddy

C'est simple..

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.ImageView.layer.cornerRadius = 150.0f;
    cell.ImageView.layer.borderWidth = 2.0f;
    cell.ImageView.layer.borderColor = [UIColor blackColor].CGColor;
    cell.ImageView.clipsToBounds = YES;
}

Reportez-vous à ce lien pour plus d'informations: http://ios-blog.co.uk/tutorials/quick-tips/how-to-create-rounded-avatars-in-your-ios-application/

3
svmrajesh

Créez une cellule personnalisée et ajoutez une vue d'image (avec un IBOutlet), dimensionnée et positionnée comme vous le souhaitez (la prise est "iv" dans mon exemple ci-dessous). Placez le code pour rendre la vue de l'image arrondie dans la méthode awakeFromNib (en supposant que votre cellule soit créée dans une nib ou un storyboard).

-(void)awakeFromNib {
    self.iv.layer.cornerRadius = self.iv.frame.size.width / 2.0;
    self.iv.layer.borderWidth = 3.0;
    self.iv.layer.borderColor = [UIColor colorWithRed:157.0/255.0 green:34.0/255.0 blue:53.0/255.0 alpha:1.0].CGColor;
    self.iv.clipsToBounds = YES;
}
1
rdelmar

Définissez la vue de l'image sur un cercle à l'intérieur de l'appel asynchrone où vous définissez l'image. 

dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
dispatch_async(queue, ^{

    NSString * imageString = [Tweet valueForKeyPath:@"user.profile_image_url"];
    NSData * imageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString:imageString]];

    if (imageData != nil)
    {
        dispatch_async(dispatch_get_main_queue(), ^{

            cell.imageView.image = [UIImage imageWithData: imageData];
cell.imageView.layer.cornerRadius = cell.imageView.frame.size.width / 2.0;
cell.imageView.layer.borderWidth = 3.0;
cell.imageView.layer.borderColor = [UIColor colorWithRed:157.0/255.0 green:34.0/255.0 blue:53.0/255.0 alpha:1.0]
.CGColor;
cell.imageView.clipsToBounds = YES;
            [cell setNeedsLayout];
        });
    }
});
0
dreamer.psp
@interface MyCell : UITableViewCell
@end

@implementation MyCell

- (void)awakeFromNib
{
    [super awakeFromNib];
    self.imageView.layer.masksToBounds = YES;
    self.textLabel.font = [UIFont systemFontOfSize:17];
    self.textLabel.textColor = [UIColor darkTextColor];
}

// --- image view frame is empty rect inside tableView: willDisplayCell:
// +++ set cornerRadius inside layoutSubviews works. 
- (void)layoutSubviews
{
    [super layoutSubviews];

    // layout image view
    CGRect vfr = self.frame;
    CGRect imgvr = self.imageView.frame;
    imgvr.Origin.x = 16;
    imgvr.size.width = CGRectGetHeight(vfr);
    self.imageView.frame = imgvr;

    // update corner radius
    self.imageView.layer.cornerRadius = imgvr.size.width * 0.5f;

    // layout label
    CGRect lblr = self.textLabel.frame;
    lblr.Origin.x = CGRectGetMaxX(imgvr) + 16;
    lblr.size.width = CGRectGetWidth(vfr) - CGRectGetMaxX(imgvr) - 32;
    self.textLabel.frame = lblr;
}

@end
0
Roman Solodyashkin

Voici une solution parfaite et précise pour les images circulaires dans UITableview Cell . Modifiez simplement votre classe UITableviewCell (cellule personnalisée) avec le code ci-dessous.

override func awakeFromNib() {
    super.awakeFromNib()
    imgEvent.layer.frame = (imgEvent.layer.frame).insetBy(dx: 0, dy: 0)
    imgEvent.layer.borderColor = UIColor.gray.cgColor
    imgEvent.layer.cornerRadius = (imgEvent.frame.height)/2
    imgEvent.layer.masksToBounds = false
    imgEvent.clipsToBounds = true
    imgEvent.layer.borderWidth = 0.5
    imgEvent.contentMode = UIViewContentMode.scaleAspectFill
  }

Cela aidera également à résoudre le problème d’image circulaire seulement après avoir fait défiler la table. (Le cas échéant).![enter image description here] 1 ) 

0
Laxmikant W.

J'ai eu un problème similaire, mon UIImageView était initialement un carré et ne s'afficherait comme circulaire que lorsque UITableViewCell dans lequel il se trouvait était en surbrillance ou sélectionné.

C'était une solution simple:

Swift 2.0 

imgView.layer.cornerRadius = imgView.frame.width / 2
imgView.clipsToBounds = true

Cela a été placé à l'intérieur de awakeFromNib () pour mon UITableViewCell personnalisé. 

Ceci suppose que imgView est le nom de UIImageView connecté via un storyboard à l'intérieur de cette UITableViewCell personnalisée.

0
Elliott Davies