Sử dụng resizableImageWithCapInsets: hình ảnh cho nút chỉ hoạt động cho bộ trạng thái, các trạng thái khác hiển thị "khoảng cách"

Question

Khi sử dụng resizableImageWithCapInsets: để tạo hình ảnh chỉ UIButton trạng thái bình thường (trạng thái đặt hình ảnh bằng cách sử dụng setBackgroundImage: forState:) công trinh. Tất cả các tiểu bang khác cho thấy một khoảng cách thay vì hình ảnh được vẽ. UIButton nói rằng nếu không có hình ảnh nào được đặt cho một trạng thái cụ thể, hình ảnh trạng thái bình thường sẽ được sử dụng với lớp phủ cho các trạng thái bị vô hiệu hóa và được chọn.

Đây là trạng thái bình thường:

Đây là tình trạng chọn:

Và đây là hình ảnh nguồn:

Rõ ràng là đang sử dụng hình ảnh có thể thay đổi kích thước mà tôi đã cung cấp, nhưng hình ảnh không vẽ khu vực được chỉnh kích thước. (Bạn có thể thấy các cạnh trái và phải nhưng khu vực giữa được kéo dài không được vẽ).

Thú vị, có thể kéo dàiImageWithLeftCapWidth: topCapHeight: hoạt động. Bây giờ đây là một phương pháp không được chấp nhận trong iOS 5, nhưng với khoảng cách được hiển thị trong API mới, tôi có thể bị mắc kẹt khi sử dụng nó.

Tôi nhận ra rằng tôi có thể cung cấp nhiều hình ảnh hơn cho mỗi tiểu bang nhưng đánh bại mục đích mà tôi đang cố gắng đạt được để giảm dung lượng bộ nhớ cộng thêm phụ thuộc vào thiết kế đồ họa của tôi mà tôi muốn tránh.

// This is the gist of the code being used 
UIImage* image = [UIImage imageNamed:@"button.png"]; 
UIEdgeInsets insets = UIEdgeInsetsMake(image.size.height/2, image.size.width/2, image.size.height/2, image.size.width/2); 
image = [image resizableImageWithCapInsets:insets]; 
[self.button setBackgroundImage:image forState:UIControlStateNormal]; 
// Even doing the following results in the same behaviour 
[self.button setBackgroundImage:image forState:UIControlStateSelected]; 

Answer 1

Bạn hiện không tạo đúng cách để chèn ảnh. Tôi đã sao chép vấn đề của bạn và sửa nó bằng cách sử dụng đúng loại insets.

Với mã hiện tại, bạn đang tạo một nửa chiều cao và chiều rộng hình ảnh - điều này khiến bạn có diện tích "có thể kéo dài" là 0x0 pixel - vì vậy bạn không có gì ở giữa.

Tại sao điều này không hiển thị sai trong trạng thái bình thường của nút, tôi không chắc chắn - có lẽ có một số tối ưu được tích hợp sẵn để UIButton sửa chữa mọi thứ hoặc tự động strectch nếu bạn không cung cấp hình ảnh và điều này không áp dụng cho các tiểu bang khác.

Các mũ được giả định để xác định diện tích của hình ảnh không được kéo dài. Trong trường hợp của hình ảnh button.png của bạn, đây là 6 pixel ở bên trái và bên phải và 16 pixel ở trên cùng và dưới cùng. Đây không phải là tiêu chuẩn, bạn nên nói với nhà thiết kế đồ họa của bạn rằng (ít nhất là cho trái-phải là phổ biến nhất kéo dài) bạn chỉ nên có một khu vực 1px ở trung tâm, tuy nhiên điều này không ảnh hưởng đến kết quả. Nếu bạn có vùng có thể kéo dài 1px thì bạn có thể chuẩn hóa mã của mình bằng cách lấy mũ từ kích thước hình ảnh như bạn đã cố gắng thực hiện trong câu hỏi của mình (mỗi nắp là (image.size.height - 1)/2 cho trên cùng/dưới cùng, nhưng có chiều rộng cho trái/phải).

Để có được những hình ảnh chính xác về nút bấm của bạn, sử dụng đoạn mã sau để tạo hình ảnh căng ra:

UIEdgeInsets insets = UIEdgeInsetsMake(16, 6, 16, 6); 
image = [image resizableImageWithCapInsets:insets]; 

Answer 2

Tôi đã gặp vấn đề trong khi sử dụng hình ảnh thay đổi kích thước trên iOS5 quá. Nó chỉ ra rằng nếu nút của bạn là loại "RountedRect" và bạn thao tác các hình nền, các hình ảnh thay đổi kích thước sẽ không hoạt động như mong đợi.(iOS6 xử lý điều này ok, có lẽ là giả sử loại nút mới của bạn và điều chỉnh khi cần.)