ฉันจะทำให้ ImageView ของ UITableViewCell มีขนาดคงที่ได้อย่างไรแม้ว่าภาพจะเล็กลง

ฉันมีรูปภาพมากมายที่ฉันใช้สำหรับการดูภาพของเซลล์พวกมันทั้งหมดมีขนาดไม่เกิน 50x50 เช่น 40x50, 50x32, 20x37 .....

เมื่อฉันโหลดมุมมองตารางข้อความจะไม่เรียงแถวเนื่องจากความกว้างของรูปภาพแตกต่างกันไป นอกจากนี้ฉันต้องการให้ภาพขนาดเล็กปรากฏตรงกลางตรงข้ามกับทางด้านซ้าย

นี่คือรหัสที่ฉันกำลังลองใช้ในเมธอด 'cellForRowAtIndexPath'

cell.imageView.autoresizingMask = ( UIViewAutoresizingNone );
cell.imageView.autoresizesSubviews = NO;
cell.imageView.contentMode = UIViewContentModeCenter;
cell.imageView.bounds = CGRectMake(0, 0, 50, 50);
cell.imageView.frame = CGRectMake(0, 0, 50, 50);
cell.imageView.image = [UIImage imageWithData: imageData];

อย่างที่คุณเห็นฉันได้ลองทำบางอย่างแล้ว แต่ก็ไม่ได้ผล

ไม่จำเป็นต้องเขียนใหม่ทุกอย่าง ฉันขอแนะนำให้ทำสิ่งนี้แทน:

โพสต์สิ่งนี้ไว้ในไฟล์. m ของเซลล์ที่คุณกำหนดเอง

- (void)layoutSubviews {
    [super layoutSubviews];
    self.imageView.frame = CGRectMake(0,0,32,32);
}

นี้ควรทำเคล็ดลับอย่างดี :]

สำหรับผู้ที่ไม่มีคลาสย่อยของUITableViewCell:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 [...]

      CGSize itemSize = CGSizeMake(40, 40);
      UIGraphicsBeginImageContextWithOptions(itemSize, NO, UIScreen.mainScreen.scale);
      CGRect imageRect = CGRectMake(0.0, 0.0, itemSize.width, itemSize.height);
      [cell.imageView.image drawInRect:imageRect];
      cell.imageView.image = UIGraphicsGetImageFromCurrentImageContext();
      UIGraphicsEndImageContext();

 [...]
     return cell;
}

โค้ดด้านบนกำหนดขนาดเป็น 40x40

สวิฟต์ 2

    let itemSize = CGSizeMake(25, 25);
    UIGraphicsBeginImageContextWithOptions(itemSize, false, UIScreen.mainScreen().scale);
    let imageRect = CGRectMake(0.0, 0.0, itemSize.width, itemSize.height);
    cell.imageView?.image!.drawInRect(imageRect)
    cell.imageView?.image! = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

หรือคุณสามารถใช้แนวทางอื่น (ไม่ได้ทดสอบ) ที่แนะนำโดย @Tommy:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 [...]

      CGSize itemSize = CGSizeMake(40, 40);
      UIGraphicsBeginImageContextWithOptions(itemSize, NO, 0.0)          
 [...]
     return cell;
}

Swift 3+

let itemSize = CGSize.init(width: 25, height: 25)
UIGraphicsBeginImageContextWithOptions(itemSize, false, UIScreen.main.scale);
let imageRect = CGRect.init(origin: CGPoint.zero, size: itemSize)
cell?.imageView?.image!.draw(in: imageRect)
cell?.imageView?.image! = UIGraphicsGetImageFromCurrentImageContext()!;
UIGraphicsEndImageContext();

โค้ดด้านบนคือ Swift 3+ เวอร์ชันข้างต้น

นี่คือวิธีที่ฉันทำ เทคนิคนี้ดูแลการย้ายข้อความและรายละเอียดป้ายข้อความไปทางซ้ายอย่างเหมาะสม:

@interface SizableImageCell : UITableViewCell {}
@end
@implementation SizableImageCell
- (void)layoutSubviews {
    [super layoutSubviews];

    float desiredWidth = 80;
    float w=self.imageView.frame.size.width;
    if (w>desiredWidth) {
        float widthSub = w - desiredWidth;
        self.imageView.frame = CGRectMake(self.imageView.frame.origin.x,self.imageView.frame.origin.y,desiredWidth,self.imageView.frame.size.height);
        self.textLabel.frame = CGRectMake(self.textLabel.frame.origin.x-widthSub,self.textLabel.frame.origin.y,self.textLabel.frame.size.width+widthSub,self.textLabel.frame.size.height);
        self.detailTextLabel.frame = CGRectMake(self.detailTextLabel.frame.origin.x-widthSub,self.detailTextLabel.frame.origin.y,self.detailTextLabel.frame.size.width+widthSub,self.detailTextLabel.frame.size.height);
        self.imageView.contentMode = UIViewContentModeScaleAspectFit;
    }
}
@end

