thiết lập hình ảnh cho UIBarButtonItem - hình ảnh kéo dài

Question

Khi tôi cố gắng sử dụng "initWithImage" của UIBarButtonItem để khởi tạo một thanh tùy chỉnh hình ảnh, nó đi ra rửa sạch và kéo dài chống lại một thanh điều hướng màu đen. Đây là cách tôi tạo ra nó:

UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"gear.png"] style:UIBarButtonItemStyleBordered target:self action:@selector(showSetting:)]; 

Đây là những gì nó trông giống như:

Bất cứ ý tưởng nếu đó là một vấn đề với hình ảnh? Tôi đã nhận được nó từ một tập hợp các biểu tượng tôi đã mua.

Answer 1

Hình ảnh được hiển thị trên các mục nút thanh được 'bắt nguồn' từ hình ảnh nguồn (nó chỉ sử dụng giá trị kênh alpha trong hiển thị nhưng tất cả đều ổn trong hình ảnh của bạn). Nó có thể không đúng kích cỡ - bạn có thể cần phải mở tệp hình ảnh và cắt nó theo đúng kích cỡ.

Bạn cũng có thể thử nhìn vào dù thiết lập imageInsets tài sản (được thừa hưởng bởi UIBarButtonItem từ UIBarItem) có thể được sử dụng để điều chỉnh kích thước một cách để ngăn chặn nó bị kéo căng.

DOCO trên hình ảnh mục thanh nói như sau:

Các hình ảnh được hiển thị trên thanh được bắt nguồn từ hình ảnh này. Nếu hình ảnh này quá lớn để vừa với thanh, nó sẽ được thu nhỏ lại. Thông thường, kích thước của thanh công cụ và thanh điều hướng là 20 x 20 điểm.

Answer 2

Cách tốt nhất để làm điều này là tạo nút, đặt hình nền và đặt hành động của nó. Sau đó, một UIBarButtonItem có thể được tạo ra bằng cách sử dụng nút này làm chế độ xem tùy chỉnh. Đây là mã ví dụ của tôi:

UIButton *settingsView = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 61, 30)]; 
[settingsView addTarget:self action:@selector(SettingsClicked) forControlEvents:UIControlEventTouchUpInside]; 
[settingsView setBackgroundImage:[UIImage imageNamed:@"settings"] forState:UIControlStateNormal]; 
UIBarButtonItem *settingsButton = [[UIBarButtonItem alloc] initWithCustomView:settingsView]; 
[self.navigationItem setRightBarButtonItem:settingsButton]; 

Answer 3

Tôi biết câu hỏi này đã có dấu an toàn. Nhưng tôi đã chạy đến điều này ngày hôm nay và nghĩ rằng tôi sẽ đưa ra câu trả lời của tôi anyway. Kiểm tra đánh dấu câu trả lời ở trên đã giúp tôi, nhưng nó cũng mất một số thử nghiệm thêm để tìm ra những gì đã thực sự xảy ra.

Hình ảnh nút đang bị thu hẹp chỉ trong trục x chứ không phải là y. điều này là bởi vì nó quá cao cho nút và nó co lại nó xuống để phù hợp. Nhưng nó không co lại nó theo tỷ lệ. Chỉ trên dọc. Vì vậy, nó xuất hiện kéo dài. Nó không thực sự kéo dài - ngụ ý sự mở rộng của nó. Thay vào đó chiều cao bị thu hẹp. Biết được sự khác biệt mà tôi nghĩ là quan trọng để hiểu tại sao nó lại xảy ra và cách khắc phục nó.

Tôi đã làm điều tương tự như OP đã làm. Nghĩ rằng tôi đang hỗ trợ võng mạc, tôi đã tạo biểu tượng 40x40. Tôi là một dấu kiểm màu xanh lục với một kênh alpha. Nó được đệm với các pixel trống là 40x40. Ứng dụng đã đổi kích thước để vừa với chiều cao có sẵn của nút. Nhưng chiều rộng vẫn như cũ. Vì vậy, nó đã trở thành một nơi nào đó trong khoảng 40x30 hoặc 40x20. Tôi nghĩ rằng nút có thể xử lý một biểu tượng 30 cao, nhưng sau đó nó là một chút quá lớn cho hộp IMHO.

