Swift: remove background color when button clicked - ios

I created a button and when it is clicked, it's background image changes. However the issue is when I click it , it gives a rectangle with a color.
Image:
Should Be:
I don't want to see that clicking background.
My codes are below:
let on = UIImage(named: "on") as UIImage
let off = UIImage(named: "off") as UIImage
btn.setBackgroundImage(off, forState: .Normal)

When you use Storyboard buttons which is IBOutlet UIButton object. By default it is not set as a custom type. So if you set background of this button as an image, It shows border of that button with the image.
For Storyboard variables:
Select UIButton control in Storyboard. Go to Attribute Inspector > Change type System to Custom
See the reference images
For programmatically created buttons:
If you create UIButton object programmatically than set button type as UIButtonTypeCustom.
Objective C Code:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
Swift Code:
var button = UIButton.buttonWithType(UIButtonType.Custom) as UIButton

just use this
btn.setBackgroundImage(nil, forState: .Normal)

Related

Insert Icon in Navigation Bar / make BarButtonItem not clickable Swift iOS

I would like to place a bluetooth icon in my Navigation Bar, to display a connected / disconnected status.
I tried to add a BarButtonItem, set the image as my bluetooth icon, and disabled and enabled this Button. This works fine so far, and is looking ok to me, but I don't want to have this button clickable, so that it doesn't change the color on clicking on the icon.
Is this possible, or is there a way to put a UIImageView into the Navigation Bar?
Thanks!
Try disabling touch events using:
myBarButtonItem.isUserInteractionEnabled = false
navigationItem.rightBarButtonItem?.isEnabled = false
Add following code will fix your issue.
let btnBluetooth = UIButton()
btnBluetooth.setImage(#imageLiteral(resourceName: "icon_bluetooth"), for: .normal)
btnBluetooth.setImage(#imageLiteral(resourceName: "icon_bluetooth"), for: .highlighted)
btnBluetooth.tintColor = .red
let barButton = UIBarButtonItem(customView: btnBluetooth)
self.navigationItem.rightBarButtonItem = barButton
This code will add custom button where you can manage image for normal and highlight mode. For bluetooth state management, change tintColor of UIButton which you have added in UIBarButtonItem as custom view.
If you click on button, this will not change color of image.
If you don't want to add UIButton you can add UIImageView by following code.
let imgBluetooth = UIImageView(image: #imageLiteral(resourceName: "icon_bluetooth"))
imgBluetooth.tintColor = .red
let barButton = UIBarButtonItem(customView: imgBluetooth)
self.navigationItem.rightBarButtonItem = barButton
Also, make sure you have selected Render As as Template Image for your bluetooth icon which is added inside Assets.xcassets to affect tintColor. Otherwise image will be display as original. See follow:

Cann't I set title and Image to the right bar item on navigation bar at the same time in storyboard?

I want to set the right button item to be this:
It has the title and the down image.
But in storyboard, I can not do that:
I only can set one of the title and image, if I set image, I can not set the title, if I set the title, I can not set the image.
I have tried use the UIButton and the Button Bar Item to do it, get the same result.
Some friend know how to do with that?
You can simply add drag UIButton to rightBarItem in storyBoard . and customise that button as per your needs ..
Check View hierarchy after adding UIButton .
you can try this add the custom view to your bar button item
var RightView = UIView(frame: CGRectMake(0, 0, 100, 44))
// you can add in RightView, your title in uilable and your image in imageview
var RightBarButton = UIBarButtonItem(customView: RightView)
self.navigationItem.rightBarButtonItem = RightBarButton

Make UIButton both image and text tappable

I have a UIButton with text and an image that looks like this:
But when I click the button it goes like this (just the image is selected instead of both the image and the text, I want button text also be selected.
How can I fix it?
Yes, you can set this color in your xib (interface builder) also, just select your button and inside State config select Highlighted and then set the textColor for that state. Check image for reference.
Objective-C
Use [UIButton setTitleColor:forState:] API
[yourButton setTitleColor:[UIColor grayColor] forState: UIControlStateHighlighted];
Swift
yourButton.setTitleColor(UIColor.grayColor(), forState: .Highlighted)

Make selected button titlelabel to be uppercase

I have button with title "Button". After some actions this button gets "selected" status. While it is selected it have different text color that is easy to specify in interface builder.
The problem is that I also want set it's title to be uppercase. Which I don't know how.
You can set Title for Selected State of UIButton from Attribute Inspector.
Please find below image :
You can also set it programatically.
Objective-C
[btn setTitle:btn.titleLabel.text.uppercaseString forState:UIControlStateSelected];
Swift
btn.setTitle(btn.titleLabel!.text.uppercaseString, forState: .Selected)
There is a built in function for that
Button.capitalizedString
So you can use it in this way in swift
Let me assume that abtn is your IBOutlet of UIButton and Button is titlelabel of UIButton.
abtn.setTitle(abtn.titleLabel!.text.uppercaseString, forState: .Selected)
as said by kirsteins
To capitalize only the first letter you can use:
nameOfString.replaceRange(nameOfString.startIndex...nameOfString.startIndex, with: String(nameOfString[nameOfString.startIndex]).capitalizedString)
If you are setting it from code use
var myString = "string"
myString = myString.uppercaseString
button.setTitle(myString, forState: .Selected)

Custom right side navigation bar button

I added a right bar button to the tableView in the storyboard, created an IB action which opens another window. Everything works fine. But now I want to use a custom Image for that button. I found this:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:infoIconImage forState:UIControlStateNormal];
Which I guess with a few extra lines of code will do the job,
but I can't seem to understand what name that button has in the code. How I relate that button from the storyboard to the code.
Beginner question, sorry.
Create an IBOutlet just like you linked your action from your storyboard to your .h file. Name it button, and you're good to go !
BTW, you can set "standard" images in your storyboard : select the button, go to the Attribute Inspector in the Utilities bar of Xcode (right bar), and change the Identifier !
Edit :
Have a look over there to use your own image :
Customize UIBarButtonItem
The part about the UIBarButtonItem is near the end of the article.
OK, I found there is a property customView. SO here it is:
// Set the custom back button
UIImage *infoIconImage = [UIImage imageNamed:#"info-button.png"];
//create the button and assign the image
UIButton *iButton = [UIButton buttonWithType:UIButtonTypeCustom];
[iButton setImage:infoIconImage forState:UIControlStateNormal];
//set the frame of the button to the size of the image
iButton.frame = CGRectMake(0, 0, infoIconImage.size.width, infoIconImage.size.height);
//assigning customized button
infoButton.customView = iButton;

Resources