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!
Related
I need to have a circular UIButton that draws a custom color in the middle, along with an outer ring that is drawn as the default tint color (similar to a UIColorWell).
I've tried a few different approaches:
Using a multicolor SFSymbol: This would be an elegant solution, but as far as I can tell there's no way to apply the tint color to just a part of the image while setting the center to be a custom color. Either the entire image is tinted, or the image is drawn as the default colors set in the symbol file. Also, I need to support iOS 14, while the new hierarchical options that may allow me to accomplish this were added to iOS 15.
Setting various layer properties (ie, cornerRadius, borderColor, etc): This works and may be a decent fallback solution, but I'm unable to get the look that I'm going for (namely, having a transparent ring between the outer border and inner colored circle).
If there's a way to use either of the above options, please educate me! Either one seems like a better solution than:
Overloading the draw function: This is the option I'm going with at the moment, as it allows me to have complete creative control over the look of the button. The rest of this post will be regarding this method.
So far I was able to get the button to be drawn exactly as I wanted. However, I am unable to figure out how to draw the button appropriately with regards to various state changes.
For example, if a popover is displayed, all of the normal buttons are automatically redrawn as disabled. My custom button, however, isn't redrawn so I am unable to respond to the state change.
Same thing with tapping on the button - normal buttons are briefly shown in an emphasized color but my custom button doesn't respond.
Does someone have an example as to how to support overriding UIButton drawing with various states?
I was able to get the desired behavior by overriding tintColorDidChange in order to trigger a redraw of the button. Now I am able to draw the outer ring in the correct color (including grayed out when a popover is displayed) while maintaining the desired inner color.
I'm writing an iOS application, and I would like to use a view that has randomized moving colors in the background, much like the view that is brought up when you use siri. The view used for siri seems to be slightly darker than a standard dark UIBlurEffect and there are random colors added that move slowly around the view whenever queries are made.
Below is an example of the background I'd like to create. There's some red in the top right of the blur and some green in the top left. Plus some light purple or something at the bottom.
siri query view
The colors fade and new colors are added every queries, I honestly have no idea how to accomplish this, so any help that anyone has would be great.
Also, I'd like the answer to be in Objective-C if at all possible.
You refer to UIBlurEffect and it is key here. It provides a blur over a background, but doesn't specify what that background is. So, create that background to be a set of coloured views which appear (fade in perhaps), move around and then disappear. How you control the start and end location and the path the views follow is up to you. The effects view will apply the blurring for you and you can add whatever content you want in the foreground to the content of the effects view.
I want to have a UISlider with a uniform green colour (no gradients).
When I try to paint the uislider's track it appears to have a gradient even if I put the line:
slider.backgroundColor = [UIColor clearColor];
(Second slider in the image)
When I try to put an image coloured green (in the picture is blue but ignore it...) I am not able to round the corners of the layer:
slider.layer.cornerRadius = 10;
EDIT:
I ended up customizing it UISlider custom images and thumb height?
Is it possible for me to achieve this without customising a the uislider?
Ray Wenderlich's site actually has a free tutorial about customizing UIKit components. See User Interface Customization in iOS 6.
Note that although this tutorial is titled in iOS 6, the appearance proxy is available starting in iOS 5.0, so most of this tutorial is actually relevant for iOS 5.0+.
EDIT
Unfortunately, the gradient you mentioned is actually an image that's overlaid on top of the tint color by default, and there doesn't appear to be an easy way (such as a property) to disable this.
As rmaddy suggestions in the comments though, you can simply create and use an image with rounded corners to get around this.
You can do through interface build too.Choose whatever colors or images you want to use.
Swift 4
Add this line after slider.layer.cornerRadius = 10
slider.clipsToBounds = true
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.
How do I achieve the "Find My Friends" button look using iOS 5? it is as if the buttons are stamped into the leather.
I like the look of the Find My Friends app, it looks like leather and the buttons look like they are stamped into the leather. So, I was wondering how do I achieve this stamped in effect. I know how to set the background image in iOS 5 on a UINavigationBar, and I can set the tint color of a UIBarButton.
But, how do I get the image on the UINavigationBar to bleed through to the UIBarButton?
Everything I've tried leads to a black button and no bleeding of the background image.
I was thinking that there must be a way to set the transparency of the UIBarButton.
Does anyone know if this possible in iOS 5?
Or, do I need to do this?
Create a custom button image that is in the shape of the button image : rounded corners , 3D button effect and a transparent color in the middle.
This way the leather will show through where it is transparent in the middle of the button.
Thanks in advance! Brian.
Get your artist to draw the stamped button for you. The system is not going to offer any help.
I'm pretty sure you'll need to go with building a custom button image that has a translucent background colour for the leather to show through.
As you've mentioned, you can set the tintColor property on UIBarButtonItem, but this doesn't seem to respect the alpha of the colour you set. The image seems the best way to go.