OP đã giảm nút xuống 30x30 và làm cho nó không bị mờ thêm nữa. Nhưng đó không phải là giải pháp tốt nhất. Bởi vì nó không thực sự là một nút võng mạc khi bạn làm điều đó. Nó bị co lại và sau đó bị thổi bay lên võng mạc.

Câu trả lời đúng là đặt tên cho phiên bản cao 40 pixel của bạn bằng @ 2x và sau đó tạo phiên bản một nửa (20 pixel) và lưu nó mà không có @ 2x.Chiều rộng có thể là bất cứ điều gì. Sau đó tải với imageNamed: không chỉ định @ 2x. Nó sẽ sử dụng png thích hợp cho một thiết bị võng mạc hoặc không võng mạc.

Điều tiếp theo xảy ra với tôi là khung hình quá nhỏ. Vì vậy, tôi tăng kích thước vải của tôi trong psd để pad png đến 80 rộng để làm cho nút hơi rộng hơn và nhiều hơn nữa.

Answer 4

tôi đã cùng kéo dài vấn đề đối với hình ảnh 40x40 của tôi khi tôi đặt hình nền cho leftBarButtonItem

UIBarButtonItem *backButton = [UIBarButtonItem new]; 
[backButton setBackButtonBackgroundImage:[UIImage imageNamed:@"back_icon"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; 

self.navigationItem.leftBarButtonItem = backButton; 

Nhưng vấn đề của tôi đã giải quyết với đoạn mã sau

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_icon"] style:UIBarButtonItemStylePlain target:self action:@selector(handleBack:)]; 

self.navigationItem.leftBarButtonItem = backButton; 

và kết quả tương tự nếu UIBarButtonItemStyleBordered được sử dụng.

Answer 5

Đối với những người đã gặp vấn đề kéo dài thanh công cụ này trong iOS 11, có vẻ như phiên bản @ 2x của hình ảnh của bạn bây giờ là bắt buộc để hiển thị khung và giới hạn của nó.

Vì vậy, nếu bạn có mã như thế này, nơi bạn đang thêm một hình ảnh tùy chỉnh UIBarButtonItem như thế này:

UIButton *tagsBtn = [UIButton buttonWithType:UIButtonTypeCustom]; 
tagsBtn.bounds = CGRectMake(0, 0, 40, 40); 
[tagsBtn setImage:[UIImage imageNamed:@"tags.png"] forState:UIControlStateNormal]; 
tags = [[UIBarButtonItem alloc] initWithCustomView:tagsBtn]; 
[tagsBtn addTarget:self action:@selector(tags:) forControlEvents:UIControlEventTouchUpInside]; 

[bottomToolbar setItems:[NSArray arrayWithObjects:flexibleSpace,tags,flexibleSpace,nil]]; 

Sau đó, bạn sẽ cần phải có một tags@2x.png đó là 80x80, thậm chí nếu thẻ của bạn. png hình ảnh là 80x80. Chỉ cần đổi tên tags.png thành tags@2x.png sẽ thay đổi kích thước hình ảnh thành 40x40 vì nó đã làm trước iOS 11 mà không thay đổi mã hoặc chỉ thêm thẻ@2x.png vào dự án của bạn.

Answer 6

Đặt kích thước hình ảnh chính xác: @ 1x = 22px, @ 2x = 44px @ 3x = 88px trước tiên.

Sau đó

let leftBarButtonItem = UIBarButtonItem(image: yourUIImage, style: .plain, target: self, action: #selector(action)) 
leftBarButtonItem.tintColor = UIColor.red 
navigationItem.leftBarButtonItem = leftBarButtonItem 

hoặc

let btn = UIButton(type: .custom) 
btn.addTarget(self, action: #selector(contactMe), for: .touchUpInside) 
btn.setImage(#imageLiteral(resourceName: "open"), for: .normal)