How to make UIButton a circle? - ios

I have been trying to make the UIButton in the cells a perfect circle. Unfortunately the circle has been formed based on the background image rather than the UIButton frame.
The code I have for creating a circle:
cell.StoryViewButton.setImage(image, forState: .Normal)
cell.StoryViewButton.frame = CGRectMake(50, 8, 100, 100)
cell.StoryViewButton.layer.masksToBounds = false
cell.StoryViewButton.layer.cornerRadius = cell.StoryViewButton.frame.width/2
cell.StoryViewButton.clipsToBounds = true
The output looks like this:
What can I do to get the perfect circle button frames that I want?

Try something like this
cell.StoryViewButton.layer.masksToBounds = true
cell.StoryViewButton.layer.cornerRadius = cell.StoryViewButton.frame.width/2
If you need to create a circle of view you have to set masksToBounds to true, do not set clipsToBounds
Hope this will help you.

Swift 4
You could apply the following function to any view, including buttons.
func makeViewCircular(view: UIView) {
view.layer.cornerRadius = view.bounds.size.width / 2.0
view.clipsToBounds = true
}
Great.
That didn't work for me at first as I applied it in the viewDidLoad, though. At this point, constraints are still playing with the size of your buttons and the corner radius is applied to a button it thinks is twice the size, resulting in the odd shapes you have. To apply the right values to the right measurements, place the code in override func viewDidLayoutSubviews().
I know this may be a more specific case within my personal process, yet I'm sure it'll help somebody.

There is the working code.I test it. Hope it helps.
I am not sure why but I check that by changing height and width of the frame in here "CGRectMake(50, 8, 120, 120)" that the height and width of the frame and height and width of a button should be same to get the perfect circle.
cell.StoryViewButton.setImage(image, forState: .Normal)
cell.StoryViewButton.frame = CGRectMake(50, 8, 120, 120)
cell.StoryViewButton.layer.cornerRadius = self.btn.frame.width/2;
cell.StoryViewButton.layer.masksToBounds = true
Hope it helps.

Related

Gap between overlaying views in swift

I was wondering how I can get a gap between overlaying views in swift. This is really hard for me to explain so I added a couple images to explain what I'm talking about This is the effect in iMessage The same effect in Facebook Messenger And again in facebook messenger. I am talking about the little gap of space in between the view that says the number of minutes and the profile image (in the 3rd image). I was wondering how I could achieve the same thing in Swift because I'd like to integrate this into my app. Thank you so much!
You can do this many ways.
One of the way, I am posting.
One View, UIView, that should be Square. Inside that, One UIImageView and One SmallView
Constraints as follows:
OuterView: width & height be 120, top 50, and Center Horizontally
ImageView = { 4,4,4,4 },
SmallView = right and bottom as 0, width and height be 40 [Square]
PlusSignImgVw = { 4,4,4,4 }
Like below:
Coding:
override func viewDidAppear(_ animated: Bool) {
imageVw.layer.cornerRadius = imageVw.frame.size.width / 2
smallSquareView.layer.cornerRadius = smallSquareView.frame.size.width / 2
smallSquareView.clipsToBounds = true
plusSign.layer.cornerRadius = plusSign.frame.size.width / 2
plusSign.clipsToBounds = true
}
Output:
It's a bit tricky, not obvious at first, but not too difficult either.
For the round images, try this:
customView.layer.cornerRadius = customView.bounds.size.width / 2.0
customView.layer.borderWidth = 2.0
customView.layer.borderColor = UIColor.white.cgColor
For the rectangular image with round corners, first line will calculate the .cornerRadius based on height (or you can actually do it for all the cases, and it would also work):
customView.layer.cornerRadius = customView.bounds.size.width / 2.0
Just replace customView with yourCustomViewName and write those 3 lines for each view. That should do the job.

How can I bring a UIView's border behind a UIImage?

I'm new to Swift and I'm facing an issue while trying to develop a small application and I really hope someone will help me out.
Basically, I have a UIImage inside a UIView, and I want to send the UIView's border to the back (See picture below)
So, I'm giving the UIView a border, and it goes through my image. My question is:
How do I bring the border of the UIView behind the UIImage?
Note: I apologize if this is a repeated question, I was looking for answers for hours but couldn't find what I need.
Best regards!
Here is my code for the Image:
speakerImage.layer.cornerRadius = speakerImage.frame.size.width / 2;
speakerImage.clipsToBounds = true;
speakerImage.layer.zPosition = 1
And here is my code for the View:
speakerContentView.layer.cornerRadius = 5
speakerContentView.layer.borderWidth = 1
speakerContentView.layer.borderColor = UIColor.gray.cgColor
speakerContentView.layer.shadowColor = UIColor.gray.cgColor
speakerContentView.layer.shadowOpacity = 0.7
speakerContentView.layer.shadowOffset = CGSize(width: 0, height: 3)
speakerContentView.layer.zPosition = -1
This may help you!!
Move your image outside current (speakerContentView) view and set it in higher hierarchy so that it can get front position.
Set vertical center Y of image equal to current (speakerContentView) view Y
Look at this image:
May be not a standard way but will solve your problem.
You should add a subview with the same size of the superview below the image, and assign the border/shadow to it instead of its superview.

Why do my objects get placed and sized so perfectly when I add them to a UIKitView?

