Autolayout - ขนาดที่แท้จริงของ UIButton ไม่รวมชื่อเรื่อง

หากฉันมีการจัดเรียง UIButton โดยใช้การชำระอัตโนมัติโดยอัตโนมัติขนาดของมันจะปรับให้เข้ากับเนื้อหาของมัน

ถ้าฉันตั้งรูปภาพเป็นbutton.imageขนาด instrinsic อีกครั้งดูเหมือนว่าจะคำนึงถึงเรื่องนี้

อย่างไรก็ตามถ้าฉันปรับแต่งtitleEdgeInsetsปุ่มการจัดวางไม่ได้ทำเพื่อสิ่งนี้และจะตัดทอนชื่อปุ่มแทน

ฉันจะมั่นใจได้อย่างไรว่าความกว้างที่แท้จริงของปุ่มนั้นเป็นสิ่งที่ใส่เข้าไป?

แก้ไข:

ฉันใช้สิ่งต่อไปนี้:

[self.backButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)];

เป้าหมายคือการเพิ่มการแยกระหว่างรูปภาพและข้อความ

คุณสามารถแก้ปัญหานี้ได้โดยไม่ต้องแทนที่วิธีการใด ๆ หรือตั้งค่าข้อจำกัดความกว้างตามอำเภอใจ คุณสามารถทำได้ใน Interface Builder ดังต่อไปนี้

• ความกว้างของปุ่มที่แท้จริงนั้นมาจากความกว้างของชื่อเรื่องบวกกับความกว้างของไอคอนบวกกับขอบของเนื้อหาด้านซ้ายและขวา

• หากปุ่มมีทั้งรูปภาพและข้อความแสดงว่าพวกเขาอยู่ตรงกลางเป็นกลุ่มโดยไม่มีช่องว่างภายใน

• หากคุณเพิ่มสิ่งที่ใส่เข้าไปทางซ้ายเนื้อหาจะถูกคำนวณโดยสัมพันธ์กับข้อความไม่ใช่ไอคอน + ข้อความ

• หากคุณตั้งค่าภาพด้านซ้ายเป็นลบภาพจะถูกดึงออกไปทางซ้าย แต่ความกว้างของปุ่มโดยรวมไม่ได้รับผลกระทบ

• หากคุณตั้งค่าสิ่งที่ใส่เข้าไปทางซ้ายของภาพเชิงลบเค้าโครงจริงจะใช้ครึ่งหนึ่งของค่านั้น ดังนั้นในการรับสิ่งที่ใส่เข้าไป -20 จุดซ้ายคุณต้องใช้ค่าสิ่งที่เหลือ -40 จุดซ้ายในตัวสร้างส่วนต่อประสาน

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

ค่าตัวอย่างบางส่วน:

// Produces a button with the layout:
// |-20-icon-10-text-20-|
// AutoLayout intrinsic width works as you'd desire.
button.contentEdgeInsets = UIEdgeInsetsMake(10, 30, 10, 20)
button.imageEdgeInsets = UIEdgeInsetsMake(0, -20, 0, 0)

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

ปรับปรุง : Xcode 7 มีข้อบกพร่องที่คุณไม่สามารถป้อนค่าลบในRightฟิลด์สิ่งที่ใส่เข้าไป แต่คุณสามารถใช้ตัวควบคุม stepper ติดกับมันเพื่อลดค่า (ขอบคุณสจวร์ต)

การทำเช่นนี้จะเพิ่มระยะห่าง 8pt ระหว่างภาพและชื่อและจะเพิ่มความกว้างที่แท้จริงของปุ่มด้วยจำนวนเดียวกัน แบบนี้:

เหตุใดจึงไม่แทนที่intrinsicContentSizeวิธีการบน UIView ตัวอย่างเช่น:

- (CGSize) intrinsicContentSize
{
    CGSize s = [super intrinsicContentSize];

    return CGSizeMake(s.width + self.titleEdgeInsets.left + self.titleEdgeInsets.right,
                      s.height + self.titleEdgeInsets.top + self.titleEdgeInsets.bottom);
}

สิ่งนี้ควรบอกระบบ autolayout ว่าควรเพิ่มขนาดของปุ่มเพื่ออนุญาตการแทรกและแสดงข้อความเต็ม ฉันไม่ได้อยู่ที่คอมพิวเตอร์ของตัวเองดังนั้นฉันจึงไม่ได้ทดสอบสิ่งนี้

คุณไม่ได้ระบุวิธีการตั้งค่า insets ดังนั้นฉันเดาว่าคุณกำลังใช้ titleEdgeInsets เพราะฉันเห็นเอฟเฟกต์แบบเดียวกันกับที่คุณได้รับ หากฉันใช้ contentEdgeInsets แทนจะทำงานได้อย่างถูกต้อง

