จะปรับขนาดภาพของ UIButton ได้อย่างไร?


158

ฉันจะปรับขนาดรูปภาพของ UIButton ได้อย่างไร ฉันกำลังตั้งค่าภาพเช่นนี้:

[myLikesButton setImage:[UIImage imageNamed:@"icon-heart.png"] forState:UIControlStateNormal];

อย่างไรก็ตามการเติมภาพให้เต็มปุ่มฉันจะทำให้รูปภาพเล็กลงได้อย่างไร


6
คุณพยายามทำให้รูปภาพเล็กลง (LOL) หรือไม่?
CodaFi

1
@CodaFi ถูกต้องคุณควรจัดเตรียมสินทรัพย์ในขนาดที่เหมาะสมเพราะจะช่วยลดการทำงานของ CPU ใช้หน่วยความจำน้อยลงและมีแนวโน้มที่จะดูดีขึ้นเนื่องจากคุณไม่แนะนำสิ่งประดิษฐ์ที่ปรับขนาด ...
Paul.s

นอกจากนี้คุณสามารถสร้างปุ่มตามขนาดของภาพ (หรือในทางกลับกัน) ทำไมต้องมีปุ่มใหญ่ ... ด้วยภาพขนาดเล็กในนั้นเพียงเพิ่มภาพที่คุณต้องการนั่นคือปุ่มที่กำหนดเองหรือคุณสามารถ อธิบายถึงตรรกะที่คุณต้องการนำไปใช้เพื่อให้ผู้อื่นมีความคิดที่ชัดเจน
Abhishek Singh

คำตอบ:


243

หากฉันเข้าใจอย่างถูกต้องว่าคุณกำลังพยายามทำอะไรคุณจะต้องเล่นกับขอบภาพของปุ่ม สิ่งที่ต้องการ:

myLikesButton.imageEdgeInsets = UIEdgeInsets(top, left, bottom, right)

96

คำตอบของทิมนั้นถูกต้อง แต่ฉันต้องการเพิ่มข้อเสนอแนะอื่นเพราะในกรณีของฉันมีวิธีแก้ปัญหาที่ง่ายกว่าโดยสิ้นเชิง

ฉันกำลังมองหาการตั้งค่าUIButtonภาพขุ่นมัวเพราะฉันไม่ได้ตระหนักว่าฉันสามารถตั้งค่าโหมดเนื้อหาบนปุ่มUIImageViewซึ่งจะทำให้ไม่จำเป็นต้องใช้ UIEdgeInsets และค่าฮาร์ดโค้ดทั้งหมด เพียงเข้าไปที่ imageview พื้นฐานบนปุ่มและตั้งค่าโหมดเนื้อหา:

myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

ดูUIButton ไม่ฟังการตั้งค่าโหมดเนื้อหาหรือไม่

สวิฟท์ 3

myButton.imageView?.contentMode = .scaleAspectFit

1
จะทำอย่างไรเหมือนกันสำหรับ backgroundImage
Sergey Sahakyan

myButton.backgroundImageView? .contentMode = .scaleAspectFit
Andrea.Ferrando

@ Andrea.Ferrando button.backgroundImageView.contentModeไม่ทำงาน
Seong Lee

ช่วยตัวเองบ้างและทำให้แน่ใจว่าคุณกำลังตั้งภาพไม่ใช่ภาพพื้นหลัง! @SeongLee ถูกต้องคุณไม่สามารถปรับแต่งภาพพื้นหลังด้วย contentMode หรือ EdgeInserts ได้
redPanda

42

สวิฟท์ 3:

button.setImage(UIImage(named: "checkmark_white"), for: .normal)
button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill
button.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)

6
มันทำงานได้อย่างสวยงามสำหรับฉัน ฉันสร้างไอคอน PDF ภายใน Inkscape และcontentVerticalAlignment/contentHorizontalAlignmentตัวเลือกต่าง ๆ ทำให้ฉันสามารถปรับขนาดตามที่ฉันหวังไว้ ขอขอบคุณสำหรับการโพสต์นี้.
เอเดรีย

2
การตั้งค่าcontentHorizontalAlignmentและcontentVerticalAlignmentทำเคล็ดลับ
Tom Knapen

1
โซลูชันนี้ใช้งานได้ดีเมื่อใช้เนื้อหา PDF สำหรับไอคอน ขอบคุณ!
Eneko Alonso

38

คุณสามารถทำเช่นนั้นได้จากผู้สร้าง inteface เช่นนี้

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

ฉันคิดว่ามันมีประโยชน์


26

หากภาพของคุณมีขนาดใหญ่เกินไป (และคุณไม่สามารถ / ไม่ต้องการทำให้ภาพเล็กลง) การรวมกันของสองคำตอบแรกจะใช้งานได้ดี

addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(15.0, 15.0, 15.0, 5.0)

contentModeเว้นแต่คุณจะได้รับขุ่นภาพเพียงขวาภาพจะถูกบิดเบือนโดยไม่ต้องเปลี่ยน


23

คุณสามารถใช้imageEdgeInsetsคุณสมบัติระยะขอบของสิ่งที่ใส่เข้าไปหรือเริ่มแรกสำหรับสี่เหลี่ยมรอบ ๆ รูปของปุ่ม

 [self.btn setImageEdgeInsets:UIEdgeInsetsMake(6, 6, 6, 6)];

ค่าบวกจะลดขนาดหรือแทรกเข้าไปขอบนั้นคือการเคลื่อนไหว ค่าลบจะขยายหรือลบออกขอบนั้น