So I have the following UIKit elements I am adding to my UIViewController to control the simulation that appears. I expected to have to write a lot of placement code but instead everything appears perfectly no-mater what device... my question is why?
let menuButton = UIButton()
let statusLabel = UILabel()
let segmentedLabel = UISegmentedControl(items: ["None", "Glow", "Cloud"])
func initializeUI() {
//The menu button that opens up the options for the simulations
menuButton.layer.borderColor = UIColor.lightGray.cgColor
menuButton.layer.borderWidth = 1
menuButton.layer.cornerRadius = 5
menuButton.layer.backgroundColor = UIColor.darkGray.cgColor
menuButton.showsTouchWhenHighlighted = true
menuButton.imageView?.contentMode = UIViewContentMode.scaleAspectFit
menuButton.setImage(UIImage(named: "hamburger.png"), for: UIControlState.normal)
menuButton.addTarget(self, action: #selector(menuPress), for: UIControlEvents.touchDown)
view.addSubview(menuButton)
//Will display the status of the simulation
statusLabel.text = "Particle Simulation"
statusLabel.textColor = UIColor.darkGray
view.addSubview(statusLabel)
//Will display visual options
view.addSubview(segmentedLabel)
}
The size of each of the elements is perfect and they dont overlap. The label is in the bottom left corner the button is in the bottom right and the segmented view is in the top left corner (of my landscape app).
An additional question I have is if I wanted to start placing these objects programmatically how would I do so? The elements don't have an attribute position that I can work with and if I do something like menuButton.frame.size.height *= 20 that does not make the menu button super tall.
The reason this works is that all of your UI items in your example have an “intrinsic” content size so they are able to create their own frame. Add a standard UIView the same way and you will be out of luck. Also the views are creating their own constraints based on initial frames using Auto Resizing Masks(Also known as Springs and Struts).
Finally to place items you would set the frame directly. Just math. Good luck.
Super important to understand intrinsic content size. Some frame changes might require you to turn off automatic constraints but this is usually not the case but could be the problem with your button
UIView.translatesAutoresizingMaskIntoConstraints = false

UIButton titleLabel make as a circle

Hello I want to make UIButton title label as a circle. So I did in this way.
btnAttachments.setTitle(strcount, for: .normal)
btnAttachments.setTitleColor(UIColor.white, for: .normal)
btnAttachments.titleLabel?.backgroundColor=com.getRedcolor()
btnAttachments.titleLabel?.font=UIFont.init(name: "Bariol", size: 15)
btnAttachments.titleLabel?.layer.cornerRadius=(btnAttachments.titleLabel?.frame.width)!/2
But it doesn't make it as a circle. It looks like this code doen't affect on the titleLabel
UPDATE
This is what I want to make
Please help me
Thanks
well first you have to verify that the uibutton has its clipsToBounds true, but incase that s already set and the problem still there, then you probably trying to achieve this in the viewDidLoad which "should" work, but for some reason in some of the xcode 8 versions in the viewDidLoad the layout are still aint final (objects doesnt have their true dimensions set yet) you can verify this by logging the uibutton frame right before you assign the corner radius if you find some incoherent that this is probably the issue , incase this is the issue then you just need to move your code to viewWillAppear
You are missing to set MasToBounds
btnAttachments.titleLabel?.layer.masksToBounds = true;
add this you code will work fine ,
You should set corner redius in viewDidLayoutSubViews or drawRect(usually in UIView class)
i hope this will help u
Use the following code to get desired result:
let btnAttachments = UIButton(type: .custom)
btnAttachments.setTitle(strcount, for: .normal).setTitleColor(UIColor.white, for: .normal)
btnAttachments.frame = CGRect(x: 160, y: 100, width: 50, height: 50)
btnAttachments.titleLabel?.backgroundColor=com.getRedcolor()
btnAttachments.titleLabel?.font=UIFont.init(name: "Bariol", size: 15)
btnAttachments.layer.cornerRadius = 0.5 * button.bounds.size.width
btnAttachments.clipsToBounds = true

issues with UIImageView.layer.cornerRadius to create rounded images on different pixel densities ios

I'm simply trying to create a perfectly round image. Here's my swift code:
myImage.layer.cornerRadius = myImage.frame.size.width/2
myImage.layer.masksToBounds = true
This works on a 4s, but is not quite round on a 5s, and appears as a rounded rectangle on a iphone 6.
I'm assuming this has to do with frame.size.width returning values in pixels not points or something like that, but I've been unable to solve this problem.
If you're putting that code in viewDidLoad, try moving it to viewDidLayoutSubviews.
I'm guessing it's an auto layout issue -- although you've used the corner radius property appropriately and are in fact making the image frame circular, after auto-layout, the corner radius stays the same, but the image stretches so that it's no longer circular.
If your code is in viewDidLoad in ViewController, try moving it to viewDidLayoutSubviews.
If your rounded imageView is in tableViewCell, try moving it to draw.
override func draw(_ rect: CGRect) {
avatarView.layer.cornerRadius = avatarView.frame.size.width / 2
avatarView.layer.masksToBounds = true
avatarView.clipsToBounds = true
avatarView.contentMode = .scaleAspectFill
}
The problem is that if you change the cornerRadius of Any view, and expect it to look like a circle, the view has to be a square.
Now, because of different devices and different device size, the size of your image view might change and it may be a rectangle.
For e.g.
If you view is a 50 * 50
myImage.layer.cornerRadius = myImage.frame.size.width/2
This would add corner radios of 25 on both sides to make it a circle.
But because of auto layout of device change, your view might be a 50 * 80
Corner radius would add a 25, but as the height is 80, it will add 25 on both sides, and the remaining 30 won't be a curve and look straight.
What you can do is try viewing the screen in various orientations in the storyboard and change auto layout Constraints (Or structs and springs) to ensure that the image view is a square in all the devices
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
myImage.layer.cornerRadius = myImage.frame.size.width/2
myImage.layer.masksToBounds = true
}
This should work:
myImage.layer.cornerRadius = myImage.**bounds**.size.width/2
myImage.layer.masksToBounds = true

Resources