{"id":2622,"date":"2017-09-21T16:58:07","date_gmt":"2017-09-21T23:58:07","guid":{"rendered":"http:\/\/www.wellgolly.com\/?p=2622"},"modified":"2017-09-21T17:05:06","modified_gmt":"2017-09-22T00:05:06","slug":"ios-11-uibarbuttonitem-images-not-sizing","status":"publish","type":"post","link":"https:\/\/www.wellgolly.com\/?p=2622","title":{"rendered":"iOS 11 UIBarButtonItem images not sizing"},"content":{"rendered":"

The answer to my question was hinted at in this question<\/a> on StackOverflow, so I think the answer is to disable autolayout for my UIToolbar view. But I was not sure how to do that with programmatically designed views. Fortunately, someone else knew how to do it.<\/p>\n

The code that is said to work for views is
\n

\ncButton.translatesAutoresizingMaskIntoConstraints = YES;\n<\/code><\/pre>
\nBut I\u2019m not sure if it applies to my code since UIToolbar doesn\u2019t inherit from UIView.<\/p>\n
I have lots of small images that I use in my games that are different sizes depending on the device and orientation. Rather than having lots of different images, and adding new ones when Apple introduces new devices, I decided to make one 160×160 image fore each and then resize it when it is used. This worked fine from iOS 4 – iOS 10 but fails in iOS 11.<\/p>\n
The code is pretty straightforward:
\n
\n\/\/ Get the image\nNSString *pictFile = [[NSBundle mainBundle] pathForResource:@"Correct" ofType:@"png"];\nUIImage *imageToDisplay = [UIImage imageWithContentsOfFile:pictFile];\nUIImage *cImage  = [UIImage imageWithCGImage:imageToDisplay.CGImage scale:[UIScreen mainScreen].scale orientation:imageToDisplay.imageOrientation];\n\nUIButton *cButton = [UIButton buttonWithType:UIButtonTypeCustom];\n[cButton setImage:cImage forState:UIControlStateNormal];\n[cButton setTitle:@"c" forState:UIControlStateNormal];\n\n\/\/set the frame of the button to the size of the image\ncButton.frame = CGRectMake(0, 0, standardButtonSize.width, standardButtonSize.height);\n\n\/\/create a UIBarButtonItem with the button as a custom view\nc = [[UIBarButtonItem alloc] initWithCustomView:cButton];\n<\/code><\/pre>
\nThis is what it looks like pre11. The bar button items have been resized and fit nicely in the bottom bar. Note I reduced the size of the checkmark by 50% just to make sure I was looking at the correct code and that it behaves like I expect.<\/p>\n
iOS 10 version of buttons<\/p>\n
Here\u2019s what they look like in the simulator for Xcode 9.0 GM and iOS 11. Note that the top row of buttons resize correctly but the bottom row expand to fill the space allocated for the tab bar. The same behaviour happens on iPads as well and various devices.<\/p>\n
iOS 10 version of buttons<\/p>\n
The answer provided by FallStreak is:
\nBarButtonItem (iOS11\\xCode9) uses autolayout instead of frames. Try this (Swift):
\n
\nif #available(iOS 9.0, *) {\n    cButton.widthAnchor.constraint(equalToConstant: customViewButton.width).isActive = true\n    cButton.heightAnchor.constraint(equalToConstant: customViewButton.height).isActive = true\n}\n<\/code><\/pre><\/p>\n
The Objective C version that I worked out is:
\n
\nif (@available(iOS 9, *)) {\n     [cButton.widthAnchor constraintEqualToConstant: standardButtonSize.width].active = YES;\n     [cButton.heightAnchor constraintEqualToConstant: standardButtonSize.height].active = YES;\n}\n<\/code><\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"
The answer to my question was hinted at in this question on StackOverflow, so I think the answer is to disable autolayout for my UIToolbar view. But I was not sure how to do that with programmatically designed views. Fortunately, someone else knew how to do it. The code that is said to work for … Continue reading iOS 11 UIBarButtonItem images not sizing<\/span><\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-2622","post","type-post","status-publish","format-standard","hentry","category-ios"],"_links":{"self":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/2622","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2622"}],"version-history":[{"count":0,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/2622\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}