17

นี่คือวิธีแก้ปัญหาอื่น ๆ ในการปรับขนาด imageView ของ UIButton

button.imageView?.layer.transform = CATransform3DMakeScale(0.8, 0.8, 0.8)

คุณบันทึกวันของฉัน ฉันแค่อยากจะปรับขนาดภาพของฉันภายในปุ่ม ไม่มีสิ่งใดแทรกเข้าไปขอบคุณไม่ได้!
Pedro Antonio


8

สวิฟต์ 4

คุณจะต้องใช้รหัสสองบรรทัดนี้ตามลำดับเฉพาะ สิ่งที่คุณต้องทำก็คือเปลี่ยนค่าขอบด้านบนและด้านล่าง

addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(10.0, 0.0, 10.0, 0.0)

เหล่านี้ก่อให้เกิดข้อผิดพลาดเมื่อเรียกจากEXC_BAD_ACCESS override func layoutSubviews()
Andrew Kirna

7

ด้วยความช่วยเหลือของคำตอบของTim Cฉันสามารถสร้างส่วนขยายในการUIButtonใช้ Swift ที่ช่วยให้คุณระบุเฟรมรูปภาพโดยใช้.setImage()ฟังก์ชันพร้อมframeพารามิเตอร์พิเศษ

extension UIButton{

    func setImage(image: UIImage?, inFrame frame: CGRect?, forState state: UIControlState){
        self.setImage(image, forState: state)

        if let frame = frame{
            self.imageEdgeInsets = UIEdgeInsets(
                top: frame.minY - self.frame.minY,
                left: frame.minX - self.frame.minX,
                bottom: self.frame.maxY - frame.maxY,
                right: self.frame.maxX - frame.maxX
            )
        }
    }

}

ใช้สิ่งนี้หากคุณต้องการตั้งค่าเฟรมของ a UIButtonถึงCGRectMake(0, 0, 64, 64)และตั้งค่ารูปภาพของมันmyImageเป็นเฟรมของCGRectMake(8, 8, 48, 48)คุณสามารถใช้

let button: UIButton = UIButton(frame: CGRectMake(0, 0, 64, 64))
button.setImage(
    myImage,
    inFrame: CGRectMake(8, 8, 48, 48),
    forState: UIControlState.Normal
)

4
คุณควรif letแทนการตรวจสอบถ้าframeเป็นnilแล้วบังคับ unwrapping ครั้ง
fpg1503

7

เมื่อเปลี่ยนขนาดไอคอนด้วย UIEdgeInsetsMake(top, left, bottom, right)โปรดคำนึงถึงขนาดของปุ่มและความสามารถของ UIEdgeInsetsMake เพื่อทำงานกับค่าลบราวกับว่ามันเป็นค่าบวก

ตัวอย่าง: สองปุ่มที่มีความสูง 100 และกว้างยาว 1: 1

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)

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

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(45, 0, 45, 0)

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

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(60, 0, 60, 0)

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

ตัวอย่างที่ 1 และ 3 เหมือนกันตั้งแต่ ABS (100 - (40 + 40)) = ABS (100 - (60 + 60))


2

สวิฟท์ 3

ฉันตั้งค่าความกว้างและความสูงของปุ่มเป็น 40 และช่องว่างภายในของฉันจาก EdgeInsetsMake คือ 15 ทุกด้าน ฉันแนะนำให้เพิ่มสีพื้นหลังให้กับปุ่มของคุณเพื่อดูช่องว่างภายในจริง

myButton.backgroundColor = UIColor.gray // sample color to check padding
myButton.imageView?.contentMode = .scaleAspectFit
myButton.imageEdgeInsets = UIEdgeInsetsMake(15, 15, 15, 15)

2

วิธีการหนึ่งคือปรับขนาด UIImage ในโค้ดดังนี้ หมายเหตุ: รหัสนี้ปรับขนาดได้ตามความสูงเท่านั้น แต่คุณสามารถปรับฟังก์ชั่นการปรับขนาดตามความกว้างได้อย่างง่ายดาย

let targetHeight = CGFloat(28)
let newImage = resizeImage(image: UIImage(named: "Image.png")!, targetHeight: targetHeight)
button.setImage(newImage, for: .normal)

fileprivate func resizeImage(image: UIImage, targetHeight: CGFloat) -> UIImage {
    // Get current image size
    let size = image.size

    // Compute scaled, new size
    let heightRatio = targetHeight / size.height
    let newSize = CGSize(width: size.width * heightRatio, height: size.height * heightRatio)
    let rect = CGRect(x: 0, y: 0, width: newSize.width, height: newSize.height)

    // Create new image
    UIGraphicsBeginImageContextWithOptions(newSize, false, 0)
    image.draw(in: rect)
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    // Return new image
    return newImage!
}

2

อัปเดตสำหรับ Swift> 5

กำหนดขนาด:

button.frame = CGRect(x: 0, y: 0, width: 44, height: 44)

ตั้งค่าระยะขอบ:

button.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)


-6

ฉันคิดว่าขนาดภาพของคุณก็เหมือนกันกับขนาดปุ่มจากนั้นคุณใส่ภาพในพื้นหลังของปุ่มเช่น:

[myLikesButton setBackgroundImage:[UIImage imageNamed:@"icon-heart.png"] forState:UIControlStateNormal];

คุณมีรูปถ่ายและปุ่มขนาดเท่ากันฉันหวังว่าคุณจะเข้าใจจุดของฉัน

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