Gimp Settings to Create a Tintable Icon in iOS - ios

I have a PNG file that's an arrow that I'd like to use as an icon in an iOS app. I've dropped other PNG files into Xcode and they work fine as tintable UIButton images using this line as an example:
[self.backButton setTintColor:[UIColor redColor]];
With the PNG file I dropped in, the file I'm dropping in is transparent except for the arrow, which is black. The code above does nothing to the image I'm trying to tint.
I've found other posts covering this topic, but rather than type 10-20 lines of code for each icon I've got on a UIButton, I'd rather save it with the correct settings in Gimp and just reference the file in Xcode.
What settings should I pay attention to when saving the file as a PNG in Gimp?
Update
I initially thought adding the tint was causing my app to crash, however a cache clean resolved that issue. Regardless, my UIButton with a PNG background won't change tints. It's always black, though it turns charcoal (darkGray?) colored if the button is disabled.
Update 2
I've tried this without any luck:
self.backButton = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *backButtonImage = [[UIImage imageNamed:#"back"]imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[self.backButton setImage:backButtonImage forState:UIControlStateNormal];
self.backButton.tintColor = [UIColor myCustomColor];

I gave up and opted for a UISwipeGestureRecognizer--works out better for the interface, so no compromise. Apparently, you can tint some buttons, but not others.
https://stackoverflow.com/a/11066046/4475605

Related

UIButton: set background color (NOT IMAGE) for selected-highlighted UI state

I'm using Xcode 6.1.1
Is it possible to set the background colour in code for the selected/highlighted state for UIButton? - Not a background image!
I'm using ID's for colors (e.g. #"theme.brand.primary") that are linked to a json file i.e. .plist file
I've done it for setTitleColor UIControlStateHighlighted which works fine... example code:
[button setTitleColor:[config getColour:#"button.text.pressed-state"] forState:UIControlStateHighlighted];
However I want the colour of the button to change not the title.
There is no option for setBackgroundColor:forState: ???
Does anyone know if theres a simple way to do this?
Can you not just check for highlighted?
if (myButton.highlighted) {
myButton setBackgroundColor.......
}
I have open-sourced a class, STAButton, to fill this functionality hole. Available under the MIT license. Works for iOS 7+ (I have not tested with older iOS versions).

Xcode 6: Images Not Showing Up On Device

I am creating UIImageView(s) and adding these views to a UIScrollView. The images show up when I am testing on a simulator, but when I test on an iphone 5s the images don't show up. Below is a list of things I have tried:
Clean Build
Reinstall App
Then I thought maybe it was a problem with retina images so I added retina images (the images are white pngs):
I am using the images as such:
UIButton *doneBttn = [UIButton buttonWithType:UIButtonTypeCustom];
[doneBttn setImage:[UIImage imageNamed:#"addButton.png"] forState:UIControlStateNormal];
[doneBttn setImage:[UIImage imageNamed:#"addButtonSelected.png"] forState:UIControlStateHighlighted];
[doneBttn setFrame:CGRectMake(0, 0, 50 , 30)];
[doneBttn addTarget:self action:#selector(dismiss) forControlEvents:UIControlEventTouchUpInside];
[uiNavView addMenuBarButtonRight:doneBttn];
I know the code above works, because the image is displayed in the simulator.
What do I need to change to get the image to display on my device? Also, I have checked to make sure the files are in the xcode project directory, and not just linked.
I also faced this issue once, the cause of this issue was that I am not taking care of image name by assigning it to UIImageView, make sure that you are assigning UIImageView the exact name of the image as it is in the main bundle.
The simulator can read the image name if there is any case-sensitive issue or some extension issue like i.e. .png , .jpg, but device never reads the image name if there are issues in the naming conventions, device always treat the image name as exact.

UINavigationBar appearance background image duplicated and blurred in iOS 7.1

I have an interesting issue with an existing project and iOS7.1, I think. I've had code working and performing normally; since updating XCode and my iOS on my devices I have a problem, a transparent background image used in the Navigation Bar for that project is now rendered twice, once at the correct size and again blown up and blurry. The code only adds the image via the [UINavigationBar appearance] api in the app delegate. To check that this wasn't a specific bug with my code I create a default xcode project using the master detail default, set it to be iPhone only, added some newly created images and set them using the same calls in the app delegate. This project had the same issue and is on github here:
UINavigationBarBug github source
This is the relevant chunk of code imo:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// Override point for customization after application launch.
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"TLS.png"]
forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setBarTintColor:RGB(233, 155, 20)];
[[UINavigationBar appearance] setTintColor:RGB(245, 245, 245)];
return YES;
}
A screenshot of the problem:
Looking at the transition documentation what i am doing here should be fine, the navigation bars at 44 points high should be scaled horizontally and not vertically. I'm also pretty sure this problem never occurred prior to the update (it would have been spotted by internal QA prior to uploading the code to apple for review).
Two things fix it:
1) Using non transparent images, if it still has the problem it is loading the 'correct' image second and due to the lack of transparency overriding the incorrectly rendered one.
2) Using a navigation bar that is 66 points high instead (available in the project with a top transparent section as TLS-ios7), changing the code in the app delegate to use that fixes the problem.
Can anyone enlighten me as to what is going on here? Is this a bug, is it my fault, is there some section of documentation that informs me why this is so?
Thanks!
** Update: I recently found an iPad lying around still running iOS 7.0, this problem does not occur. **
I had a similar issue on my app. I solved it by setting the "translucent" of my UINavigationBar to NO.
[self.navigationController.navigationBar setTranslucent:NO];
You can disable image stretching by defining left and top caps.
Here's a Swift 3 solution:
let navbarImage = image.stretchableImage(withLeftCapWidth: 1, topCapHeight: 1)
UINavigationBar.appearance().setBackgroundImage(navbarImage, for: .default)
Example before:
and after the fix:
I just received this following my bug report... tl;dr It's me providing an image with an incorrect height:
Workaround for iOS 7.1 is to specify a resizable image with a non-zero inset. Internally UINavigationBar will tile your image if it isn't quite the right size and that is basically what was happening here – since the image wasn't tall enough (the navigation bar is top attached, so the image needed to be 64pt tall not 44pt) it would get tiled. If you set it to stretch and configure the cap insets such that it only stretches pixels that are uniform you should be able to avoid this issue.
I had a similar looking issue and it turns out I didn't have the correct image assets in the assets catalog. I only had retina assets but when I imported, they went into the 1x box in the asset catalog - moving them to the 2x box fixed my nav bar for me.
I had a similar problem, I had a logo with transparent background. Height was fine. Added in coloured background and the problem stopped.

UIKeyboard not automatically translucent in iOS7

I understand that when developing in Xcode 5 with and iOS 7 project, the keyboard that pops up when interacting with a UITextField should be translucent and show through any colors in the background. This is not the case in both my projects. I have a colored & blurred background and I'm hoping for that to transpire through the keyboard; however the keyboard remains the default white/gray.
This is what I have so far as a demo:
UIColor *tintColor = [UIColor colorWithWhite:0.21 alpha:0.4];
UIColor *background = [[UIColor alloc] initWithPatternImage:[[UIImage imageNamed:#"universe.jpg"] applyBlurWithRadius:19
tintColor:tintColor
saturationDeltaFactor:1.8
maskImage:nil]];
self.view.backgroundColor = background;
UITextField *text = [[UITextField alloc] initWithFrame:CGRectMake(200, 200, 300, 60)];
[self.view addSubview:text];
I have even tried to set the keyboard appearance type to both UIKeyboardAppearanceDefault and UIKeyboardAppearanceLight
Can someone please guide/tell me on how can I achieve the keyboard translucent effect? Should this be automatic?
Thanks
EDIT 1:
I have the iPad mini, I have the iPad 3rd generation and the iPad 4th generation both with retina displays.
Running iOS 7.0.2
Your code, setup and example worked fine on my xCode. I tried first only setting the background color to something obvious like red.
self.view.backgroundColor = [UIColor redColor];
This showed through the keyboard. Afterwards I tried an image without a blur effect.
UIImageView* img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"images.jpeg"]];
img.frame = self.view.frame;
[self.view addSubview:img];
This to showed through, but not as much as the red because the image I used was one similar to a galaxy as you stated, and therefore had a lot of black in it.
Lastly I tried your exact code, using the gaussian blur effect to create a color.
UIColor *tintColor = [UIColor colorWithWhite:0.21 alpha:0.4];
UIColor *background = [[UIColor alloc] initWithPatternImage:[[UIImage imageNamed:#"images.jpeg"] applyBlurWithRadius:19 tintColor:tintColor saturationDeltaFactor:1.8 maskImage:nil]];
self.view.backgroundColor = background;
This to also worked, but it was extreamly hard to notice. The combined affect of dark colors being blurred once by the gaussian and being blurred again by the keyboard made it almost unnoticeable. I suggest you try a similar approach to see if you are actually getting a transparent keyboard, because if the code and info you have given are correct, then it seems like you are and maybe can not see it.
Also the keyboard is only slightly transparent, so if you are expecting a full transparency then that is not the case. This slight transparency gets minimized the more uniform the background color is for instance if you had an all black or white background it would be unnoticeable.
Edit: I confirmed that this is not the case on the iPad running iOS7.0.x I get the standard all grey keyboard, even using standard apps like Safari. It seems that Apple had not optimized the transparency for such large screens and it was causing lag issues. It also seems that this is partially fixed in iOS7.1 and there are more transparent iPad features in iOS7.1, but people are recommending turning them off as they cause the iPad to run slower than normal.
iOS 7.0.3 reduced much of the translucency in navigation bars, toolbars, and the keyboard.
For navigation bars and toolbars, starting in iOS 7.0.3, you can adjust the alpha property of the UIColor set as barTintColor if you want it more translucent.
As far as public APIs go, keyboards in iOS 7, however, still have only these options:
textField.keyboardAppearance = UIKeyboardAppearanceDefault; // the default (same as light)
textField.keyboardAppearance = UIKeyboardAppearanceDark; // dark look (previously UIKeyboardAppearanceAlert)
textField.keyboardAppearance = UIKeyboardAppearanceLight; // light look
So I assume you're not getting the translucency you'd like because you're using iOS 7.0.3 or later. You can verify this by downloading an older version of Xcode and running your app in that version's simulator.
As far as private APIs, the keyboard background is made up of UIKBBackdropView and UIKBBackgroundView. You can take a look at their extracted header files here, but you should not modify these if you're submitting to the App Store. (These modifications are grounds for rejection, and also aren't documented so they could be changed in any iOS update.)
I built a simple app to test to try to find this issue, but I've been unable to replicate it except by setting IPHONEOS_DEPLOYMENT_TARGET to a lower version number like 6.0, then running on iOS 6.0. In all cases, on all iOS 7 devices and simulator, the default keyboard has a translucent blur of the content underneath it.
Perhaps you could share a picture, or a sample project?

UIImage looks different when used in iOS

I am having problems with a png image, that gets wrong colors on iOS compared to the actual image.
It does not matter how I am using the image, it always gets the wrong colors. I have tried on UIButton and UIImageView and it gives the same result.
It is a very standard use of a UIImage:
UIImage* greenButtonImg = [UIImage imageNamed:#"btn_green"];
UIImageView* testView = [[UIImageView alloc] initWithImage:greenButtonImg];
[self.view addSubview:testView];
The second image is how it looks on iOS and the first button is how it looks on my Mac (Finder and Photoshop):
As you can see the second button has a different green color.
This is happening all over the app where am using this picture. It happens in the Simulator and on a iPhone 5.
What can cause this issue? Can this be caused by settings in Photoshop, where the image was created?
As Jeff wrote in a comment it was a problem with the RGB Profiles.
I managed to fix the problem by converting the color profile in Photoshop:
Edit -> Convert to Profile... -> Set profile to "Apple RGB"
In iOS 7.0, the image is colored with the toolbar’s tintColor.
In iOS 7.0, all subclasses of UIView derive their behavior for tintColor from the base class.
By default, an image (UIImage) is created with UIImageRenderingModeAutomatic.
If you have UIImageRenderingModeAutomatic set on your image, it will be treated as template or original based on its context.
Certain UIKit elements—including navigation bars, tab bars, toolbars, segmented controls—automatically treat their foreground images as templates, although their background images are treated as original.
Other elements—such as image views and web views—treat their images as originals. If you want your image to always be treated as a template regardless of context, set UIImageRenderingModeAlwaysTemplate.
If you want your image to always be treated as original, set UIImageRenderingModeAlwaysOriginal.
Refer Template Images for more info.

Resources