ปรับขนาดภาพใน UIButton เป็น AspectFit?


98

ฉันต้องการเพิ่มรูปภาพลงใน UIButton และต้องการปรับขนาดรูปภาพของฉันให้พอดีกับ UIButton (ทำให้รูปภาพเล็กลง) กรุณาแสดงวิธีการทำ

นี่คือสิ่งที่ฉันได้ลองแล้ว แต่ไม่ได้ผล:

  • การเพิ่มรูปภาพลงในปุ่มและใช้setContentMode:
[self.itemImageButton setImage:stretchImage forState:UIControlStateNormal];
[self.itemImageButton setContentMode:UIViewContentModeScaleAspectFit];
  • การสร้าง "ภาพยืด":
UIImage *stretchImage = [updatedItem.thumbnail stretchableImageWithLeftCapWidth:0 topCapHeight:0];

ฉันคิดว่าสิ่งนี้ถูกเปลี่ยนเป็นพฤติกรรมเริ่มต้นในเฟิร์มแวร์ 4.0 ขึ้นไป
Shaun Budhram

1
ดูวิธีแก้ปัญหาในstackoverflow.com/a/28205566/481207
Matt

คำตอบ:


28

หากคุณต้องการปรับขนาดภาพจริงๆให้ทำ แต่ควรปรับขนาดก่อนใช้งาน การปรับขนาดในขณะรันจะสูญเสียรอบของ CPU

นี่คือหมวดหมู่ที่ฉันใช้ในการปรับขนาดรูปภาพ:

UIImage + พิเศษ h

