I have a UIButton and I wanna add a circle shape in the middle of it.
how can I do that?
Here's what I want to achieve.
Thanks/
Insert a subview in your button
let circleFrame = CGRect(x: 0, y: 0, width: circleDimension, height: circleDimension)
let circle = UIView(frame: circleFrame)
circle.backgroundColor = UIColor.clear
circle.layer.borderWidth = circleWidth
circle.layer.borderColor = UIColor.white.cgColor
circle.layer.cornerRadius = circleDimension/2
Just add that as a subview to your button and set centerX and centerY anchors equal to your button. Then, if you want to make it square, just do
circle.layer.cornerRadius = 0
There are many ways to do this including using CoreGraphics. The easiest way is to just set an image on the button
How to set image of UIButton in Swift 3?
If you need it clickable ofcourse, otherwise just use a UIImageView(which you can also make clickable using UITapGestureRecognizer)
Related
I'm trying to create a UIView that has a border color / width, add a subview UIImageView that has a different border color / width, and also has an image inside of all that. So essentially what I want is an image with a white border followed by a blue border.
Right now I'm only seeing the blue border show up. Here is what I am doing:
(Inside of a closure, where outerView is a UIView)
outerView.frame = cell.frame
outerView.layer.borderColor = UIColor.blue.cgColor
outerView.layer.borderWidth = 3.0
outerView.layer.cornerRadius = outerView.frame.height / 2
outerView.clipsToBounds = true
outerView.backgroundColor = UIColor.clear
let imageView = UIImageView(frame: outerView.frame)
imageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self?.controller?.setupImageView(imageView, cell: cell)
outerView.addSubview(imageView)
(setupImageView:)
let frame = imageView.frame
imageView.image = imageConstants.imageToDisplay
imageView.clipsToBounds = true
imageView.layer.cornerRadius = frame.height / 2
imageView.layer.borderWidth = 3.0
imageView.layer.borderColor = UIColor.white.cgColor
If I change it up so the closure just returns me a UIImageView type (outerView is a UIImageView) and pass that straight into the setupImageView(imageView:cell:) function, I'm able to see the image along with a white border.
I'm not sure what I'm missing in order to get both to display.
Thank you in advance!
outerView and your imageView have the same frame (This mean they have the same height and the same width) the imageView's border is under the outherView's border.
Try this:
let outerFrame = outerView.frame
let frame = CGRect(x: outerFrame.origin.x - 3, y: outerFrame.origin.y - 3, width: outerFrame.size.width -6, height: outerFrame.size.height -6)
3 because borderWidth = 3.0
and:
let imageView = UIImageView(frame: frame)
I'm trying to add corner radius + dropdown shadow to my UICollectionView Cell,
my Cell sturcuture is like this:
I added view to add shadow on it, and try to add corner radius to the to subviews: the white one and the imageview, I used the following code:
let frame = CGRect(x:0, y: 0, width: UIScreen.main.bounds.width, height: 80)
shadowingViewOutlet.layer.masksToBounds = false
shadowingViewOutlet.layer.shadowColor = UIColor.black.cgColor
shadowingViewOutlet.layer.shadowOffset = CGSize(width: CGFloat(0.0), height: CGFloat(3.0))
shadowingViewOutlet.layer.shadowOpacity = 0.5
if shadowingViewOutlet.layer.shadowPath != nil {
shadowingViewOutlet.layer.shadowPath = UIBezierPath(roundedRect:frame, cornerRadius:3).cgPath
}
but that dosen't work fine!
Anyone try to apply the same functionlaity to UICollectionViewCell and have a result in it?
please help.
Thanks.
I want to create a circle which contains text in its center which is aligned horizontally in its View Controller. Something similar like this:
I'm not sure how to go about doing this. I would expect to create a custom UIView which contains a subview of a rounded CGRect and also a subview of a TextView although I'm not sure this is the more efficient way forward. Would this way forward be considered best practice and how would I implement it in Swift? Thanks.
You can achieve this with a simple UILabel!
let diameter = 50
var label = UILabel(frame: CGRect(x: 0, y: 0, width: diameter, height:diameter))
label.text = "Hello World"
label.textAlignment = .Center
label.backgroundColor = UIColor.redColor()
// The magic to create a circle
label.layer.cornerRadius = diameter / 2.0
label.clipsToBounds = true
Problem visually:
I have tried putting the image in the center of its own frame with no luck. I have also tried to center it with playing the x of the CGRect with no luck either. I presume I can just put an empty icon with the same background as the navigation bar; however, I don't want to do it that way. I might have 2-3 icons on the right; then what?
let image = UIImage(named: "some_logo")!
let imageSize = CGSizeMake(60, 42)
let marginX: CGFloat = (self.navigationController!.navigationBar.frame.size.width / 2) - (imageSize.width / 2)
let imageView = UIImageView(frame: CGRect(x: marginX, y: 0, width: imageSize.width, height: imageSize.height))
imageView.image = image
imageView.contentMode = .ScaleAspectFit
self.navigationItem.titleView = imageView
I prefer swift but obj-c solutions are welcomed as well.
Any pointers appreciated.
This app has nothing to do with KIA, it is just some logo I got off the google search, searching "some logo".
I have faced the same issue. Then i tried one code shown below.
override func viewDidAppear(animated: Bool) {
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 150, height: 40))
imageView.contentMode = .ScaleAspectFit
let image = UIImage(named: "googlePlus")
imageView.image = image
navigationItem.titleView = imageView
}
This Code working fine when i tested with Left & Right Bar Button.
But in my previous code there is no Right Bar Button.
So the image is moving towards right.
For solving this i created a Right Bar Button & change the Tint color to clear color.
So everything seems to be working fine. This is one Temporary Solution for your problem.
The easiest way of doing this is in Interface Builder.
Simply drag a 'NavigationItem' from the object library and place it into your ViewController, then place a UIView where the title goes (ensure you set the background to 'clear')
Then place a UIImageView into that view and set the image in the Attributes Inspector to your required image. Scale your UIImage accordingly and set your your constraints accordingly.
I created an extension for solving this problem using the hint of #idrougge.
In order to center the title view image no matter what buttons you have, a content view is set as title view, then the image view is added as child of the content view. Finally, using constraints the image view is aligned inside its parent (content view).
import UIKit
extension UIViewController {
func addLogoToNavigationBarItem() {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.heightAnchor.constraint(equalToConstant: <your_height>).isActive = true
imageView.contentMode = .scaleAspectFit
imageView.image = <your_image>
//imageView.backgroundColor = .lightGray
// In order to center the title view image no matter what buttons there are, do not set the
// image view as title view, because it doesn't work. If there is only one button, the image
// will not be aligned. Instead, a content view is set as title view, then the image view is
// added as child of the content view. Finally, using constraints the image view is aligned
// inside its parent.
let contentView = UIView()
self.navigationItem.titleView = contentView
self.navigationItem.titleView?.addSubview(imageView)
imageView.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true
imageView.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
}
}
I hope this helps someone,
Xavi
As question heading stated "Swift / Obj-C" so I am sharing code of Obj-C :
UIImageView *titleImage = (UIImageView *)self.navigationItem.titleView;
titleImage = [[UIImageView alloc]initWithFrame:CGRectMake((self.navigationController.navigationBar.frame.size.width/2) - (100/2), 0, 100,self.navigationController.navigationBar.frame.size.height)];
//setting the image for UIImageView
titleImage.image = [UIImage imageNamed:#"someLogo"];
titleImage.contentMode = UIViewContentModeCenter;
self.navigationItem.titleView = titleImage;
Had same issue on phones with smaller sizes. Image in title was moving to right. Causing this issue back button -> [back_button][title_view]. Its centered when there is no back button or there is right bar button. Richard Hope's was right, you just need to put UIView first, and then put UIImageView as subview. Programmatically could be done like this.
private var imageView: UIView {
let bannerWidth = navigationBar.frame.size.width * 0.5 // 0.5 its multiplier to get correct image width
let bannerHeight = navigationBar.frame.size.height
let view = UIView()
view.backgroundColor = .clear
view.frame = CGRect(x: 0, y: 0, width: bannerWidth, height: bannerHeight)
let image = UIImage(named: "your_image_name")
let imageView = UIImageView(image: image)
imageView.contentMode = .scaleAspectFit
imageView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)
view.addSubview(imageView)
return view
}
The just change titleView
navigationItem.titleView = imageView
What about setting the center of your image equals to the navigationBar.center instead of setting a margin?
//assuming we already have our navigationController
let myNicelLogoWidth = 100
let myNiceLogoHeight = 50
//start positioning your logo at 0.0, 0.0
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: myNicelLogoWidth, height: myNiceLogoHeight))
imageView.contentMode = .scaleAspectFit
imageView.center = navigationBar.center //the put your image at the center
let image = UIImage(named: "myNiceLogoImage")
imageView.image = image
navigationItem.titleView = imageView
I once face with this problem, and finally i found out that the problem is the previous navigation bar title still located next to burger button, but it's invisible.
Fast solution but not sure if it's the best is to change the previous navigation bar title to empty string before show the next view controller.
Hope it's help.
Is there a way to adjust the position of a rightView on UITextField? I tried setting the frame on the view (set as rightView) but it didn't change anything.
I'd like to avoid making two views, one as the rightView and one as the rightView's subview where I change the subview's position, if possible.
The right overlay view is placed in the rectangle returned by the rightViewRectForBounds: method of the receiver.
So I suggest you subclass UITextField and override this method, something like this:
#interface CustomTextField: UITextField
#end
#implementation CustomTextField
// override rightViewRectForBounds method:
- (CGRect)rightViewRectForBounds:(CGRect)bounds{
CGRect rightBounds = CGRectMake(bounds.origin.x + 10, 0, 30, 44);
return rightBounds ;
}
#Puneet Sharma's answer was great but that would give the need to create a class that would subclass UITextField, what I did instead was create a UIView that would act as a padding.
This code works without the need to subclass
Here's my code, although it's written in Swift 3
// this is the view I want to see on the rightView
let checkImageView = UIImageView(image: UIImage(named: "check24.png"))
checkImageView.frame = CGRect(x: 0, y: 0, width: 24, height: 24)
checkImageView.curveEdges(12)
checkImageView.contentMode = .scaleAspectFit
// declare how much padding I want to have
let padding: CGFloat = 6
// create the view that would act as the padding
let rightView = UIView(frame: CGRect(
x: 0, y: 0, // keep this as 0, 0
width: checkImageView.frame.width + padding, // add the padding
height: checkImageView.frame.height))
rightView.addSubview(checkImageView)
// set the rightView UIView as the textField's rightView
self.textField.rightViewMode = .whileEditing
self.textField.rightView = rightView
What happened here is, that the rightView which is a UIView that has a transparent colored background which then gave the illusion that there is a padding whereas there is not.
Right Padding you can use as
let imageview = UIImageView(image: UIImage(named: "image name"))
imageview.contentMode = .center
let rightPadding: CGFloat = 14 //--- change right padding
imageview.frame = CGRect(x: 0, y: 0, width: imageview.frame.size.width + rightPadding , height:imageview.frame.size.height)
textField.rightViewMode = .always
textFieldd.rightView = imageview