iOS: UIButton ปรับขนาดตามความยาวของข้อความ

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

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldMT" size:12]];
[button addTarget:self action:@selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
// I need to know the width needed to accomodate NSStringVariable
[button setTitle:NSStringVariable forState:UIControlStateNormal]; 
// So that I can set the width property of the button before addSubview
[button setFrame:CGRectMake(10, 0, width, fixedHeight)];
[subNavigation addSubview:button];

ใน Xcode 4.5 ขึ้นไปตอนนี้สามารถทำได้โดยใช้ ' Auto-layouting / Constraints '

ข้อดีที่สำคัญคือ:

1. คุณไม่จำเป็นต้องตั้งค่าเฟรมทางโปรแกรมเลย!
2. หากทำถูกต้องคุณไม่จำเป็นต้องกังวลเกี่ยวกับการรีเซ็ตเฟรมสำหรับการเปลี่ยนแปลงการวางแนว
3. นอกจากนี้การเปลี่ยนแปลงอุปกรณ์ไม่จำเป็นต้องรบกวนคุณ (อ่านไม่จำเป็นต้องรหัสแยกต่างหากสำหรับขนาดหน้าจอที่แตกต่างกัน)

ข้อเสียเล็กน้อย:

1. ไม่เข้ากันได้แบบย้อนหลัง - ใช้งานได้กับ iOS 6 ขึ้นไปเท่านั้น
2. ต้องทำความคุ้นเคย (แต่จะช่วยประหยัดเวลาในภายหลัง)

สิ่งที่เจ๋งที่สุดคือเราต้องมุ่งเน้นไปที่การประกาศเจตจำนงเช่น:

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

นี่คือบทช่วยสอนง่ายๆที่จะแนะนำเกี่ยวกับการจัดวางอัตโนมัติ

สำหรับรายละเอียดเพิ่มเติม

ต้องใช้เวลาพอสมควรในตอนแรก แต่ดูเหมือนว่าจะคุ้มค่ากับความพยายาม

ใน UIKit มีการเพิ่มคลาส NSString ที่จะได้รับจากออบเจ็กต์ NSString ที่กำหนดขนาดที่จะใช้เมื่อแสดงผลในแบบอักษรบางแบบ

เอกสารเป็นที่นี่ ตอนนี้อยู่ที่นี่ภายใต้เลิกใช้งาน

ในระยะสั้นถ้าคุณไป:

CGSize stringsize = [myString sizeWithFont:[UIFont systemFontOfSize:14]]; 
//or whatever font you're using
[button setFrame:CGRectMake(10,0,stringsize.width, stringsize.height)];

... คุณจะต้องกำหนดกรอบของปุ่มเป็นความสูงและความกว้างของสตริงที่คุณกำลังแสดงผล

คุณอาจต้องการทดลองกับพื้นที่บัฟเฟอร์รอบ ๆ CGSize นั้น แต่คุณจะเริ่มต้นในสถานที่ที่เหมาะสม

วิธีทำในโค้ดคือ:

[button sizeToFit];

หากคุณเป็นคลาสย่อยและต้องการเพิ่มกฎพิเศษคุณสามารถแทนที่:

- (CGSize)sizeThatFits:(CGSize)size;

หากปุ่มของคุณสร้างด้วย Interface Builder และคุณกำลังเปลี่ยนชื่อในโค้ดคุณสามารถทำได้:

[self.button setTitle:@"Button Title" forState:UIControlStateNormal];
[self.button sizeToFit];

รวดเร็ว:

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

var button = UIButton()
button.setTitle("Length of this text determines size", forState: UIControlState.Normal)
button.sizeToFit()
self.view.addSubview(button)

ในการทำสิ่งนี้ให้สำเร็จโดยใช้การจัดวางอัตโนมัติให้ลองตั้งค่าข้อ จำกัด ของความกว้างตัวแปร:

คุณอาจต้องปรับเปลี่ยนContent Hugging PriorityและContent Compression Resistance Priorityเพื่อให้ได้ผลลัพธ์ที่ต้องการ

UILabel ปรับขนาดเองโดยอัตโนมัติ :

UILabel นี้ถูกตั้งค่าให้อยู่กึ่งกลางบนหน้าจอ (สองข้อ จำกัด เท่านั้นแนวนอน / แนวตั้ง):

มันเปลี่ยนความกว้างโดยอัตโนมัติทั้งหมด:

คุณไม่จำเป็นต้องตั้งค่าความกว้างหรือความสูงใด ๆ - มันเป็นไปโดยอัตโนมัติทั้งหมด

สังเกตง่ายๆว่าสี่เหลี่ยมสีเหลืองเล็ก ๆ ติดอยู่ ("ระยะห่าง" ของศูนย์) พวกเขาจะย้ายโดยอัตโนมัติเมื่อปรับขนาด UILabel

การเพิ่มข้อ จำกัด "> =" กำหนดความกว้างขั้นต่ำสำหรับ UILabel:

หากคุณต้องการปรับขนาดข้อความตรงข้ามกับปุ่มคุณสามารถใช้ ...

button.titleLabel.adjustsFontSizeToFitWidth = YES;
button.titleLabel.minimumScaleFactor = .5;
// The .5 value means that I will let it go down to half the original font size 
// before the texts gets truncated

// note, if using anything pre ios6, you would use I think
button.titleLabel.minimumFontSize = 8;

sizeToFit ทำงานไม่ถูกต้อง แทน:

myButton.size = myButton.sizeThatFits(CGSize.zero)

คุณยังสามารถเพิ่มcontentInsetปุ่ม:

myButton.contentEdgeInsets = UIEdgeInsetsMake(8, 8, 4, 8)

สวิฟต์ 4.2

ขอบคุณพระเจ้าที่แก้ไขได้ หลังจากตั้งค่าข้อความเป็นปุ่มแล้วคุณสามารถดึงข้อมูล intrinsicContentSize ซึ่งเป็นขนาดธรรมชาติจาก UIView (เอกสารอย่างเป็นทางการอยู่ที่นี่ ) สำหรับ UIButton คุณสามารถใช้งานได้ตามด้านล่าง

button.intrinsicContentSize.width

สำหรับข้อมูลของคุณฉันได้ปรับความกว้างเพื่อให้ดูถูกต้อง

button.frame = CGRect(fx: xOffset, y: 0.0, width: button.intrinsicContentSize.width + 18, height: 40)

เครื่องจำลอง

UIButtons ที่มี intrinsicContentSize

ที่มา: https://riptutorial.com/ios/example/16418/get-uibutton-s-size-strictly-based-on-its-text-and-font

เพียงแค่:

1. สร้าง UIViewเป็นกระดาษห่อหุ้มด้วยรูปแบบอัตโนมัติเพื่อดูรอบ ๆ
2. ใส่ UILabelในกระดาษห่อนั้น เพิ่มข้อ จำกัด ที่จะติดฉลาก tyour ที่ขอบกระดาษห่อ
3. ใส่UIButtonในเสื้อคลุมของคุณจากนั้นเพิ่มข้อ จำกัด เดียวกันกับที่คุณทำUILabelเช่นเดียวกับที่คุณได้สำหรับ
4. เพลิดเพลินไปกับปุ่มปรับอัตโนมัติพร้อมกับข้อความ

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

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

+ (void) sizeButtonToText:(UIButton *)button availableSize:(CGSize)availableSize padding:(UIEdgeInsets)padding {    

     CGRect boundsForText = button.frame;

    // Measures string
    CGSize stringSize = [button.titleLabel.text sizeWithFont:button.titleLabel.font];
    stringSize.width = MIN(stringSize.width + padding.left + padding.right, availableSize.width);

    // Center's location of button
    boundsForText.origin.x += (boundsForText.size.width - stringSize.width) / 2;
    boundsForText.size.width = stringSize.width;
    [button setFrame:boundsForText];
 }

ด้วยเหตุผลบางอย่างfunc sizeToFit()ไม่ได้ผลสำหรับฉัน การตั้งค่าของฉันคือฉันใช้ปุ่มภายใน a UITableViewCellและฉันใช้รูปแบบอัตโนมัติ

สิ่งที่ได้ผลสำหรับฉันคือ:

1. รับข้อ จำกัด ด้านความกว้าง
2. ได้รับintrinsicContentSizeความกว้างเนื่องจากตามเค้าโครงอัตโนมัติของเอกสารนี้ไม่ทราบถึงไฟล์intrinsicContentSize. ตั้งค่าความกว้างเป็นintrinsicContentSizeความกว้าง

นี่คือสองชื่อจากไฟล์ Debug View Hierachry

คลาสปุ่มนี้มีการปรับความสูงอัตโนมัติสำหรับข้อความ (สำหรับ Xamarin แต่สามารถเขียนใหม่สำหรับภาษาอื่นได้)

[Register(nameof(ResizableButton))]
public class ResizableButton : UIButton
{
    NSLayoutConstraint _heightConstraint;
    public bool NeedsUpdateHeightConstraint { get; private set; } = true;

    public ResizableButton(){}

    public ResizableButton(UIButtonType type) : base(type){}

    public ResizableButton(NSCoder coder) : base(coder){}

    public ResizableButton(CGRect frame) : base(frame){}

    protected ResizableButton(NSObjectFlag t) : base(t){}

    protected internal ResizableButton(IntPtr handle) : base(handle){}

    public override void LayoutSubviews()
    {
        base.LayoutSubviews();
        UpdateHeightConstraint();
        InvalidateIntrinsicContentSize();
    }

    public override void SetTitle(string title, UIControlState forState)
    {
        NeedsUpdateHeightConstraint = true;
        base.SetTitle(title, forState);
    }

    private void UpdateHeightConstraint()
    {
        if (!NeedsUpdateHeightConstraint)
            return;
        NeedsUpdateHeightConstraint = false;
        var labelSize = TitleLabel.SizeThatFits(new CGSize(Frame.Width - TitleEdgeInsets.Left - TitleEdgeInsets.Right, float.MaxValue));

        var rect = new CGRect(Frame.X, Frame.Y, Frame.Width, labelSize.Height + TitleEdgeInsets.Top + TitleEdgeInsets.Bottom);

        if (_heightConstraint != null)
            RemoveConstraint(_heightConstraint);

        _heightConstraint = NSLayoutConstraint.Create(this, NSLayoutAttribute.Height, NSLayoutRelation.Equal, 1, rect.Height);
        AddConstraint(_heightConstraint);
    }

     public override CGSize IntrinsicContentSize
     {
         get
         {
             var labelSize = TitleLabel.SizeThatFits(new CGSize(Frame.Width - TitleEdgeInsets.Left - TitleEdgeInsets.Right, float.MaxValue));
             return new CGSize(Frame.Width, labelSize.Height + TitleEdgeInsets.Top + TitleEdgeInsets.Bottom);
         }
     }
}

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

นี่คือวิธีแก้ปัญหาที่ง่ายที่สุดโดยใช้สตอรี่บอร์ด

1. วาง UIView และวางข้อ จำกัด ไว้ ตัวอย่าง:

2. วาง UILabel ไว้ใน UIView กำหนดข้อ จำกัด เพื่อแนบเข้ากับขอบของ UIView

3. วาง UIButton ของคุณไว้ใน UIView กำหนดข้อ จำกัด เดียวกันเพื่อแนบเข้ากับขอบของ UIView

4. ตั้งค่า 0 สำหรับจำนวนบรรทัดของ UILabel

5. ตั้งค่าร้านค้า

    @IBOutlet var button: UIButton!
    @IBOutlet var textOnTheButton: UILabel!

6. หาชื่อยาว ๆ ยาว ๆ

    let someTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

7. บน viewDidLoad ตั้งหัวเรื่องทั้งสำหรับ UILabel และ UIButton

    override func viewDidLoad() {
        super.viewDidLoad()
        textOnTheButton.text = someTitle
        button.setTitle(someTitle, for: .normal)
        button.titleLabel?.numberOfLines = 0
    }

8. เรียกใช้เพื่อให้แน่ใจว่าปุ่มนั้นถูกปรับขนาดและสามารถกดได้