...

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[SizableImageCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    }

    cell.textLabel.text = ...
    cell.detailTextLabel.text = ...
    cell.imageView.image = ...
    return cell;
}

มุมมองภาพเพิ่มเป็นมุมมองย่อยในเซลล์ tableview

UIImageView *imgView=[[UIImageView alloc] initWithFrame:CGRectMake(20, 5, 90, 70)];
imgView.backgroundColor=[UIColor clearColor];
[imgView.layer setCornerRadius:8.0f];
[imgView.layer setMasksToBounds:YES];
[imgView setImage:[UIImage imageWithData: imageData]];
[cell.contentView addSubview:imgView];

เหล็กไหลทั้งเซลล์ไม่จำเป็นต้องมีเหล็กไหล คุณสามารถใช้คุณสมบัติ indentationLevel และ indentationWidth ของ tableViewCells เพื่อเปลี่ยนเนื้อหาของเซลล์ของคุณ จากนั้นคุณเพิ่ม imageView ที่กำหนดเองของคุณที่ด้านซ้ายของเซลล์

สร้างมุมมองภาพได้ดีขึ้นและเพิ่มเป็นมุมมองย่อยในเซลล์จากนั้นคุณจะได้ขนาดเฟรมที่ต้องการ

เพียงแค่สวิฟท์ ,

ขั้นตอนที่ 1:สร้างคลาสย่อยหนึ่งคลาสของUITableViewCell
ขั้นตอนที่ 2:เพิ่มเมธอดนี้ในคลาสย่อยของ UITableViewCell

override func layoutSubviews() {
    super.layoutSubviews()
    self.imageView?.frame = CGRectMake(0, 0, 10, 10)
}

ขั้นตอนที่ 3:สร้างวัตถุมือถือที่ใช้ subclass ว่าในcellForRowAtIndexPath,

Ex: let customCell:CustomCell = CustomCell(style: UITableViewCellStyle.Default, reuseIdentifier: "Cell")

ขั้นตอนที่ 4:สนุก

UIImage *image = cell.imageView.image;

UIGraphicsBeginImageContext(CGSizeMake(35,35));
// draw scaled image into thumbnail context

[image drawInRect:CGRectMake(5, 5, 35, 35)]; //
UIImage *newThumbnail = UIGraphicsGetImageFromCurrentImageContext();
// pop the context
UIGraphicsEndImageContext();
if(newThumbnail == nil)
{
    NSLog(@"could not scale image");
    cell.imageView.image = image;
}
else
{
    cell.imageView.image = newThumbnail;
}

สิ่งนี้ใช้ได้ผลสำหรับฉันอย่างรวดเร็ว:

สร้างคลาสย่อยของ UITableViewCell (ตรวจสอบให้แน่ใจว่าคุณเชื่อมโยงเซลล์ของคุณในกระดานเรื่องราว)

class MyTableCell:UITableViewCell{
    override func layoutSubviews() {
        super.layoutSubviews()

        if(self.imageView?.image != nil){

            let cellFrame = self.frame
            let textLabelFrame = self.textLabel?.frame
            let detailTextLabelFrame = self.detailTextLabel?.frame
            let imageViewFrame = self.imageView?.frame

            self.imageView?.contentMode = .ScaleAspectFill
            self.imageView?.clipsToBounds = true
            self.imageView?.frame = CGRectMake((imageViewFrame?.origin.x)!,(imageViewFrame?.origin.y)! + 1,40,40)
            self.textLabel!.frame = CGRectMake(50 + (imageViewFrame?.origin.x)! , (textLabelFrame?.origin.y)!, cellFrame.width-(70 + (imageViewFrame?.origin.x)!), textLabelFrame!.height)
            self.detailTextLabel!.frame = CGRectMake(50 + (imageViewFrame?.origin.x)!, (detailTextLabelFrame?.origin.y)!, cellFrame.width-(70 + (imageViewFrame?.origin.x)!), detailTextLabelFrame!.height)
        }
    }
}

