web-dev-qa-db-ja.com

UITableViewCellイメージをUITableViewでCircleに変更する方法

私のコードはほとんどの部分で機能します。

  • 私が抱えている問題は、画像が正方形から始まり、テーブルをスクロールしたり更新したりすると円に変わることです。

何が欠けていますか？

これが私のコードです：

    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 [〜＃〜] ----コードはcellForRowAtIndexPathにあります

  • アプリを起動すると、セルの画像は正方形になります。 pullToRefreshを変更すると、丸めに変更されるか、テーブルをスクロールし始めると、丸めに変更されます。

2つ編集

もう1つの問題は、スクロールすると画像が変化することです。

これを防ぐにはどうすればよいですか？

iosobjective-cuitableviewuiimageview
20
Luke Irvin

この問題が発生した場合の解決策は次のとおりです

Swift

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!
}

お気づきかもしれませんが、5ハードコードは基本的にはここでは7である画像サイズの半分です。そしてこれがリサイズ機能です：

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
}

注：以下のようにカスタムセルクラスを使用しています。

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
    }
}

これを理解するのに本当に時間がかかりました。画像は最初にスクロールすると丸みを帯びますが、このコードを使用すると、最初からセル内に丸みのある画像が表示されます。それが誰かを助けることを願っています。

10
Siavash Alp

これをオーバーライドで試してください

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

セルが作成された最初の時点では、セルのフレーム（したがって、imageViewのフレーム）が設定されていない可能性があります。したがって、その初期フレームに基づいてimageViewのレイヤーのcornerRadiusを設定しても機能しません。最善の解決策は、tableView:willDisplayCell:forRowAtIndexPath:デリゲートメソッドを実装し、そこにレイヤーを設定することです。

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

それは簡単です..

- (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;
}

詳細については、このリンクを参照してください： http://ios-blog.co.uk/tutorials/quick-tips/how-to-create-rounded-avatars-in-your-ios-application/

2
Rajesh Loganathan

カスタムセルを作成し、イメージビュー（IBOutlet付き）を追加します。サイズと位置は自由に設定できます（以下の例ではアウトレットは "iv"です）。 awakeFromNibメソッドで画像ビューを丸めるコードを配置します（セルがnibまたはストーリーボードで作成されていると想定）。

-(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;
}
2
rdelmar

同様の問題がありました。UIImageViewは最初は正方形で、その中にあるUITableViewCellが強調表示または選択されている場合にのみ円形として表示されました。

それは簡単な修正でした：

Swift 2.

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

これは、カスタムUITableViewCellのawakeFromNib（）内に配置されました。

これは、imgViewが、このカスタムUITableViewCell内のストーリーボードを介して接続されたUIImageViewの名前であると想定しています。

1
Elliott Davies

画像ビューを、画像を設定した非同期呼び出し内の円に設定します。

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
cell.imageView?.layer.cornerRadius = 22.0
cell.imageView?.layer.masksToBounds = true
0
tuwilof
@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

以下は、UITableviewセル内の円形画像の完璧かつ国家的なソリューションです。以下のコードを使用して、UITableviewCell（カスタムセル）クラスを変更するだけです。

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
  }

また、テーブルをスクロールした後にのみ、画像の循環の問題を解決するのに役立ちます。![enter image description here] 1 ）

0
Laxmikant W.

セルがコードによる場合：

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        let myImageView = (cell as! MyCustomCell).myImageView
        myImageView.layoutIfNeeded()
        myImageView.layer.cornerRadius = myImageView.frame.width / 2.0
 }
0
Sergey Di