I have made a custom number pad keypad for my iOS app, but want it to more closely mirror the appearance of the standard keyboard. I am looking for advice on how to make a standard UIButton look and act like the standard keyboard buttons.
Specifically, I need to figure out the following for the iPad and would like to do as much as possible in an xib or storyboard.
The size of the buttons
The color of the keyboard background (or even better, how can I determine this myself?)
The background color of the button
The font and color of the text in the button
How do I add the shadow under the button?
How do I have the button highlight with the grey color instead of blue?
The spacing between the buttons
How do I keep the "group" of buttons centered as a whole when changing the orientation? (all of the resizing options anchor it to a side and not to each other)
Do the standard buttons use images, or do they modify standard UIButton's? Or more appropriately, which is better for us to do?
UPDATE:
I have created a project for the number pad which is a complete working example. However, I have not spent much time on the actual appearance, which is what this question was mainly about. I have posted it on Github and made it an open source project (covered by the MIT licence, so commercial use is allowed as well). Hopefully other people will find it useful, and hopefully others will feel inclined to help make it better and look more like the native keyboard. The Github repository is at:
https://github.com/lnafziger/Numberpad
If you want to do it mostly in IB, then the following can be done:
Size
Colours
Background Color
Font
Text Color
Shadow (to UILabel's not UITextArea)
Spacing
AutoSizing
There is a cool PSD vector kit for all types of iOS elements that should help:
http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
Anyway, to the rest of the answers:
Size
Take a screenshot of the buttons and determine the size in Photoshop, or you can use CMD+i on the image file to see the pixel dimensions. Remember to use CMD+Shift+4 and then drag (and then Space to make the screenshot).
Colours
Use the DigitalColor Meter app that's preinstalled on the Mac, it's pretty cool for all kinds of functions.
Background Color for UIButton
The actual UIButton will have a background color of [UIColor clear], however, for the whole keyboard background, it would be best to create something similar in Photoshop and again using color pickers to get the right gradients. Then you could drag this into IB as a background image.
Font
Again, have a look at fonts/try Helvetica
Text Color
[UIColor black]
Shadow:
Programmatically:
[text setShadowOffset:(0,1)]; // One option
[text setShadowOffset:(0,-1); // Another option
[text setShadowColor:[UIColor whiteColor]];
But, you can also set the shadow in the IB inspector for a UILabel.
Button highlight
Look at the UIButton reference
http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIButton_Class/UIButton/UIButton.html
Spacing & Rotation
If your using IB, then you could just drag on the buttons to whatever location.. IB has some autosizing options that determine where the buttons are spaced according to the TOP, LEFT, RIGHT and BOTTOM. You can also set if they are stretchable or not.
Related
I have noticed that if I instantiate UITableViewCell instances programmatically, specifying the style .value1 (UITableViewCellStyleValue1), the main text label text color is black, but the detail text label text color is a light shade of gray (not quite exactly UIColor.gray or UIColor.lightGray, though).
However, if I use a storyboard with prototype, static cells and set their Style attribute to "Right Detail" (which appears to be the Interface Builder equivalent of .value1), both labels are black.
I can navigate the cell's subviews all the way to the label and change the text color in the attribute inspector, but I'm not sure the color preset is there.
Is there a right way to unify the appearances of cells in both scenarios, while keeping the traditional gray color in the detail text label?
(I would use dynamic cells and instantiate them programmatically, but this one view controller just happens to have these off-the-shelf cells side-by-side with more complex, custom cells.)
I was also annoyed by the same problem.
Finally I found that Xcode 7.3.1 generated a detail text label with text color R:142, G:142, B:147 (#8E8E93).
Xcode 8.2 generates it with black text color. ('Default', to be exact)
Anyway, changing the label's color to R:142, G:142, B:147 (#8E8E93) is an appropriate one, I think so.
I had the same issue and logged a bug report in the Apple Bug Reporter. My bug report was closed with the comments "Duplicate of 28317724 (Open)". I am not sure if bug reports other than your own are visible, the system does not appear to be very transparent.
I am working on my first Today Centre widget, which simply consists of three labels on the default storyboard. It's working fine, but I read in the iOS Human Interface Guidelines that secondary text should "use the system-provided vibrant appearance" with notificationCenterVibrancyEffect.
What's the correct way to add this vibrancy effect to my two secondary labels? I've read about UIVisualEffectView, but it's still not clear to me how to use it for this purpose. I don't think I want to put a blurred view behind my labels because Notification Centre already blurs the background.
UIVisualEffectView when configured with a UIVibrancyEffect is meant to be used as a container—just drop your labels in its contentView and you’ll get the appropriate appearance on top of the Notification Center blur. The text color doesn’t matter; when it’s added to the contentView it gets special treatment and effectively always renders with the same appearance, though you can still adjust the alpha of the view (not of the text color) to make it more or less prominent.
good day, first of all u should use a correct view hierarchy, when U add some objects in your VisualEffectView example:
UIVibrancyEffect used in combination with UIVisualEffectView, adjusts the colors of the content to make it feel more transparent. UIVibrancyEffect can blending some objects
with the background example:
More particularly to your question(https://stackoverflow.com/a/25392645/4912496) Apple recommends to use vibrant effect for secondary text, because its simply beautiful for example(apple native app use vibrant effect, and Sports.ru don't use it):
But, some apps don't use this effect...
To ensure that your widget gets the vibrancy effect that’s appropriate for displaying items in the Today view, use notificationCenterVibrancyEffect.
Some info. https://www.omnigroup.com/developer/how-to-make-text-in-a-uivisualeffectview-readable-on-any-background
How can I create a button in a Today widget like the "edit button" in the picture below?
Is there a quick and standard way to do this or must I subclass a button and override it's draw method to draw a filled and rounded rectangle with transparency and background-only highlighting when touched down?
I am trying to find the best way to create exactly the same visuals for a button, instead of trying to imitate and match behaviour of it. Is it possible?
Segmented controls are a default within Xcode. It does most of the heavy lifting for you.
The UIKit Interfact Catalog in the iOS developer library should be helpful for you.
Within Xcode:
You will find segmented controls within the Interface Builder, in the Segmented Control section of the Attributes Inspector.
From here you can begin to build the visual styling and tie it to your code.
This should point you in the right direction.
More from apple is here: Segmented Control in the iOS developer library
They have great documentation, be sure you always seek that out.
From some quick tinkering I've got a UIButton that looks relatively close, you can tinker it some more to get it perfect. Here's a picture:
My buttons settings (the top one) has a height of 28, corner radius of 3, font color of black, and a background color of white with 31% Opacity. In the picture I was using text size of 15 but 13 or 14 looks a lot more accurate. I used the answers on this question as a reference point on how to create the rounded buttons.
Hope this helps some!
I have an application with some custom positioned bars, and as such I'd like to change the standard vertical alignment of the button text. I've tried setting
[buttonItem setTitlePositionAdjustment:UIOffsetMake(0, -22) forBarMetrics:UIBarMetricsDefault]
but nothing changes. Oddly, if I set a horizontal offset, the button moves just fine. It appears only vertical alignment changes are not being respected. Is this a bug on iOS 7? Am I misunderstanding something about the API? I see no documentation saying that the vertical alignment is ignored.
(example project showing the issue)
Unfortunately setTitlePositionAdjustment:forBarMetrics: doesn't appear to take effect. The best workaround I found was to use a UIButton instead, which can be done right in Interface Builder.
Add a UIButton to the UIBarButtonItem and set the font or image, size, etc.
In the Attributes Inspector, set the UIButton's control alignment to right
Hook the button back up to whatever actions you need
I'm trying to change the appearance of my UIButtons int the view as well as UIBarButtonItems in the NaviBar or toolBar or SegControl.
And here are 2 questions.
NO.1. How can I set customed background pictures to the buttons I mentioned while I can change their titles programmaticly? I mean I found that if I set the background of a button, the title seems to be concealed by the background image?
NO.2. I tried to add the text of the title directly on the png, ( which is actually a imperfect way since I need to change the title during the runtime). Anyway it works out both the image and the text, but the resolution seems to be reduced because the text became sort of blurred.
Can anyone give me some advices how to achieve it? Thanks a lot!
NO.1 The button title should not be obscured by the background image. Are you setting the button's image in code like this:
[btn setBackgroundImage:image forState:UIControlStateNormal];
? You may be instead setting the button's image property (which is different from its background image).
NO.2 You really don't want to be adding text to the button PNG, for the exact reason you mention. Buttons in iOS are designed to display images and text the way you want - put your energy into getting the built-in buttons working the way they should. There are umpteen billion tutorials out there about how to do this.