ใน cellForRowAtIndexPath ให้จัดคิวเซลล์เป็นประเภทเซลล์ใหม่ของคุณ:

    let cell = tableView.dequeueReusableCellWithIdentifier("MyCell", forIndexPath: indexPath) as! MyTableCell

แน่นอนว่าเปลี่ยนค่าตัวเลขให้เหมาะกับเค้าโครงของคุณ

ฉันได้สร้างส่วนขยายโดยใช้คำตอบของ @GermanAttanasio มีวิธีการปรับขนาดรูปภาพให้เป็นขนาดที่ต้องการและอีกวิธีหนึ่งในการทำเช่นเดียวกันในขณะที่เพิ่มขอบโปร่งใสให้กับรูปภาพ (สิ่งนี้มีประโยชน์สำหรับมุมมองตารางที่คุณต้องการให้รูปภาพมีระยะขอบด้วย)

import UIKit

extension UIImage {

    /// Resizes an image to the specified size.
    ///
    /// - Parameters:
    ///     - size: the size we desire to resize the image to.
    ///
    /// - Returns: the resized image.
    ///
    func imageWithSize(size: CGSize) -> UIImage {

        UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.mainScreen().scale);
        let rect = CGRectMake(0.0, 0.0, size.width, size.height);
        drawInRect(rect)

        let resultingImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        return resultingImage
    }

    /// Resizes an image to the specified size and adds an extra transparent margin at all sides of
    /// the image.
    ///
    /// - Parameters:
    ///     - size: the size we desire to resize the image to.
    ///     - extraMargin: the extra transparent margin to add to all sides of the image.
    ///
    /// - Returns: the resized image.  The extra margin is added to the input image size.  So that
    ///         the final image's size will be equal to:
    ///         `CGSize(width: size.width + extraMargin * 2, height: size.height + extraMargin * 2)`
    ///
    func imageWithSize(size: CGSize, extraMargin: CGFloat) -> UIImage {

        let imageSize = CGSize(width: size.width + extraMargin * 2, height: size.height + extraMargin * 2)

        UIGraphicsBeginImageContextWithOptions(imageSize, false, UIScreen.mainScreen().scale);
        let drawingRect = CGRect(x: extraMargin, y: extraMargin, width: size.width, height: size.height)
        drawInRect(drawingRect)

        let resultingImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        return resultingImage
    }
}

นี่คือวิธีการทำงานของ @germanattanasio ซึ่งเขียนขึ้นสำหรับSwift 3

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    ...
    cell.imageView?.image = myImage
    let itemSize = CGSize(width:42.0, height:42.0)
    UIGraphicsBeginImageContextWithOptions(itemSize, false, 0.0)
    let imageRect = CGRect(x:0.0, y:0.0, width:itemSize.width, height:itemSize.height)
    cell.imageView?.image!.draw(in:imageRect)
    cell.imageView?.image! = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
}

หากคุณใช้cell.imageView?.translatesAutoresizingMaskIntoConstraints = falseคุณสามารถตั้งค่าข้อ จำกัด บน imageView นี่คือตัวอย่างการทำงานที่ฉันใช้ในโครงการ ฉันหลีกเลี่ยงการคลาสย่อยและไม่จำเป็นต้องสร้างสตอรี่บอร์ดด้วยเซลล์ต้นแบบ แต่ใช้เวลาพอสมควรในการเริ่มต้นใช้งานดังนั้นจึงควรใช้เฉพาะในกรณีที่ไม่มีวิธีที่ง่ายกว่าหรือกระชับกว่านี้สำหรับคุณ

