Tự động thanh toán - kích thước nội tại của UIButton không bao gồm các phần tử tiêu đề

Nếu tôi có một UIButton được sắp xếp bằng cách sử dụng tự động thanh toán, kích thước của nó sẽ điều chỉnh độc đáo để phù hợp với nội dung của nó.

Nếu tôi đặt một hình ảnh là button.image, kích thước đầu ra một lần nữa dường như giải thích cho điều này.

Tuy nhiên, nếu tôi điều chỉnh titleEdgeInsetsnút, bố cục không tính đến điều này và thay vào đó cắt ngắn tiêu đề nút.

Làm thế nào tôi có thể đảm bảo rằng chiều rộng nội tại của nút chiếm tài khoản cho phần trong?

Biên tập:

Tôi đang sử dụng như sau:

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

Mục tiêu là để thêm một số tách biệt giữa hình ảnh và văn bản.

Bạn có thể giải quyết vấn đề này mà không phải ghi đè bất kỳ phương thức nào hoặc đặt ràng buộc độ rộng tùy ý. Bạn có thể làm tất cả trong Trình tạo giao diện như sau.

• Chiều rộng nút nội tại được lấy từ chiều rộng tiêu đề cộng với chiều rộng biểu tượng cộng với các cạnh nội dung bên trái và bên phải .

• Nếu một nút có cả hình ảnh và văn bản, chúng sẽ được đặt ở giữa thành một nhóm, không có phần đệm giữa.

• Nếu bạn thêm một nội dung bên trái, nó sẽ được tính tương đối với văn bản, không phải biểu tượng văn bản +.

• Nếu bạn đặt một hình ảnh bên trái âm tính, hình ảnh được kéo ra bên trái nhưng chiều rộng nút tổng thể không bị ảnh hưởng.

• Nếu bạn đặt một hình ảnh bên trái âm tính, bố cục thực tế sử dụng một nửa giá trị đó. Vì vậy, để có được một -20 điểm bên trái, bạn phải sử dụng giá trị chèn bên trái -40 điểm trong Trình tạo giao diện.

Vì vậy, bạn cung cấp một nội dung bên trái đủ lớn để tạo khoảng trống cho cả phần bên trái mong muốn và phần đệm bên trong giữa biểu tượng và văn bản, sau đó dịch chuyển biểu tượng sang trái bằng cách nhân đôi số lượng phần đệm bạn muốn giữa biểu tượng và văn bản. Kết quả là một nút có các nội dung bên trái và bên phải bằng nhau, và một cặp văn bản và biểu tượng được đặt ở giữa là một nhóm, với một số lượng đệm cụ thể giữa chúng.

Một số giá trị mẫu:

// 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)

Bạn có thể làm cho điều này hoạt động trong Trình tạo giao diện (không cần viết bất kỳ mã nào), bằng cách sử dụng kết hợp các Tiêu đề và nội dung phủ định và tiêu cực.

Cập nhật : Xcode 7 có một lỗi trong đó bạn không thể nhập các giá trị âm vào trường RightInset, nhưng bạn có thể sử dụng điều khiển bước bên cạnh để giảm giá trị. (Cảm ơn Stuart)

Làm điều này sẽ thêm 8pt khoảng cách giữa hình ảnh và tiêu đề và sẽ tăng chiều rộng nội tại của nút bằng cùng một lượng. Như thế này:

Tại sao không ghi đè intrinsicContentSizephương thức trên UIView? Ví dụ:

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

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

Điều này sẽ cho hệ thống tự động thanh toán rằng nó sẽ tăng kích thước của nút để cho phép các phần trong và hiển thị toàn văn. Tôi không ở máy tính của mình, vì vậy tôi đã không kiểm tra điều này.

Bạn chưa chỉ định cách bạn đặt các phần tử, vì vậy tôi đoán rằng bạn đang sử dụng titleEdgeInsets vì tôi thấy hiệu ứng tương tự mà bạn nhận được. Nếu tôi sử dụng contentEdgeInsets thì nó hoạt động đúng.

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

Và đối với Swift đã làm việc này:

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

Yêu U Swift

Chủ đề này hơi cũ, nhưng tôi chỉ tự mình chạy vào đây và có thể giải quyết nó bằng cách sử dụng một bản in âm. Ví dụ: thay thế các giá trị đệm mong muốn của bạn ở đây:

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

Kết hợp với các ràng buộc tự động thanh toán đúng, bạn kết thúc với nút tự động thay đổi kích thước có chứa hình ảnh và văn bản! Nhìn bên dưới với desiredLeftPaddingthiết lập là 10.

Bạn có thể thấy rằng khung thực tế của nút không bao gồm nhãn (vì nhãn được dịch chuyển 10 điểm sang phải, bên ngoài giới hạn), nhưng chúng tôi đã đạt được 10 điểm đệm giữa văn bản và hình ảnh.

Đối với Swift 3 dựa trên câu trả lời của 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)

    }

}

Tất cả ở trên không hoạt động cho iOS 9+ , những gì tôi đã làm là:

• Thêm một ràng buộc về chiều rộng (đối với chiều rộng tối thiểu khi nút không có bất kỳ văn bản nào. Nút sẽ tự động chia tỷ lệ nếu văn bản được cung cấp)
• đặt mối quan hệ thành Lớn hơn hoặc bằng

Bây giờ để thêm một đường viền xung quanh nút, chỉ cần sử dụng phương thức:

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

Tôi muốn thêm khoảng trắng 5pt giữa biểu tượng UIButton của tôi và nhãn. Đây là cách tôi đạt được nó:

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

Cách contentEdgeInsets, titleEdgeInsets và imageEdgeInsets liên quan đến nhau đòi hỏi một chút cho và nhận từ mỗi phần tử. Vì vậy, nếu bạn thêm một số phần nhỏ vào bên trái của tiêu đề, bạn phải thêm phần phụ âm ở bên phải và cung cấp thêm một số khoảng trống (thông qua phần tử tích cực) ở bên phải nội dung.

Bằng cách thêm một nội dung phù hợp để phù hợp với sự thay đổi của tiêu đề, văn bản của tôi không nằm ngoài giới hạn của nút.

Tùy chọn này cũng có sẵn trong trình xây dựng giao diện. Xem phần khởi động. Tôi đặt trái và phải thành 3. Hoạt động như một lá bùa.

Giải pháp tôi sử dụng là thêm một ràng buộc về chiều rộng trên nút. Sau đó, một nơi nào đó trong khởi tạo, sau khi văn bản của bạn được đặt, hãy cập nhật ràng buộc về chiều rộng như sau:

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

Trong đó 8 là bất cứ điều gì bạn đang đặt.

gọi sizeToFit () đảm bảo rằng contentEdgeInset có hiệu lực

extension UIButton {

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