iOS: UIButton thay đổi kích thước theo độ dài văn bản

Trong trình tạo giao diện, giữ Command+ =sẽ thay đổi kích thước một nút để phù hợp với văn bản của nó. Tôi đã tự hỏi nếu điều này là có thể làm lập trình trước khi nút được thêm vào chế độ xem.

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];

Trong Xcode 4.5 trở lên, giờ đây có thể được thực hiện bằng cách sử dụng ' Tự động bố trí / ràng buộc '.

Ưu điểm chính là:

1. Bạn không cần phải thiết lập các khung theo chương trình!
2. Nếu được thực hiện đúng, bạn không cần bận tâm về việc đặt lại các khung để thay đổi hướng.
3. Ngoài ra, các thay đổi thiết bị không cần phải làm phiền bạn (đọc, không cần mã riêng cho các kích thước màn hình khác nhau).

Một vài nhược điểm:

1. Không tương thích ngược - chỉ hoạt động cho iOS 6 trở lên.
2. Cần làm quen (nhưng sẽ tiết kiệm thời gian sau này).

Điều thú vị nhất là chúng ta tập trung vào việc tuyên bố một ý định như:

• Tôi muốn hai nút này có cùng chiều rộng; hoặc là
• Tôi cần quan điểm này được căn giữa theo chiều dọc và mở rộng đến mức tối đa 10 điểm từ cạnh của giám sát; hoặc thậm chí,
• Tôi muốn nút / nhãn này thay đổi kích thước theo nhãn mà nó đang hiển thị!

Đây là một hướng dẫn đơn giản để làm quen với cách bố trí tự động.

Để biết thêm chi tiết .

Nó mất một chút thời gian lúc đầu, nhưng có vẻ như nó sẽ rất đáng để nỗ lực.

Trong UIKit, có các bổ sung cho lớp NSString để lấy từ một đối tượng NSString đã cho, kích thước mà nó sẽ chiếm khi được hiển thị trong một phông chữ nhất định.

Tài liệu đã ở đây . Bây giờ nó ở đây dưới tán thành.

Tóm lại, nếu bạn đi:

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

... bạn sẽ đặt khung của nút thành chiều cao và chiều rộng của chuỗi bạn đang kết xuất.

Có thể bạn sẽ muốn thử nghiệm một số không gian bộ đệm xung quanh CGSize đó, nhưng bạn sẽ bắt đầu ở đúng nơi.

Cách để làm điều này trong mã là:

[button sizeToFit];

Nếu bạn đang phân lớp và muốn thêm quy tắc bổ sung, bạn có thể ghi đè:

- (CGSize)sizeThatFits:(CGSize)size;

Nếu nút của bạn được tạo bằng Trình tạo giao diện và bạn đang thay đổi tiêu đề trong mã, bạn có thể thực hiện việc này:

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

Nhanh:

Điều quan trọng ở đây là khi nào bạn sẽ gọi .sizeToFit(), nó sẽ là sau khi cài đặt văn bản để hiển thị để nó có thể đọc kích thước cần thiết, nếu sau này bạn cập nhật văn bản, sau đó gọi lại.

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

Để thực hiện điều này bằng cách sử dụng tự động thanh toán, hãy thử đặt một ràng buộc về chiều rộng thay đổi:

Bạn cũng có thể cần phải điều chỉnh Content Hugging Priorityvà Content Compression Resistance Priorityđể có được kết quả bạn cần.

UILabel hoàn toàn tự động tự định cỡ :

Nhãn UIL này chỉ đơn giản được đặt ở giữa màn hình (chỉ có hai ràng buộc, ngang / dọc):

Nó thay đổi độ rộng hoàn toàn tự động:

Bạn không cần đặt bất kỳ chiều rộng hoặc chiều cao nào - nó hoàn toàn tự động.

Lưu ý các ô vuông nhỏ màu vàng được đính kèm đơn giản ("khoảng cách" bằng 0). Chúng tự động di chuyển khi UILabel thay đổi kích thước.