override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 80
}



    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = UITableViewCell(style: .subtitle, reuseIdentifier: String(describing: ChangesRequiringApprovalTableViewController.self))

    let record = records[indexPath.row]

    cell.textLabel?.text = "Title text"

    if let thumb = record["thumbnail"] as? CKAsset, let image = UIImage(contentsOfFile: thumb.fileURL.path) {
        cell.imageView?.contentMode = .scaleAspectFill
        cell.imageView?.image = image
        cell.imageView?.translatesAutoresizingMaskIntoConstraints = false
        cell.imageView?.leadingAnchor.constraint(equalTo: cell.contentView.leadingAnchor).isActive = true
        cell.imageView?.widthAnchor.constraint(equalToConstant: 80).rowHeight).isActive = true
        cell.imageView?.heightAnchor.constraint(equalToConstant: 80).isActive = true
        if let textLabel = cell.textLabel {
            let margins = cell.contentView.layoutMarginsGuide
            textLabel.translatesAutoresizingMaskIntoConstraints = false
            cell.imageView?.trailingAnchor.constraint(equalTo: textLabel.leadingAnchor, constant: -8).isActive = true
            textLabel.topAnchor.constraint(equalTo: margins.topAnchor).isActive = true
            textLabel.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true
            let bottomConstraint = textLabel.bottomAnchor.constraint(equalTo: margins.bottomAnchor)
            bottomConstraint.priority = UILayoutPriorityDefaultHigh
            bottomConstraint.isActive = true
            if let description = cell.detailTextLabel {
                description.translatesAutoresizingMaskIntoConstraints = false
                description.bottomAnchor.constraint(equalTo: margins.bottomAnchor).isActive = true
                description.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true
                cell.imageView?.trailingAnchor.constraint(equalTo: description.leadingAnchor, constant: -8).isActive = true
                textLabel.bottomAnchor.constraint(equalTo: description.topAnchor).isActive = true
            }
        }
        cell.imageView?.clipsToBounds = true
    }

    cell.detailTextLabel?.text = "Detail Text"

    return cell
}

ผมมีปัญหาเหมือนกัน. ขอบคุณคนอื่น ๆ ที่ตอบ - ฉันสามารถหาวิธีแก้ปัญหาร่วมกันโดยใช้ส่วนต่างๆของคำตอบเหล่านี้

วิธีแก้ปัญหาของฉันคือใช้ swift 5

ปัญหาที่เรากำลังพยายามแก้ไขคือเราอาจมีภาพที่มีอัตราส่วนภาพต่างกันTableViewCellแต่เราต้องการให้ภาพเหล่านั้นแสดงผลด้วยความกว้างที่สม่ำเสมอ แน่นอนว่ารูปภาพควรแสดงผลโดยไม่มีการบิดเบือนและเติมเต็มพื้นที่ทั้งหมด ในกรณีของฉันฉันรู้สึกดีกับการ "ครอบตัด" ของภาพที่สูงและผอมดังนั้นฉันจึงใช้โหมดเนื้อหา.scaleAspectFill

ในการทำสิ่งนี้ฉันได้สร้างคลาสย่อยที่กำหนดเองของUITableViewCell. StoryTableViewCellในกรณีของฉันฉันชื่อว่า ทั้งชั้นเรียนจะถูกวางไว้ด้านล่างพร้อมกับความคิดเห็นในบรรทัด

วิธีนี้ใช้ได้ผลสำหรับฉันเมื่อใช้มุมมองอุปกรณ์เสริมที่กำหนดเองและป้ายข้อความแบบยาว นี่คือภาพของผลลัพธ์สุดท้าย:

มุมมองตารางที่แสดงผลพร้อมความกว้างของภาพที่สม่ำเสมอ

class StoryTableViewCell: UITableViewCell {

    override func layoutSubviews() {
        super.layoutSubviews()

        // ==== Step 1 ====
        // ensure we have an image
        guard let imageView = self.imageView else {return}

        // create a variable for the desired image width
        let desiredWidth:CGFloat = 70;

        // get the width of the image currently rendered in the cell
        let currentImageWidth = imageView.frame.size.width;

        // grab the width of the entire cell's contents, to be used later
        let contentWidth = self.contentView.bounds.width

        // ==== Step 2 ====
        // only update the image's width if the current image width isn't what we want it to be
        if (currentImageWidth != desiredWidth) {
            //calculate the difference in width
            let widthDifference = currentImageWidth - desiredWidth;

            // ==== Step 3 ====
            // Update the image's frame,
            // maintaining it's original x and y values, but with a new width
            self.imageView?.frame = CGRect(imageView.frame.origin.x,
                                           imageView.frame.origin.y,
                                           desiredWidth,
                                           imageView.frame.size.height);

            // ==== Step 4 ====
            // If there is a texst label, we want to move it's x position to
            // ensure it isn't overlapping with the image, and that it has proper spacing with the image
            if let textLabel = self.textLabel
            {
                let originalFrame = self.textLabel?.frame

                // the new X position for the label is just the original position,
                // minus the difference in the image's width
                let newX = textLabel.frame.origin.x - widthDifference
                self.textLabel?.frame = CGRect(newX,
                                               textLabel.frame.origin.y,
                                               contentWidth - newX,
                                               textLabel.frame.size.height);
                print("textLabel info: Original =\(originalFrame!)", "updated=\(self.textLabel!.frame)")
            }

            // ==== Step 4 ====
            // If there is a detail text label, do the same as step 3
            if let detailTextLabel = self.detailTextLabel {
                let originalFrame = self.detailTextLabel?.frame
                let newX = detailTextLabel.frame.origin.x-widthDifference
                self.detailTextLabel?.frame = CGRect(x: newX,
                                                     y: detailTextLabel.frame.origin.y,
                                                     width: contentWidth - newX,
                                                     height: detailTextLabel.frame.size.height);
                print("detailLabel info: Original =\(originalFrame!)", "updated=\(self.detailTextLabel!.frame)")
            }

            // ==== Step 5 ====
            // Set the image's content modoe to scaleAspectFill so it takes up the entire view, but doesn't get distorted
            self.imageView?.contentMode = .scaleAspectFill;
        }
    }
}

