How to get an image for a "Star" (Favorite) UIBarButtonItem? - ios

I am new to iOS. I'm looking to put a "Star" button on the top menu of my app. Is there a way to get the star button built into iOS similar to UIBarButtonSystemItemAdd
If not, how can I get an image similar to the common favorite(s) star used by Apple in iOS?
Similar to this:

A simple and quick way is to use FontawesomeKit.
You can easily create the button like this:
FAKFontAwesome *icon = [FAKFontAwesome starIconWithSize:20];
[icon addAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor]];
UIBarButtonItem *favButton = [[UIBarButtonItem alloc] initWithImage:[icon imageWithSize:CGSizeMake(20, 20)]
style:UIBarButtonItemStylePlain
target:self
action:#selector(doSomething:)];

I think it's not possible. But if you want some icons, you can check this link, another one.
EDIT:
You can also extract the Artwork of a component: See this repository

Following up what andreamazz said, here's code to have a colored star (favorite) button in the navBaritem (swift):
let favAwesome = FAKFontAwesome.starIconWithSize(30.0) as FAKFontAwesome
favAwesome.addAttribute(NSForegroundColorAttributeName, value: UIColor.whiteColor())
let favBtn = UIButton.buttonWithType(UIButtonType.System) as UIButton
favBtn.frame = CGRectMake(0,0,30,30)
favBtn.setImage(favAwesome.imageWithSize(CGSizeMake(30, 30)), forState: .Normal)
favBtn.addTarget(self, action: "favorite", forControlEvents: UIControlEvents.TouchUpInside)
// favBarBtn is a class instance so we can access in the action method
favBarBtn = UIBarButtonItem(customView: favBtn)
navigationItem.rightBarButtonItem = favBarBtn
// your custom code here to find isFavorite
if isFavorite {
favBtn.tintColor = UIColor.redColor()
} else {
favBtn.tintColor = UIColor.blueColor()
}
then there is the "favorite" method to change the color (and set/unset favorite):
func favorite() {
// your custom favoriting code here
let favBtn = favBarBtn?.customView as UIButton!
if isFavorite {
favBtn.tintColor = UIColor.redColor()
} else {
favBtn.tintColor = UIColor.blueColor()
}
}

Related

How to properly refresh a UINavigationBar?

In relation to this question: How to change Back button text from within the child view controller? I am searching for a propery way to refresh the navigation bar after changing the back button title with previousViewController.navigationItem.backBarButtonItem?.title = "New Title".
The (not so ideal?) solution from the linked question:
if let navigationController = self.navigationController {
navigationController.popViewControllerAnimated(false)
navigationController.pushViewController(self, animated: false)
}
Edit:
Apparently changing the layer frame forces the navigation bar to refresh. Not a solution, but a less expensive(?) workaround I guess:
if let navigationController = self.navigationController {
navigationController.navigationBar.layer.frame.insetInPlace(dx: 0.1, dy: 0)
navigationController.navigationBar.layer.frame.insetInPlace(dx: -0.1, dy: 0)
}
After trying various methods to refresh, I find this is the least ugly solution that seems to work (back then on iOS 10 but apparently not currently on iOS 13, i.e., don't count on this):
guard let navigation = navigationController,
!(navigation.topViewController === self) else {
return
}
let bar = navigation.navigationBar
bar.setNeedsLayout()
bar.layoutIfNeeded()
bar.setNeedsDisplay()
Other methods tried:
Presenting a view controller (causes screen to flicker in some cases)
Hiding and re-showing the bar (breaks bar if half-way between backswipe to previous VC)
Setting the bar's layer's frame (does not seem to work reliably, and is explicitly forbidden by the documentation for navigationBar)
This works for me
_ = navigationController.view.snapshotView(afterScreenUpdates: true)
UIButton *leftbtn = [UIButton buttonWithType:UIButtonTypeCustom] ;
[leftbtn addTarget:self action:#selector(city:) forControlEvents:UIControlEventTouchUpInside];
[leftbtn setImage:[UIImage imageNamed:#"location"] forState:UIControlStateNormal];
leftbtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[leftbtn sizeToFit];
self.citybtn = leftbtn;
UIBarButtonItem* cityBtn = [[UIBarButtonItem alloc] initWithCustomView:leftbtn];
UIBarButtonItem *left_fixedSpaceBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
left_fixedSpaceBarButtonItem.width = -17;
self.navigationItem.leftBarButtonItems = #[left_fixedSpaceBarButtonItem,cityBtn];
.........
when u change
[self.citybtn setTitle:city forState:UIControlStateNormal];
[self.citybtn sizeToFit];
One solution would be to have a function, which changes the UIBarButtonItem completely by removing/hiding the back button and showing a custom UIBarButtonItem in its place with the navigationItem.leftBarButtonItem property. Surely not ideal but the button is not meant to be changed mid-VC lifecycle so I guess you could try. In that sense there is no "proper" way as this is not considered standard behaviour.
It worked for me when I added this function to a button on a sample View Controller:
func changeBackButton() {
navigationItem.hidesBackButton = true
navigationItem.leftBarButtonItem = UIBarButtonItem(title: "Test", style: .plain, target: self, action: #selector(test))
}

Change UISearchBar Cancel button to icon

I want to change the UISearchBar's Cancel button to one that only has an image, and no text. Here's where I got to so far from original behaviour
to this
A step in the right direction, but the problem is the button is too wide. When I debug the view, I can see that it has button label insets of 11 points on left and right. Does anyone know how to make the button fit the content size? The image is square.
Here's my code for customising the button:
UIBarButtonItem *barButtonAppearanceInSearchBar;
if (IOS9) {
barButtonAppearanceInSearchBar = [UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:#[[UISearchBar class]]];
} else {
barButtonAppearanceInSearchBar = [UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil];
}
barButtonAppearanceInSearchBar.image = [UIImage imageNamed:#"Close"];
barButtonAppearanceInSearchBar.title = nil;
Another weird issue is that when I dismiss the search bar and activate it again, the button image turns dark (it's still there, I can see it when debugging the views), so it looks like this
Any idea how to keep the icon white? I tried this method below, but without results:
- (void)willPresentSearchController:(UISearchController *)searchController {
searchController.searchBar.tintColor = [UIColor whiteColor];
}
Use image rendering and tint color.
barButtonAppearanceInSearchBar.image = [[UIImage imageNamed:#"Close"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
barButtonAppearanceInSearchBar.tintColor = [UIColor whiteColor];
barButtonAppearanceInSearchBar.title = nil;
Here's the Swift 4.1 Version of #jamesBlake 's answer:
func setUpSearchBar() {
let barButtonAppearanceInSearchBar: UIBarButtonItem?
barButtonAppearanceInSearchBar = UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self])
barButtonAppearanceInSearchBar?.image = UIImage(named: "Home.png")?.withRenderingMode(.alwaysTemplate)
barButtonAppearanceInSearchBar?.tintColor = UIColor.white
barButtonAppearanceInSearchBar?.title = nil
}

UiTextField changes font while editing in Swift 1.2 & 2.0

I have a UITextField with a custom font, everything worked fine until Swift update to 1.2 and 2.0. Afterwards, each time I try to edit a text field, it changes its font to a different one that seems a sort of Times New Roman. Does anyone have experience of that?
I came across this same issue and figured out a solution. The problem boils down to setSecureTextEntry changing the font when it is set, and not changing it back when it is unset. In fact, you can never change the font back as long as your UITextField has first responder.
The trick is to resignFirstResponder before you call setSecureTextEntry: and then becomeFirstResponder again. This will work (as of iOS 9.2), but it triggers the keyboard show/hide animation and will cause the screen to "shake". To get around that, you'll need to kill the keyboard animation as well.
Here's my full solution:
- (void)setSecureTextEntry:(BOOL)secureTextEntry {
__weak typeof(self) weakSelf = self;
[UIView performWithoutAnimation:^{
BOOL resumeResponder = NO;
if([[weakSelf textEntryField] isFirstResponder]) {
resumeResponder = YES;
[[weakSelf textEntryField] resignFirstResponder];
}
[[weakSelf textEntryField] setSecureTextEntry:secureTextEntry];
if(resumeResponder) {
[[weakSelf textEntryField] becomeFirstResponder];
}
}];
}
PS: This isn't a Swift bug. It's a UIKit bug. I had the same issue with Objective-C.
I had a weird case of fonts changing its size and font type, when secureTextEntry for an UiTextField was toggled by using a button action.
Had to explicitly manage font for the UiTextField by using these lines of code:
password.font = UIFont(name: "systemFont", size: 14)
password.font = UIFont.systemFontOfSize(14)
Complete Code used in the Show Password Button:
//Function associated with the button for show password option
#IBAction func switchShowPasswordAction(sender: AnyObject) {
if showPassword{
showPassword = false
password.secureTextEntry = !showPassword
}else{
showPassword = true
password.secureTextEntry = !showPassword
}
//Changing font fix
password.font = UIFont(name: "systemFont", size: 14)
password.font = UIFont.systemFontOfSize(14)
}
Post applying this change:
Since I used custom fonts we need to preserve the original font. Create an extension to UITextField:
extension UITextField {
func enablePasswordModeWithShowHide() {
secureTextEntry = false
let showButton = UIButton(type: UIButtonType.System)
showButton.setTitle("HIDE", forState: .Normal)
showButton.titleLabel?.textAlignment = .Right
showButton.sizeToFit()
rightView = showButton
rightViewMode = .Always
showButton.addTarget(self, action: "handleShowHideTapped", forControlEvents: .TouchUpInside)
showButton.tintColor = UIColor.blackColor()
}
func handleShowHideTapped() {
secureTextEntry = !secureTextEntry
let font = self.font
self.font = nil
self.font = font
if let oldText = text {
text = "";
text = oldText;
}
if let button = rightView as? UIButton {
button.setTitle(secureTextEntry ? "SHOW" : "HIDE", forState: .Normal)
button.sizeToFit()
}
}
}
Where it could be implemented like this:
passwordTextField.enablePasswordModeWithShowHide()
All of these answers pretty much work, but I had to use a different solution to achieve the results I needed, considering I'm using a custom font.
You need to make the text field attributed in the storyboard inspector pane for the UITextField, as follows:
Then, in code, you need to manage the toggling of the visibility, setting the attributed text each time, to ensure its properly formatted. I also resignFirstResponder() on the field just to take care of some positioning glitch that I still haven't figured out yet.
func toggleShowPass() {
self.showing = !showing
txtpassword.secureTextEntry = !showing
textFieldPassword.resignFirstResponder()
let string = textFieldPassword.text!
let attrString = NSMutableAttributedString(string: string)
textFieldPassword.addAttribute(NSFontAttributeName, value: UIFont(name: "AvenirNext-Regular", size: 16.0)!, range: NSMakeRange(0, string.characters.count))
textFieldPassword.attributedText = attrString
}
Set defaultTextAttributes with custom font attribute after toggling the secureTextEntry flag
NSDictionary *attrsDictionary =
#{ NSFontAttributeName://customfont};
_passwordtextfield.defaultTextAttributes = attrsDictionary;
I had to apply the following solution with latest Xcode 7.1.1 which actually worked in my case I suspect this issue is of framework.
- (IBAction)btnPasswordShowAction:(id)sender {
self.txtPassword.secureTextEntry = !self.txtPassword.secureTextEntry;
NSString *tmpString = self.txtPassword.text;
self.txtPassword.text = #" ";
self.txtPassword.text = tmpString;
[self.txtPassword setFont:nil];
self.txtPassword.font = [UIFont fontWithName:#"OpenSans-Regular" size:16.0];
}
#pragma mark - Textfield Delegate Methods
- (void)textFieldDidBeginEditing:(UITextField *)textField
{
[self.txtPassword setFont:nil];
self.txtPassword.font = [UIFont fontWithName:#"OpenSans-Regular" size:16.0];
}
- (BOOL)textFieldShouldEndEditing:(UITextField *)textField
{
[self.txtPassword setFont:nil];
self.txtPassword.font = [UIFont fontWithName:#"OpenSans-Regular" size:16.0];
return YES;
}

Change Color of MPVolumeView Route Button iOS 7

I am designing a Music app for iOS 7 and I want to put the "AirPlay" route selector button directly in my app. I am able to get the button placed just fine, however it doesn't show up because the icon is white and my background is white.
Is there a way to change the color of the Route Button?
Here is the code I'm using to create the button.
self.airPlayButton = [[MPVolumeView alloc] initWithFrame:CGRectZero];
self.airPlayButton.showsVolumeSlider = NO;
[self.airPlayButton sizeToFit];
self.airPlayButton.backgroundColor = [UIColor myGreenColor];
[self addSubview:self.airPlayButton];
Basically the picture below is what I want, except I want the icon green instead of just it's background.
in reviewing Adams answer I like more clarity in that task. So I safe-guarded that code a bit:
Objective-C:
for( UIView *wnd in volumeView.subviews ) {
if( [wnd isKindOfClass:[UIButton class] ]) {
UIButton *button = (UIButton*) wnd;
UIImage *img = button.currentImage;
UIImage *img2 = [img imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[volumeView setRouteButtonImage: img2 forState:UIControlStateNormal];
break;
}
}
Swift:
for view in volumeView.subviews {
if view.isKindOfClass(UIButton) {
let buttonOnVolumeView : UIButton = view as! UIButton
volumeView.setRouteButtonImage(buttonOnVolumeView.currentImage?.imageWithRenderingMode(.AlwaysTemplate), forState: .Normal)
break;
}
}
Now it reacts on the tintColor property of volumeView and if Apple decides to add another button or change the sequence this code will still work.
To expand on lanbo's answer, you can also get the original image of the Route Button and create a copy that uses the UIImageRenderingMode.AlwaysTemplate rendering mode. That way it heeds the current tintColor.
In Swift:
let volumeView = MPVolumeView()
if let routeButton = volumeView.subviews.last as? UIButton,
let routeButtonTemplateImage = routeButton.currentImage?.imageWithRenderingMode(.AlwaysTemplate)
{
volumeView.setRouteButtonImage(routeButtonTemplateImage, forState: .Normal)
}
Create your own image and Try
setRouteButtonImage:forState:
Assigns a button image to the specified control states.
- (void)setRouteButtonImage:(UIImage *)image forState:(UIControlState)state
Parameters
image - The image to associate with the specified states.
state - The control state with which to associate the image.
Discussion
Use this to customize the appearance of the route button when it is enabled, disabled, highlighted, and so on.
Available in iOS 6.0 and later.

Adding the "Clear" Button to an iPhone UITextField

How do you add that little "X" button on the right side of a UITextField that clears the text? I can't find an attribute for adding this sub-control in Interface Builder in the iPhone OS 2.2 SDK.
Note: In Xcode 4.x and later (iPhone 3.0 SDK and later), you can do this in Interface Builder.
This button is a built-in overlay that is provided by the UITextField class, but as of the iOS 2.2 SDK, there isn't any way to set it via Interface Builder. You have to enable it programmatically.
Add this line of code somewhere (viewDidLoad, for example):
Objective-C
myUITextField.clearButtonMode = UITextFieldViewModeWhileEditing;
Swift 5.0
myUITextField.clearButtonMode = .whileEditing
You can also set this directly from Interface Builder under the Attributes Inspector.
Taken from XCode 5.1
Swift 4+:
textField.clearButtonMode = UITextField.ViewMode.whileEditing
or even shorter:
textField.clearButtonMode = .whileEditing
you can add custom clear button and control the size and every thing using this:
UIButton *clearButton = [UIButton buttonWithType:UIButtonTypeCustom];
[clearButton setImage:img forState:UIControlStateNormal];
[clearButton setFrame:frame];
[clearButton addTarget:self action:#selector(clearTextField:) forControlEvents:UIControlEventTouchUpInside];
textField.rightViewMode = UITextFieldViewModeAlways; //can be changed to UITextFieldViewModeNever, UITextFieldViewModeWhileEditing, UITextFieldViewModeUnlessEditing
[textField setRightView:clearButton];
Swift 4 (adapted from Kristopher Johnson's answer)
textfield.clearButtonMode = .always
textfield.clearButtonMode = .whileEditing
textfield.clearButtonMode = .unlessEditing
textfield.clearButtonMode = .never
Objective C :
self.txtUserNameTextfield.myUITextField.clearButtonMode = UITextFieldViewModeWhileEditing;
Swift :
txtUserNameTextfield.clearButtonMode = UITextField.ViewMode.WhileEditing;
this don't work, do like me:
swift:
customTextField.clearButtonMode = UITextField.ViewMode.Always
customTextField.clearsOnBeginEditing = true;
func textFieldShouldClear(textField: UITextField) -> Bool {
return true
}
On Xcode 8 (8A218a):
Swift:
textField.clearButtonMode = UITextField.ViewMode.whileEditing;
The "W" went from capital to non-cap "w".
func clear_btn(box_is : UITextField){
box_is.clearButtonMode = .always
if let clearButton = box_is.value(forKey: "_clearButton") as? UIButton {
let templateImage = clearButton.imageView?.image?.withRenderingMode(.alwaysTemplate)
clearButton.setImage(templateImage, for: .normal)
clearButton.setImage(templateImage, for: .highlighted)
clearButton.tintColor = .white
}
}
Use below lines of code. If rightView is there clear button is not showing.
self.txtField.rightView = nil
self.txtField.rightViewMode = .never
self.txtField.clearButtonMode = UITextField.ViewMode.always
On Xcode Version 8.1 (8B62) it can be done directly in Attributes Inspector. Select the textField and then choose the appropriate option from Clear Button drop down box, which is located in Attributes Inspector.

Resources