Why does UIButton render the titleLabel so terribly on iOS 7? - objective-c

I'm using IcoMoon to create a custom font that I use to generate Icons. This however plays no role as the same phenomenon occurs using Helvetica.
Why do 2 things occur on titleLabel of a UIButton on iOS 7?
The right edge of the label is cut off (the button frame is much wider, but the label frame is getting cut off
there is a dark ring around the light gray image.
This looks absolutely horrible and it's basically unacceptable. We'll have to render graphics ourselves and localize images where appropriate.
I would be grateful for any info. The only thing that distinguishes these two checkmarks is that they have different colors set for titleColor

Try setBackgroundImage: instead of setImage:

Related

Animation artifacts when NSImageView intersects NSTextField in an NSPopover

I'm presenting a view in an NSPopover, using code based on this sample code.
The view, and all of its sub-views, are layer-backed. There's a single NSImageView, and several non-editable NSTextFields. The text fields backgroundColors are set to [NSColor textBackgroundColor], and their textColors to [NSColor textColor]. In this way, the text is black if one is using the normal theme, and white if one is using the "dark menu bar and Dock" option (which I'll refer to as "dark theme" from now on). This all works fine, and it looks a little somethin' like this:
Light theme:
Dark theme:
The problem comes when I animate the NSImageView up off the view. As it intersects with the NSTextFields, the image appears to blend with the text fields in an unappealing manner. It happens in both light and dark themes, but it's more icky-looking (it's a technical term) in the dark theme. Dig it:
The code to animate it looks basically like this:
CABasicAnimation* positionAnimation = [CABasicAnimation animationWithKeyPath:#"position"];
positionAnimation.fromValue = [NSValue valueWithPoint:fromPoint];
positionAnimation.toValue = [NSValue valueWithPoint:toPoint];
positionAnimation.duration = imageAnimationDuration;
[self.imageView.layer addAnimation:positionAnimation forKey:#"position"];
self.imageView.layer.position = toPoint;
What have I tried? Oh, what haven't I tried?
First off, my own views don't have any kind of NSVisualEffectView going on. But it seems that NSPopover adds that on its own; you can clearly see my desktop bleeding through the popover in the animation above. That's fine; it's actually a nice effect. But, thinking that my NSImageView was trying to be vibrant, I subclassed NSImageView just to return NO from allowsVibrancy. No change in behavior.
Next, I subclassed NSView to return NO from allowsVibrancy, and made the parent view of my view an instance of that. No change in behavior.
My NSTextFields are set with drawsBackground = NO, so I changed them to YES. No change in behavior. Then, leaving drawsBackground = YES, I set both text field's backgroundColors to [NSColor clearColor]. Here's where it gets weird. This does make the weird drawing go away, but it changes the text color of one of the text fields (the smaller one) to black. Wut? See below.
I gave up on the background colors, and started messing with the text colors. I found that if I set the textColor of the text fields to a discrete color (say, [NSColor blackColor] or [NSColor whiteColor], then the weird drawing problem also goes away. It seems only to get weird when using colors which adapt with the theme such as [NSColor textColor]. That's super lame, because the whole point of using something like [NSColor textColor] is that it adapts to the theme. I could probably hack around and figure out what theme is active and set the colors manually, but I really don't want to go that route if I can help it.
I promise there's a question in here somewhere, and, mercifully, here it is:
How can I fix the animation issue shown above, while still using colors which properly adapt to the current theme?
Sample project on GitHub.
Edit:
The desired result is to have no blending between the image and the text. Something like this:
The image I used in the sample app here maybe isn't the best example to convey the sheer yuckiness of the animation I'm seeing in my actual app. The image in the sample is already mostly white, while in my actual app it's mostly black, and it truly looks horrible when blended with white text.
Visual Effect Views (like used in NSPopover) are totally messed up in OS X Yosemite and they are causing your problem here. It is not your fault, these views are totally buggy.
A workaround on Yosemite should be to set the appearance property of each NSTextField to NSAppearanceNameAqua. Because if the labels don't try to do some weird vibrancy effect, they can't mess things up. The labels still look the same and the strange effect is gone.
My words in code:
self.titleLabel.appearance = [NSAppearance appearanceNamed:NSAppearanceNameAqua];
self.descriptionLabel.appearance = [NSAppearance appearanceNamed:NSAppearanceNameAqua];
Luckily NSVisualEffectView's are working fine now in El Capitan. So your code should work fine there..

UIImageView off screen in landscape mode

I am using iOS7 and I have a UIViewController with a UIImageView that fill the screen in Aspect Fit mode.
In portrait mode the image looks good but in landscape mode the image is off screen.
Can anyone help me?
Thanks ;-)
As you can see the image is in the same position in both orientations. It's the same distance away from the top panel and pushed up against the left side of the screen. iOS doesn't automatically change the frame of the image for you when you change orientations. You have to either do it programmatically or use auto layouts to achieve the display you want.
AutoLayout Guide
Autolayout is a pain to learn at first but stick with it. It's a great solution when you get the hang of constraints and start modifying them programatically. In fact it's recommended you never set the frame explicitly, you should always use constraints to position and size frames.
As Literphor mentioned above. it is layout issue. Either use autolayout or do the trial and error (because you are not familiar with Autosizing) with settings shown in below image. That should fix the issue.
self.imageView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin |
UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
You must "play" with autoresizingMask

Setting corner radius on UIDatePicker with a background color

I have a UIDatePicker in my view and have set the background color of the UIDatePicker:
self.datePicker.backgroundColor = [UIColor lightTextColor];
self.datePicker.layer.cornerRadius = 10;
This successfully puts a background behind the UIDatePicker (which in iOS7 is essentially transparent) but fails to make the rounded corners for the background that I am looking for (I do this same thing for an image on the screen and it works perfectly).
It seems that the corner radius doesn't affect the background color.
Is there a way to fix this problem by setting a corner radius for the background color (or any another solution).
The reason I want to do this is because the ordinary UIDatePicker looks awkward in the view I have constructed and looks much better with a background color.
However, all the other items in the view have rounded corners and I want the UIDatePicker to match them.
Thanks.
You have to add layer.masksToBounds=YES;
Try this,
self.datePicker.backgroundColor = [UIColor lightTextColor];
self.datePicker.layer.cornerRadius = 10;
self.datePicker.layer.masksToBounds=YES;
UIBuilder Swift 5 solution:
See picture, it's the same as #ToseefKhiji's solution but even easier to execute for fans of UIBuilder controls.
This is how it comes out (I have added other features to the picker programmatically, such as borderWidth, color, etc...)
UIBuilder is underappreciated by Swift/iOS coders as everyone has rushed to SwiftUI as the new new thing.

How to set an image to a NSButton to be resized along with the button?

I have an image (3width x 15height, the first and last pixels are rounded on the corners), and I want to create a button (the height of the button is always the same, 15px, but the width changes) that uses this image no matter what size it is, kinda like UIEdgeInsets on iOS.
I've tried to use [[button cell] setImageScaling:NSImageScaleAxesIndependently]; but the image gets distorted and loses quality.
How can I do this on OSX? Thanks!
You could probably create a custom subclass of NSButtonCell and use the Application Kit's NSDrawThreePartImage() function in the cell's drawInteriorWithFrame:inView: method.
For more info on how to use NSDrawThreePartImage(), see Cocoa Drawing Guide: Drawing Resizable Textures Using Images.
If it's possible to set this in graphical interface > Attribute Inspection > Button section Background

UISegmentedControl custom background image

I have UINavigationBar setup as image - some wood texture. I want to insert UISegmentedControl with 4 buttons on that bar. Buttons should have same texture with slightly changed tint.
One solution would be to change tint alpha of buttons background color, so that texture in background can get trough, but as I set alpha for tint in IB it doesn't save value, it always gets back to value 1.
I cant get UISegmentedControl to show background image, so finally gave up and decide to search for help...
Effect that is desired is one in iBooks app, with buttons in Navigation Bar.
Any link or small help would be appreciated..
This post describes the steps involved and has sample code: http://idevrecipes.com/2010/12/13/wooduinavigation/
https://github.com/xhan/PlutoLand/blob/master/PlutoLand/UI/PLSegmentView.h
a custom SegmentView that can specify two images(normal, clicked)
Do not bother with one of those custom segmented control packages if you're on iOS 5 or later.
Per Dylan's suggestion, use the Appearance functionality in iOS 5+.
See the top answer here:
Customizing Left & Right UISegmentedControl Buttons