UITableViewCell ปกติทำงานได้ดีในการวางตำแหน่งสิ่งต่างๆ แต่ cell.imageView ดูเหมือนจะไม่ทำงานอย่างที่คุณต้องการ ฉันพบว่ามันง่ายพอที่จะทำให้ UITableViewCell จัดวางได้อย่างถูกต้องโดยให้ cell.imageView เป็นภาพขนาดที่เหมาะสมก่อน

// Putting in a blank image to make sure text always pushed to the side.
UIGraphicsBeginImageContextWithOptions(CGSizeMake(kGroupImageDimension, kGroupImageDimension), NO, 0.0);
UIImage *blank = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
cell.imageView.image = blank;

จากนั้นคุณก็สามารถเชื่อมต่อ UIImageView ที่ใช้งานได้อย่างถูกต้องกับ

// The cell.imageView increases in size to accomodate the image given it.
// We don't want this behaviour so we just attached a view on top of cell.imageView.
// This gives us the positioning of the cell.imageView without the sizing
// behaviour.
UIImageView *anImageView = nil;
NSArray *subviews = [cell.imageView subviews];
if ([subviews count] == 0)
{
    anImageView = [[UIImageView alloc] init];
    anImageView.translatesAutoresizingMaskIntoConstraints = NO;
    [cell.imageView addSubview:anImageView];

    NSLayoutConstraint *aConstraint = [NSLayoutConstraint constraintWithItem:anImageView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:cell.imageView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
    [cell.imageView addConstraint:aConstraint];

    aConstraint = [NSLayoutConstraint constraintWithItem:anImageView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:cell.imageView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0];
    [cell.imageView addConstraint:aConstraint];

    aConstraint = [NSLayoutConstraint constraintWithItem:anImageView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:kGroupImageDimension];
    [cell.imageView addConstraint:aConstraint];

    aConstraint = [NSLayoutConstraint constraintWithItem:anImageView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:kGroupImageDimension];
    [cell.imageView addConstraint:aConstraint];
}
else
{
    anImageView = [subviews firstObject];
}

ตั้งค่ารูปภาพบน anImageView และจะทำในสิ่งที่คุณคาดหวังให้ UIImageView ทำ กำหนดขนาดที่คุณต้องการไม่ว่าคุณจะให้ภาพใดก็ตาม สิ่งนี้ควรอยู่ใน tableView: cellForRowAtIndexPath:

วิธีนี้จะวาดภาพเป็น "ขนาดพอดี" ภายในสี่เหลี่ยมผืนผ้าที่กำหนด

CGSize itemSize = CGSizeMake(80, 80);
UIGraphicsBeginImageContextWithOptions(itemSize, NO, UIScreen.mainScreen.scale);
UIImage *image = cell.imageView.image;

CGRect imageRect;
if(image.size.height > image.size.width) {
    CGFloat width = itemSize.height * image.size.width / image.size.height;
    imageRect = CGRectMake((itemSize.width - width) / 2, 0, width, itemSize.height);
} else {
    CGFloat height = itemSize.width * image.size.height / image.size.width;
    imageRect = CGRectMake(0, (itemSize.height - height) / 2, itemSize.width, height);
}

[cell.imageView.image drawInRect:imageRect];
cell.imageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

วิธีแก้ปัญหาที่เราพบนั้นคล้ายกับวิธีอื่น ๆ super.layoutSubviews()แต่เพื่อให้ได้ตำแหน่งที่ถูกต้องของตัวคั่นเราต้องตั้งค่าก่อนที่จะเรียก ตัวอย่างง่าย:

class ImageTableViewCell: UITableViewCell {

    override func layoutSubviews() {
        separatorInset.left = 70
        super.layoutSubviews()

        imageView?.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
        textLabel?.frame = CGRect(x: 70, y: 0, width: 200, height: 50)
    }

}