Thêm ràng buộc "> =" đặt chiều rộng tối thiểu cho UILabel:

Nếu bạn muốn thay đổi kích thước văn bản trái ngược với nút, bạn có thể sử dụng ...

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 không hoạt động chính xác. thay thế:

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

bạn cũng có thể thêm contentInsetvào nút:

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

Đơn giản:

1. Tạo UIViewnhư một trình bao bọc với bố cục tự động để xem xung quanh.
2. Đặt UILabelbên trong cái bọc đó. Thêm các ràng buộc sẽ dán nhãn tyour vào các cạnh của trình bao bọc.
3. Đặt UIButtonbên trong trình bao bọc của bạn, sau đó đơn giản thêm các ràng buộc giống như bạn đã làm UILabel.
4. Thưởng thức nút tự động của bạn cùng với văn bản.

Swift 4.2

Cảm ơn chúa, điều này đã giải quyết. Sau khi đặt văn bản cho nút, bạn có thể truy xuất intinsicContentSize có kích thước tự nhiên từ một UIView (tài liệu chính thức có ở đây ). Đối với UIButton, bạn có thể sử dụng nó như dưới đây.

button.intrinsicContentSize.width

Đối với thông tin của bạn, tôi điều chỉnh chiều rộng để làm cho nó trông chính xác.

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

Giả lập

UIButtons với intinsicContentSize

Nguồn: https://riptutorial.com/ios/example/16418/get-uibutton-s-size-strictly-basing-on-its-text-and-font

Tôi có một số nhu cầu bổ sung liên quan đến bài đăng này mà sizeToFitkhông giải quyết được. Tôi cần giữ nút ở giữa ở vị trí ban đầu, bất kể văn bản. Tôi cũng không bao giờ muốn nút lớn hơn kích thước ban đầu của nó.

Vì vậy, tôi bố trí nút cho kích thước tối đa của nó, lưu kích thước đó trong Bộ điều khiển và sử dụng phương pháp sau để định cỡ nút khi văn bản thay đổi:

+ (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];
 }

Lớp nút này với độ cao tự động hóa cho văn bản (đối với Xamarin nhưng có thể được viết lại cho ngôn ngữ khác)

[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);
         }
     }
}

Vì một số lý do, func sizeToFit()không làm việc cho tôi. Thiết lập của tôi là tôi đang sử dụng một nút bên trong a UITableViewCellvà tôi đang sử dụng bố trí tự động.

Những gì làm việc cho tôi là:

1. có được giới hạn chiều rộng
2. có được intrinsicContentSizechiều rộng vì theo tài liệu này bố trí tự động không nhận thức được intrinsicContentSize. Đặt giới hạn intrinsicContentSizechiều rộng thành chiều rộng

Đây là hai danh hiệu từ Debug View Hierachry

Thành thật mà nói tôi nghĩ rằng thật xấu hổ khi không có hộp kiểm đơn giản trong bảng phân cảnh để nói rằng bạn muốn thay đổi kích thước các nút để chứa văn bản. Sao cũng được.

Đây là giải pháp đơn giản nhất bằng cách sử dụng bảng phân cảnh.

1. Đặt UIView và đặt các ràng buộc cho nó. Thí dụ:

2. Đặt UILabel bên trong UIView. Đặt các ràng buộc để gắn nó vào các cạnh của UIView.

3. Đặt UIButton của bạn bên trong UIView. Đặt các ràng buộc tương tự để gắn nó vào các cạnh của UIView.

4. Đặt 0 cho số dòng của UILabel.

5. Thiết lập các cửa hàng.

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

6. Nhận một số tiêu đề dài, dài, dài.

    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. Trên viewDidLoad, đặt tiêu đề cho cả UILabel và UIButton.

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

8. Chạy nó để đảm bảo rằng nút đó được thay đổi kích thước và có thể được nhấn.