I have an UIButton and an UIView where i want to remove bottom border for the button and top border for the view. The image below show an UIButton. When I press this UIButton the UIView will be added as subview (like a dropdown menu), But I want the button and the view merge with each other so it will look like on "box".
I know how to set border width and color:
self.layer.borderWidth = 1
self.layer.borderColor = UIColor(CGColor: "#616366".CGColor).CGColor
But I don't know if it is possible to remove on border line. Hope you guys can help - Thank you
The easiest way is going to be to change your layout a little bit so that rather than adding the UIView as a subview of the UIButton you add them both as siblings to a container view, and draw the border on the container view.
Kind of like this:
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 44))
button.setTitle("Button", forState: .Normal)
button.titleLabel?.textColor = UIColor.blackColor()
let container = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 44))
container.addSubview(button)
container.frame = button.frame
container.backgroundColor = UIColor.whiteColor()
container.layer.borderWidth = 5
container.layer.borderColor = UIColor.blackColor().CGColor
let added = UIView(frame:CGRect(x: 0, y: 44, width: 100, height: 200))
added.backgroundColor = UIColor.blueColor()
container.addSubview(added)
container.frame.size.height += added.frame.size.height
XCPlaygroundPage.currentPage.liveView = container
Related
I just started an app for iOS in Swift, I'm doing the design programmatically (I mean I'm not using storyboard)
I have a UIButton with an image inside, I would like the image to fill the entire button. Right now it just show the image in my button, but smaller than the button, center in top of the button frame.
My code is :
let buttonLocation = UIButton(frame: CGRect(x: 0, y: 0, width: buttonRoundedSize, height: buttonRoundedSize))
buttonLocation.setImage(UIImage(named: "locate_button"), for: .normal)
buttonLocation.backgroundColor = .white
buttonLocation.layer.cornerRadius = frame.width / 2
buttonLocation.myExtension()
Here are the things I've tried (none of theses worked) :
self.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
self.autoresizingMask = .flexibleWidth
self.autoresizingMask = .flexibleHeight
self.imageView?.contentMode = .scaleAspectFill
If I just put the contentMode line it doesn't work either. The imageView doesn't return nil i've checked..
Thanks!
Set the contentMode of buttonLocation's imageView as scaleAspectFill or scaleToFill to cover the entire frame of button.
let buttonLocation = UIButton(frame: CGRect(x: 0, y: 0, width: 200, height: 500))
buttonLocation.setImage(UIImage(named: "image"), for: .normal)
buttonLocation.backgroundColor = .gray
buttonLocation.layer.cornerRadius = buttonLocation.frame.width / 2
buttonLocation.imageView?.contentMode = .scaleAspectFill //Here........
Example:
Try using below code and remove other properties which are being set for this button :
let buttonLocation = UIButton(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
buttonLocation.setImage(UIImage(named: "cat"), for: .normal)
buttonLocation.backgroundColor = .white
buttonLocation.layer.cornerRadius = 50
buttonLocation.imageView?.contentMode = .scaleAspectFill
buttonLocation.clipsToBounds = true
self.view.addSubview(buttonLocation)
Here make sure that the image which you are setting in the button is larger than the frame of the button. You can change frame and corner radius values in the above code. I just tried with the above code and getting below output.
You can comment if this is not your expected output.
Hope this helps.
Answer on your question: https://stackoverflow.com/a/26263623/3047318
TLDR: set contentMode in viewDidLoad
you need to use setBackgroundImage property instead of setImage.
buttonLocation.setBackgroundImage(UIImage(named: "locate_button"), for: .normal)
Maybe this can help you:
let buttonLocation = UIButton(type: .custom)
buttonLocation.frame = CGRect(x: 0, y: 0, width: buttonRoundedSize, height: buttonRoundedSize)
buttonLocation.setImage(UIImage(named: "locate_button"), for: .normal)
buttonLocation.imageView?.contentMode = .scaleAspectFill
buttonLocation.contentHorizontalAlignment = .fill
buttonLocation.contentVerticalAlignment = .fill
buttonLocation.backgroundColor = .white
buttonLocation.layer.cornerRadius = frame.width / 2
buttonLocation.clipsToBounds = true
You need to add contentHorizontalAlignment and contentVerticalAlignment properties and don't forget set clipsToBounds to true to see the corner raius effect.
I want to set the Leftview to the TextField. But I want to align it to the bottom of the Textfield. So that the leftview frame looks align to the TextField actual text. But I am not getting any luck.
here is how I am trying with it.
let btnSelectCountry = UIButton()
btnSelectCountry.setTitle(title, for: UIControlState.normal)
btnSelectCountry.titleEdgeInsets = UIEdgeInsetsMake(0, 0, -10, 0)
btnSelectCountry.backgroundColor = CommonUtils.hexStringToUIColor(hex: "#000000")
btnSelectCountry.frame = CGRect(x: 0, y: CGFloat(0), width: CGFloat(70), height: CGFloat(25))
btnSelectCountry.addTarget(self, action: #selector(self.selectCountryCallingCode), for: .touchUpInside)
etPhoneNum.leftView = btnSelectCountry
etPhoneNum.leftViewMode = .always
etPhoneNum.leftViewRect(forBounds: CGRect(x: 0, y: CGFloat(-100), width: CGFloat(70), height: CGFloat(25)))
But it is showing vertically aligned in the TextField. How can I move LeftView to bottom inside the TextField??
func setTextLeftView(){
txtField.leftView = UIImageView.init(image: image)
txtField.leftView?.frame = CGRect(x: 0, y: 5, width: 20 , height:20)
txtField.leftViewMode = .always
}
try this and if it does't work for you then let me know if would like to solve your problem :)
I set a button to right side of navigation bar:
I want to set a burger icon,red cycle and a label to this button. like this:
my code:
self.navigationController?.navigationBar.barTintColor = self.utilities.hexStringToUIColor(hex: "#00b8de")
var imageview2 = UIImage(named: "menulogo")
imageview2 = imageview2?.imageResize(sizeChange: CGSize(width: 25, height: 25))
btnMenu.setImage(imageview2,for:UIControlState.normal)
btnMenu.setTitle("", for: .normal)
// setup the red circle UIView
let redCircleView = UIView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
redCircleView.backgroundColor = UIColor.red
redCircleView.layer.cornerRadius = view.frame.size.width / 2
// setup the number UILabel
let label = UILabel(frame: CGRect(x: 30, y: 0, width: 20, height: 20))
label.textColor = UIColor.white
label.font = UIFont.systemFont(ofSize: 10)
label.text = "16"
// adding the label into the red circle
redCircleView.addSubview(label)
// adding the red circle into the menu button
btnMenu.addSubview(redCircleView)
with above codes I have three problems:
my burger image isn't in most right side of navigation.
my cycle view doesn't show
my icon is white, but it shows blue!
How do I add Text and Image on right of the UITextField.
I have a UITextField which will initially have a text/label at right of it and when user click on the button the same textField will now have text + image to the right of UITextField
Image can be added like this but what about the text/label and both ?
txtField.rightViewMode = .always
txtField.rightView = UIImageView(image: UIImage(named: "selectdrop"))
For that you can create on UIView instance and add the UILabel and UIImageView inside it then finally set that view as rightView of textField. Some thing like below.
let rightView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 40))
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 60, height: 40))
label.text = "Text"
label.textColor = UIColor.red
label.textAlignment = .center
let imageView = UIImageView(frame: CGRect(x: 40, y: 0, width: 40, height: 40))
imageView.image = UIImage(named: "selectdrop")
rightView.addSubview(label)
rightView.addSubview(imageView)
txtField.rightView = rightView
txtField.rightViewMode = .always
I'm trying to change the selection area of a UIBarButtonItem within the navigation controller. Basically I'm trying to change the allowable area that will make that UIBarButtonItem selectable. Right now, the size of my UIBarButtonItem is 40x40, but I can easily select it even if my finger is not touching the button at all.
Here's to illustrate what I mean:
The green represents the size of the UIBarButtonItem. The red represents the allowable area that makes the UIBarButtonItem selectable.
How can I change the width of the red area?
Here's a snippet of code if helpful:
changeMuscleMap = UIButton(frame: CGRect(x: 0, y: 0, width: 40, height: 40) )
changeMuscleMap.setImage(UIImage(named: "change"), forState: .Normal)
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: changeMuscleMap)
Thanks!
If you want larger click area than required, try the below code, then making a UIBarButtonItem With custom button:
#implementation CustomButton
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event
{
UIEdgeInsets extendTouchInsets = UIEdgeInsetsMake(20, 0, 20, 0);
CGRect bounds = self.bounds;
bounds.origin.x -= extendTouchInsets.left;
bounds.origin.y -= extendTouchInsets.top;
bounds.size.width += extendTouchInsets.left + extendTouchInsets.right;
bounds.size.height += extendTouchInsets.top + extendTouchInsets.bottom;
return CGRectContainsPoint(bounds, point);
}
#end
You can use the following code to increase or decrease UIBarButtonItem button width.
changeMuscleMap = UIButton(frame: CGRect(x: 0, y: 0, width: 120, height: 40) )
changeMuscleMap.setImage(UIImage(named: "change"), forState: .Normal)
changeMuscleMap.contentHorizontalAlignment = .left
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: changeMuscleMap)
It can be achieved by making a UIBarButtonItem with custom item as UIImageView instead of UIButton. Try the below code. I hope this will solve it now.
changeMuscleMap = UIImageView(image:UIImage(named: "change"))
imageView.frame = CGRectMake(0, 0, 40, 40)
let leftBarBtn = UIBarButtonItem(customView: imageView)
self.navigationItem.leftBarButtonItem = leftBarBtn
I was able to achieve what I wanted by using #Damien Romito's provided answer here:
UINavigationBar UIBarButtonItems much larger click area than required
Updated for Swift 3.0:
let buttonContainer: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 27, height: 30) )
let barButton: UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30) )
buttonContainer.addSubview(barButton)
barButton = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
barButton(#imageLiteral(resourceName: "image"), for: UIControlState.normal)
self.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: buttonContainer)
barButton(self, action: #selector(ViewController.doSomething), for: UIControlEvents.touchUpInside)