@interface UIImage (Extras)
- (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize;
@end;

UIImage + Extra.m

@implementation UIImage (Extras)

- (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize {

UIImage *sourceImage = self;
UIImage *newImage = nil;

CGSize imageSize = sourceImage.size;
CGFloat width = imageSize.width;
CGFloat height = imageSize.height;

CGFloat targetWidth = targetSize.width;
CGFloat targetHeight = targetSize.height;

CGFloat scaleFactor = 0.0;
CGFloat scaledWidth = targetWidth;
CGFloat scaledHeight = targetHeight;

CGPoint thumbnailPoint = CGPointMake(0.0,0.0);

if (!CGSizeEqualToSize(imageSize, targetSize)) {

        CGFloat widthFactor = targetWidth / width;
        CGFloat heightFactor = targetHeight / height;

        if (widthFactor < heightFactor) 
                scaleFactor = widthFactor;
        else
                scaleFactor = heightFactor;

        scaledWidth  = width * scaleFactor;
        scaledHeight = height * scaleFactor;

        // center the image

        if (widthFactor < heightFactor) {
                thumbnailPoint.y = (targetHeight - scaledHeight) * 0.5; 
        } else if (widthFactor > heightFactor) {
                thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5;
        }
}


// this is actually the interesting part:

UIGraphicsBeginImageContextWithOptions(targetSize, NO, 0);

CGRect thumbnailRect = CGRectZero;
thumbnailRect.origin = thumbnailPoint;
thumbnailRect.size.width  = scaledWidth;
thumbnailRect.size.height = scaledHeight;

[sourceImage drawInRect:thumbnailRect];

newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

if(newImage == nil) NSLog(@"could not scale image");


return newImage ;
}

@end

คุณสามารถใช้ได้ตามขนาดที่คุณต้องการ ชอบ :

[self.itemImageButton setImage:[stretchImage imageByScalingProportionallyToSize:CGSizeMake(20,20)]];

ขอบคุณสำหรับคำตอบ Gcamp ฉันมีวิธีการปรับขนาดตามอัตราส่วน แต่ฉันก็ยังพยายามหาวิธีบอกให้ UIButton ทำเพื่อฉัน รูปภาพของฉันโหลดจากอินเทอร์เน็ตดังนั้นฉันจึงไม่สามารถปรับขนาดได้ในเวลาคอมไพล์ BTW ขอบคุณมากสำหรับการตอบกลับของคุณ
KONG

2
เนื่องจากภาพถูกวางไว้ใน CALayer, แสดงผลและแคชโดย Quartz ประสิทธิภาพจึงไม่ควรแย่ไปกว่านี้หากคุณวางไว้ในขนาดเต็ม ไม่ว่าจะด้วยวิธีใดคุณกำลังปรับขนาด ~ 1 ครั้ง คำตอบของ gcamp สำคัญกว่ามากหากคุณปรับขนาดปุ่มอยู่ตลอดเวลาหรือทำสิ่งอื่น ๆ ที่จะกระตุ้นให้ Quartz วาดเลเยอร์ภาพใหม่
Ben Gotow

ดูเหมือนว่าคุณภาพของภาพจะลดลง ฉันกำลังทดสอบบน iphone 6 plus มันจริงหรอ? ฉันมีภาพ 3x ด้วย
Khant Thu Linn

ใช่รหัสนี้ค่อนข้างเก่า มันเป็นแทนUIGraphicsBeginImageContext UIGraphicsBeginImageContextWithOptionsเพียงแค่แก้ไขมัน
gcamp

ใช่ แต่ในหลาย ๆ กรณีมันไม่สำคัญว่าคุณจะหลวมไปสองสามรอบดังนั้นจึงไม่มีประโยชน์ในการเติม ram
Radu Simionescu

204

ผมมีปัญหาเดียวกัน. เพียงตั้งค่า ContentMode ของ ImageView ที่อยู่ภายใน UIButton

[[self.itemImageButton imageView] setContentMode: UIViewContentModeScaleAspectFit];
[self.itemImageButton setImage:[UIImage imageNamed:stretchImage] forState:UIControlStateNormal];

หวังว่านี่จะช่วยได้


14
ให้แน่ใจว่าคุณตั้งค่าIMAGE ดู ฉันยังไม่สังเกตเห็นเล็กน้อยว่าฉันยังคงใช้ backgroundImageView และมันไม่ได้ผล
Alexandre Gomes

2
ดูเหมือนว่าวิธีนี้จะมีปัญหาบางอย่างเมื่อสถานะปุ่มถูก 'ไฮไลต์' ภาพจะกลับสู่โหมดเติม ความคิดใด ๆ ?
Yuanfei Zhu

มันไม่ได้ผลกับฉัน อย่างไรก็ตามฉันทำให้มันใช้งานได้โดยใช้ [self.itemImageButton setbackgroundImage: [UIImage imageNamed: stretchImage] forState: UIControlStateNormal];
มิกกี้

3
สิ่งนี้ได้ผลสำหรับฉัน ฉันตั้งค่าโหมดเนื้อหาตามด้านบน อย่างไรก็ตามคุณต้องตั้งค่าภาพเดียวกันของสถานะที่ไฮไลต์เพื่อหลีกเลี่ยงไม่ให้ภาพกลับไปที่ "โหมดเติม" ตัวอย่างเช่น [imageButton setImage: image forState: UIControlStateHighlighted];
Christopher

1
คุณสามารถทำได้ในตัวสร้างอินเทอร์เฟซโดยใช้เส้นทางคีย์imageView.contentModeประเภทNumberและค่า1
bendytree

111

ไม่มีคำตอบใดที่ใช้ได้ผลสำหรับฉันฉันแก้ปัญหาด้วยรหัสต่อไปนี้:

button.contentMode = UIViewContentModeScaleToFill;
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentFill;
button.contentVerticalAlignment = UIControlContentVerticalAlignmentFill;

คุณสามารถทำได้ในตัวสร้างอินเทอร์เฟซเช่นกัน

ป้อนคำอธิบายภาพที่นี่


5
สิ่งนี้ไม่ได้ทำให้คุณมีพฤติกรรมที่เหมาะสมตามที่ OP ถาม
Ortwin Gentz

4
@OrtwinGentz คุณสามารถเลือกโหมดและการตั้งค่าแทนAspect fit scale to fill
Daniel

56

วิธีที่ง่ายที่สุดในการตั้งค่า UIButton imageView โดยใช้โปรแกรมในโหมดขนาดพอดี :

รวดเร็ว

button.contentHorizontalAlignment = .fill
button.contentVerticalAlignment = .fill
button.imageView?.contentMode = .scaleAspectFit

วัตถุประสงค์ -C

button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentFill;
button.contentVerticalAlignment = UIControlContentVerticalAlignmentFill;
button.imageView.contentMode = UIViewContentModeScaleAspectFit;

หมายเหตุ: คุณสามารถเปลี่ยน .scaleAspectFit (UIViewContentModeScaleAspectFit) เป็น .scaleAspectFill (UIViewContentModeScaleAspectFill) เพื่อตั้งค่าโหมดการเติมด้าน


20

ฉันมีปัญหากับภาพที่ไม่ได้ปรับขนาดตามสัดส่วนดังนั้นวิธีที่ฉันแก้ไขคือการใช้ขอบแทรก

fooButton.contentEdgeInsets = UIEdgeInsetsMake(10, 15, 10, 15);

16

ตอนนี้สามารถทำได้ผ่านคุณสมบัติ UIButton ของ IB กุญแจสำคัญคือการตั้งค่าภาพของคุณเป็นพื้นหลังมิฉะนั้นจะไม่ทำงาน

ป้อนคำอธิบายภาพที่นี่


14

เมื่อขยายคำตอบของ Dave คุณสามารถตั้งค่าทั้งหมดcontentModeของปุ่มimageViewใน IB โดยไม่ต้องใช้รหัสใด ๆ โดยใช้ Runtime Attributes:

ป้อนคำอธิบายภาพที่นี่

  • 1หมายถึงUIViewContentModeScaleAspectFit,
  • 2UIViewContentModeScaleAspectFillจะหมายถึง

8

หากคุณต้องการลดภาพปุ่มของคุณ:

yourButton.contentMode = UIViewContentModeScaleAspectFit;
yourButton.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10);

นั่นควรเป็น yourButton.imageView.contentMode = UIViewContentModeScaleAspectFit;
sdsykes

ไม่ได้ลองกับ. imageView มันทำงานได้ไม่ดี
Tulleb

7

1 - ล้างข้อความเริ่มต้นของปุ่ม (สำคัญ)

2 - ตั้งค่าการจัดตำแหน่งเหมือนภาพ

3 - ตั้งค่าโหมดเนื้อหาเช่นภาพ

ป้อนคำอธิบายภาพที่นี่


ตอบได้ดีครับ.. ช่วยผมมาก. ขอบคุณ!
BharathRao

5

ฉันมีวิธีการที่เหมาะกับฉัน วิธีนี้ใช้เวลาUIButtonและทำให้ภาพมีขนาดพอดี

-(void)makeImageAspectFitForButton:(UIButton*)button{
    button.imageView.contentMode=UIViewContentModeScaleAspectFit;
    button.contentHorizontalAlignment=UIControlContentHorizontalAlignmentFill;
    button.contentVerticalAlignment=UIControlContentVerticalAlignmentFill;
}

4

วิธีการแก้ปัญหาที่สะอาดคือการใช้เค้าโครงอัตโนมัติ ฉันลดลงเนื้อหาการบีบอัดต้านทานลำดับความสำคัญของฉันUIButtonและการตั้งค่าภาพ (ไม่ใช่ภาพพื้นหลัง ) ผ่านInterface Builder หลังจากนั้นฉันได้เพิ่มข้อ จำกัด สองสามข้อที่กำหนดขนาดของปุ่มของฉัน (ค่อนข้างซับซ้อนในกรณีของฉัน) และมันก็ใช้งานได้เหมือนมีเสน่ห์


สิ่งนี้ใช้ได้ผลสำหรับฉัน - แต่ถ้าฉันเลือกใช้ "ภาพพื้นหลัง" ไม่ใช่ภาพจริง อะไรก็ได้! นี่เป็นแรงผลักดันให้ฉัน NUTS
Andy

ภายใต้ Xcode 6.2 สิ่งนี้ใช้ได้กับฉัน แต่เหมือนที่ @AndrewHeinlein กล่าวว่าใช้แล้วBackground Image
RoLYroLLs

3

ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่ารูปภาพเป็นคุณสมบัติรูปภาพ แต่ไม่ใช่คุณสมบัติพื้นหลัง


2

ภาพพื้นหลังสามารถตั้งค่าขนาดให้เต็มได้อย่างง่ายดาย เพียงแค่ต้องทำสิ่งนี้ในคลาสย่อยของ UIButton:

- (CGRect)backgroundRectForBounds:(CGRect)bounds
{
    // you'll need the original size of the image, you 
    // can save it from setBackgroundImage:forControlState
    return CGRectFitToFillRect(__original_image_frame_size__, bounds);
}

// Utility function, can be saved elsewhere
CGRect CGRectFitToFillRect( CGRect inRect, CGRect maxRect )
{
    CGFloat origRes = inRect.size.width / inRect.size.height;
    CGFloat newRes = maxRect.size.width / maxRect.size.height;

    CGRect retRect = maxRect;

    if (newRes < origRes)
    {
        retRect.size.width = inRect.size.width * maxRect.size.height / inRect.size.height;
        retRect.origin.x = roundf((maxRect.size.width - retRect.size.width) / 2);
    }
    else
    {
        retRect.size.height = inRect.size.height * maxRect.size.width / inRect.size.width;
        retRect.origin.y = roundf((maxRect.size.height - retRect.size.height) / 2);
    }

    return retRect;
}

เป็นไปไม่ได้หากไม่มีคลาสย่อย?
Iulian Onofrei

คำตอบนี้มีไว้สำหรับ backgroundImage โดยเฉพาะ สำหรับภาพหลักคุณสามารถลิงด้วย imageEdgeInsets
Andy Poes

ฉันรู้และฉันต้องการถ้าเป็นไปได้ที่จะบรรลุสิ่งนี้โดยไม่ต้องมีคลาสย่อย
Iulian Onofrei

เท่าที่ฉันรู้คุณไม่สามารถปรับ backgroundImage โดยไม่ต้อง subclassing
Andy Poes


0

สำหรับ Xamarin.iOS (C #):

    myButton.VerticalAlignment = UIControlContentVerticalAlignment.Fill;
    myButton.HorizontalAlignment = UIControlContentHorizontalAlignment.Fill;
    myButton.ImageView.ContentMode = UIViewContentMode.ScaleAspectFit;

-1

คุณเพียงแค่ต้องตั้งค่าโหมดเนื้อหาของ UIButton imageview สำหรับสามเหตุการณ์ -

[cell.button setImage:[UIImage imageWithData:data] forState:UIControlStateNormal];

[cell.button setImage:[UIImage imageWithData:data] forState:UIControlStateHighlighted];

[cell.imgIcon setImage:[UIImage imageWithData:data] forState:UIControlStateSelected];

เรามีรหัสสำหรับ bcoz สามเหตุการณ์ในขณะที่ไฮไลต์หรือเลือกว่าขนาดปุ่มเป็น SQUARE และขนาดภาพเป็นสี่เหลี่ยมผืนผ้าจากนั้นจะแสดงภาพสี่เหลี่ยมจัตุรัสในเวลาที่ไฮไลต์หรือเลือก

ฉันมั่นใจว่ามันจะได้ผลสำหรับคุณ


คุณไม่ได้ตั้งค่าโหมดเนื้อหาคุณกำลังตั้งค่ารูปภาพ และไม่ใช่เหตุการณ์ แต่เป็นสถานะ คุณกำลังทำเรื่องวุ่นวาย นี่ไม่เกี่ยวข้องกับคำถามโดยสิ้นเชิง
manecosta
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.