- (IBAction)ChangeTitle:(UIButton *)sender {
    self.button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);
    [self.button setTitle:@"Long Long Title" forState:UIControlStateNormal];
}

และสำหรับสวิฟต์ก็ทำงานอย่างนี้:

extension UIButton {
    override open var intrinsicContentSize: CGSize {
        let intrinsicContentSize = super.intrinsicContentSize

        let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
        let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom

        return CGSize(width: adjustedWidth, height: adjustedHeight)
    }
}

รักเธออย่างรวดเร็ว

เธรดนี้ค่อนข้างเก่า แต่ฉันเพิ่งพบเจอตัวเองและสามารถแก้ไขได้โดยใช้สิ่งที่ใส่เข้าไปในเชิงลบ ตัวอย่างเช่นแทนที่ค่าการเติมที่คุณต้องการที่นี่:

UIButton* myButton = [[UIButton alloc] init];
// setup some autolayout constraints here
myButton.titleEdgeInsets = UIEdgeInsetsMake(-desiredBottomPadding,
                                            -desiredRightPadding,
                                            -desiredTopPadding,
                                            -desiredLeftPadding);

เมื่อรวมกับข้อ จำกัด การกดปุ่มอัตโนมัติที่ถูกต้องคุณจะพบกับปุ่มปรับขนาดอัตโนมัติที่มีภาพและข้อความ! เห็นด้านล่างด้วยการdesiredLeftPaddingตั้งค่าเป็น 10

คุณจะเห็นได้ว่ากรอบจริงของปุ่มนั้นไม่ได้ล้อมรอบฉลาก (เนื่องจากป้ายเลื่อนไปทางขวา 10 จุดนอกขอบเขต) แต่เราได้ระยะห่างระหว่างจุดกับข้อความถึง 10 จุด

สำหรับSwift 3ตามคำตอบของpegpeg :

extension UIButton {

    override open var intrinsicContentSize: CGSize {

        let intrinsicContentSize = super.intrinsicContentSize

        let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
        let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom

        return CGSize(width: adjustedWidth, height: adjustedHeight)

    }

}

ทั้งหมดที่กล่าวมาไม่สามารถใช้งานกับiOS 9+สิ่งที่ฉันทำคือ:

• เพิ่มข้อจำกัดความกว้าง (สำหรับความกว้างต่ำสุดเมื่อปุ่มไม่มีข้อความใด ๆ ปุ่มจะปรับขนาดอัตโนมัติหากมีข้อความ)
• ตั้งค่าความสัมพันธ์กับมากกว่าหรือเท่ากับ

ตอนนี้เพื่อเพิ่มเส้นขอบรอบ ๆ ปุ่มเพียงใช้วิธีการ:

button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);

ฉันต้องการเพิ่มช่องว่าง 5pt ระหว่างไอคอน UIButton และป้ายกำกับ นี่คือวิธีที่ฉันได้รับ:

UIButton *infoButton = [UIButton buttonWithType:UIButtonTypeCustom];
// more button config etc
infoButton.contentEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 5);
infoButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, -5);

วิธี contentEdgeInsets, titleEdgeInsets และ imageEdgeInsets เกี่ยวข้องกันต้องให้เล็กน้อยและรับจากแต่ละสิ่งที่ใส่เข้าไป ดังนั้นหากคุณเพิ่มสิ่งที่ใส่เข้าไปทางด้านซ้ายของชื่อคุณจะต้องเพิ่มสิ่งที่ใส่เข้าไปทางด้านขวาและเพิ่มช่องว่าง (ผ่านทางส่วนที่เป็นบวก) ทางด้านขวาของเนื้อหา

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

ตัวเลือกนี้ยังมีอยู่ในเครื่องมือสร้างอินเตอร์เฟส ดูสิ่งที่ใส่เข้าไป ฉันตั้งค่าซ้ายและขวาเป็น 3 ทำงานเหมือนจับใจ

วิธีแก้ปัญหาที่ฉันใช้คือการเพิ่มข้อ จำกัด ความกว้างของปุ่ม หลังจากที่ตั้งค่าข้อความของคุณแล้วให้อัปเดตข้อ จำกัด ความกว้างดังนี้:

self.buttonWidthConstraint.constant = self.shareButton.intrinsicContentSize.width + 8;

ที่ 8 คือสิ่งที่คุณใส่เข้าไป

การเรียก sizeToFit () ทำให้แน่ใจว่า contentEdgeInset มีผล

extension UIButton {

   open override func draw(_ rect: CGRect) { 
       self.contentEdgeInsets = UIEdgeInsets(top: 10, left: 40, bottom: 10, right: 40)
       self.sizeToFit()
   }
}