I have created a custom rounded floating tab bar successfully but how can i removed the default tabbar (shown with arrow in the picture). I tried to set tabbar background to UIImage() and set background color to clear but it is still not working.
My code:
let layer = CAShapeLayer()
guard let tabBar = tabBarController?.tabBar else {return}
layer.path = UIBezierPath(roundedRect: CGRect(x: 30,
y: tabBar.bounds.minY + 5,
//y: tabBar.bounds.minY - 28,
width: tabBar.bounds.width - 60,
height: tabBar.bounds.height - 24),
cornerRadius: (tabBar.frame.width / 2)).cgPath
layer.shadowColor = UIColor.lightGray.cgColor
layer.shadowOffset = CGSize(width: 5.0, height: 5.0)
layer.shadowRadius = 25.0
layer.shadowOpacity = 0.3
layer.borderWidth = 1.0
layer.opacity = 1.0
layer.masksToBounds = false
layer.fillColor = UIColor.white.cgColor
tabBar.layer.insertSublayer(layer, at: 0)
Use the tab bar appearance:
let app = UITabBarAppearance()
app.backgroundEffect = .none
app.shadowColor = .clear
tabBar.standardAppearance = app
Related
I want to create something like this:
Output
This is what I've tried so far:
class RoundedShadowCorners {
func shadowTopBar(_ topBar: UINavigationBar,_ offset: CGFloat,_ navigationItem: UINavigationItem){
topBar.isTranslucent = false
topBar.tintColor = UIColor.orange
topBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
topBar.shadowImage = UIImage()
topBar.backgroundColor = UIColor.white
let shadowView = UIView(frame: CGRect(x: 0, y: -offset, width: (topBar.bounds.width), height: (topBar.bounds.height) + offset))
shadowView.backgroundColor = UIColor.white
topBar.insertSubview(shadowView, at: 1)
let shadowLayer = CAShapeLayer()
shadowLayer.path = UIBezierPath(roundedRect: shadowView.bounds, byRoundingCorners: [.bottomLeft , .bottomRight , .topLeft], cornerRadii: CGSize(width: 20, height: 20)).cgPath
shadowLayer.fillColor = UIColor.white.cgColor
shadowLayer.shadowColor = UIColor.darkGray.cgColor
shadowLayer.shadowPath = shadowLayer.path
shadowLayer.shadowOffset = CGSize(width: 2.0, height: 2.0)
shadowLayer.shadowOpacity = 0.8
shadowLayer.shadowRadius = 2
shadowView.layer.insertSublayer(shadowLayer, at: 0)
topBar.prefersLargeTitles = true
topBar.topItem?.title = "HJFSKDJKA"
}
}
Problem with this is that this makes the title text be behind the actual NavigationBar and I can only make it come forward if I create a new UIView for the title and try positioning it on the screen, which makes it extremely difficult to be responsive.
offset isview.safeAreaInsets.top
I would prefer to do it without making a new UIView, because it makes things complicated, but I couldn't even begin to do it.
This is updated & tested code, there were certain lines which needs to be updated to overcome this behaviour,go through my in-line comments for details.
func shadowTopBar(_ topBar: UINavigationBar,_ offset: CGFloat){
// Set the prefers title style first
// since this is how navigation bar bounds gets calculated
//
topBar.prefersLargeTitles = true
topBar.topItem?.title = "HJFSKDJKA"
topBar.isTranslucent = false
topBar.tintColor = UIColor.orange
topBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
topBar.shadowImage = UIImage()
topBar.backgroundColor = UIColor.white
// Make your y position to the max of the uiNavigationBar
// Height should the cornerRadius height, in your case lets say 20
let shadowView = UIView(frame: CGRect(x: 0, y: topBar.bounds.maxY, width: (topBar.bounds.width), height: 20))
// Make the backgroundColor of your wish, though I have made it .clear here
// Since we're dealing it in the shadow layer
shadowView.backgroundColor = .clear
topBar.insertSubview(shadowView, at: 1)
let shadowLayer = CAShapeLayer()
// While creating UIBezierPath, bottomLeft & right will do the work for you in this case
// I've removed the extra element from here.
shadowLayer.path = UIBezierPath(roundedRect: shadowView.bounds, byRoundingCorners: [.bottomLeft , .bottomRight], cornerRadii: CGSize(width: 20, height: 20)).cgPath
shadowLayer.fillColor = UIColor.white.cgColor
shadowLayer.shadowColor = UIColor.darkGray.cgColor
shadowLayer.shadowPath = shadowLayer.path
// This too you can set as per your desired result
shadowLayer.shadowOffset = CGSize(width: 2.0, height: 4.0)
shadowLayer.shadowOpacity = 0.8
shadowLayer.shadowRadius = 2
shadowView.layer.insertSublayer(shadowLayer, at: 0)
}
Here's a detailed article on this. Medium
I am using the following code:
bottomBorder.backgroundColor = UIColor.viewShadowGray().cgColor
bottomBorder.frame = CGRect(x: 0, y: view.frame.size.height - 1, width: view.frame.size.width, height: 1)
In extended UIColor file:
class func viewShadowGray() -> UIColor
{
return UIColor(red: 177.0/255.0, green: 177.0/255.0, blue: 179.0/255.0, alpha: 0.7)
}
changing the alpha value only makes the colour light, doesn't make it look blurred.
and getting :
I am expecting to obtain something as this:
How do I proceed rectifying this here?
edited , since you tried the shadow opacity thing in your new updated question i suggest using the implemented shadow properties for UIlayer
view.layer.masksToBounds = NO
view.layer.shadowOffset = CGSizeMake(-15, 20)
view.layer.shadowRadius = 5
view.layer.shadowOpacity = 0.5
view.layer.shadowColor = UIColor.black.cgColor
i would also recommend reading this article it would help you with that big time here
and check out this solution
extension UIView {
// OUTPUT 1
func dropShadow(scale: Bool = true) {
layer.masksToBounds = false
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.5
layer.shadowOffset = CGSize(width: -1, height: 1)
layer.shadowRadius = 1
layer.shadowPath = UIBezierPath(rect: bounds).cgPath
layer.shouldRasterize = true
layer.rasterizationScale = scale ? UIScreen.main.scale : 1
}
// OUTPUT 2
func dropShadow(color: UIColor, opacity: Float = 0.5, offSet: CGSize, radius: CGFloat = 1, scale: Bool = true) {
layer.masksToBounds = false
layer.shadowColor = color.cgColor
layer.shadowOpacity = opacity
layer.shadowOffset = offSet
layer.shadowRadius = radius
layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
layer.shouldRasterize = true
layer.rasterizationScale = scale ? UIScreen.main.scale : 1
}
}
original answer here
using them like this
view.layer.dropShadow()
I'm making a custom view that i want to mask and to add shadow to it.
the masking:
let p = UIBezierPath()
p.moveToPoint(CGPointMake(20, 20))
p.addLineToPoint(CGPointMake(100, 20))
p.addLineToPoint(CGPointMake(100, 50))
p.addLineToPoint(CGPointMake(110, 55))
p.addLineToPoint(CGPointMake(100, 60))
p.addLineToPoint(CGPointMake(100, 100))
p.addLineToPoint(CGPointMake(20, 100))
p.closePath()
let s = CAShapeLayer()
s.frame = layer.bounds
s.path = p.CGPath
s.fillColor = UIColor.greenColor().CGColor
layer.mask = s
the masking works, now i want to add a shadow.
but its not working.
i tried to add shadow to the main layer and nothing happens.
layer.shadowColor = UIColor.yellowColor().CGColor
layer.shadowRadius = 10
layer.shadowOpacity = 0.9
layer.shadowOffset = CGSizeZero
i tried to add it to the mask layer and i got the main view masked with a shadow.
s.shadowColor = UIColor.yellowColor().CGColor
s.shadowRadius = 10
s.shadowOpacity = 0.9
s.shadowOffset = CGSizeZero
Any suggestions how to add this yellow shadow to the masked view?
Thanks
Thanks #WilsonXJ
I changed mask to addSubLayer.
This is the answer that worked for me:
let p = UIBezierPath()
p.moveToPoint(CGPointMake(20, 20))
p.addLineToPoint(CGPointMake(100, 20))
p.addLineToPoint(CGPointMake(100, 50))
p.addLineToPoint(CGPointMake(110, 55))
p.addLineToPoint(CGPointMake(100, 60))
p.addLineToPoint(CGPointMake(100, 100))
p.addLineToPoint(CGPointMake(20, 100))
p.closePath()
let s = CAShapeLayer()
s.fillColor = UIColor.whiteColor().CGColor
s.frame = layer.bounds
s.path = p.CGPath
layer.backgroundColor = UIColor.clearColor().CGColor
layer.addSublayer(s)
layer.masksToBounds = true
layer.shadowColor = UIColor.yellowColor().CGColor
layer.shadowOffset = CGSizeZero
layer.shadowOpacity = 0.9
layer.shadowPath = p.CGPath
layer.shadowRadius = 10
I don't think that current answer is the right one, because there is no layer.mask usage anymore.
In case when you need to use layer.mask and to drop shadow of masked layer - the obvious solution is to add another layer below masked layer that will have same shape as layer.mask and drop it's shadow
example:
let view = UIView(frame: CGRect(origin: .zero, size: CGSize(width: 500, height: 500)))
view.backgroundColor = .white
PlaygroundPage.current.liveView = view
let path: CGPath = ...
let maskedView = UIView(frame: path.boundingBox)
maskedView.center = view.center
maskedView.backgroundColor = .green
view.addSubview(maskedView)
let maskLayer = CAShapeLayer()
maskLayer.frame = maskedView.bounds
maskLayer.path = path
maskedView.layer.mask = maskLayer
let shadowLayer = CAShapeLayer()
shadowLayer.path = path
shadowLayer.frame = maskedView.frame
shadowLayer.shadowOpacity = 0.4
shadowLayer.shadowRadius = 2
shadowLayer.shadowColor = UIColor.black.cgColor
shadowLayer.shadowOffset = CGSize(width: 4, height: 4)
maskedView.superview!.layer.insertSublayer(shadowLayer, below: maskedView.layer)
In my design navigation of app have nice shadow and i want to apply in my code.
How to i can create this effect?
without adding the view
self.navigationController?.navigationBar.layer.masksToBounds = false
self.navigationController?.navigationBar.layer.shadowColor = UIColor.lightGray.cgColor
self.navigationController?.navigationBar.layer.shadowOpacity = 0.8
self.navigationController?.navigationBar.layer.shadowOffset = CGSize(width: 0, height: 2.0)
self.navigationController?.navigationBar.layer.shadowRadius = 2
I've done this before by adding a view underneath the navigation bar.
func addShadowToBar() {
let shadowView = UIView(frame: self.navigationController!.navigationBar.frame)
shadowView.backgroundColor = UIColor.whiteColor()
shadowView.layer.masksToBounds = false
shadowView.layer.shadowOpacity = 0.4 // your opacity
shadowView.layer.shadowOffset = CGSize(width: 0, height: 2) // your offset
shadowView.layer.shadowRadius = 4 //your radius
self.view.addSubview(shadowView)
}
override func viewDidLoad() {
super.viewDidLoad()
self.navigationController?.navigationBar.layer.shadowColor = UIColor.black.cgColor
self.navigationController?.navigationBar.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
self.navigationController?.navigationBar.layer.shadowRadius = 4.0
self.navigationController?.navigationBar.layer.shadowOpacity = 1.0
self.navigationController?.navigationBar.layer.masksToBounds = false
}
if I am not wrong, the defaults navigation bar already comes with a shadow. But if you're making a custom one with a UIView then you should do this to make your life easier
yourView.clipsToBounds = false
yourView.layer.shadowOffset.height = 5 //this is your offset
yourView.layer.shadowOpacity = 0.25 //opacity of your shadow (recommended)
Swift 3:
let shadowView = UIView(frame: navBar.frame)
shadowView.backgroundColor = UIColor.white
shadowView.layer.masksToBounds = false
shadowView.layer.shadowColor = UIColor.lightGray.cgColor
shadowView.layer.shadowOpacity = 0.8
shadowView.layer.shadowOffset = CGSize(width: 0, height: 2.0)
shadowView.layer.shadowRadius = 2
view.addSubview(shadowView)
I have a tableview with three rows. I am trying to make the table rows have rounded corners and also a shadow effect around the entire tableview. For some reason, I cannot make the tableview both have the rounded corners and shadow effect but I could do them separately if I comment out the code responsible for one of the features. Here is the code I am using:
//this is for shadow effect
tableView.backgroundColor = UIColor.clearColor()
tableView.layer.shadowColor = UIColor.darkGrayColor().CGColor
tableView.layer.shadowOffset = CGSize(width: 2.0, height: 2.0
tableView.layer.shadowOpacity = 1.0
tableView.layer.shadowRadius = 2
// This is for rounded corners
tableView.layer.cornerRadius = 10
tableView.layer.masksToBounds = true
You can add your table view to a container view and add drop shadow to that container view:
let containerView:UIView = UIView(frame:CGRect(x: 10, y: 100, width: 300, height: 400))
self.tableView = UITableView(frame: containerView.bounds), style: .Plain)
containerView.backgroundColor = UIColor.clearColor()
containerView.layer.shadowColor = UIColor.darkGrayColor().CGColor
containerView.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
containerView.layer.shadowOpacity = 1.0
containerView.layer.shadowRadius = 2
// This is for rounded corners
self.tableView.layer.cornerRadius = 10
self.tableView.layer.masksToBounds = true
self.view.addSubview(containerView)
containerView.addSubview(self.tableView)
Edit
Swift 3.0:
let containerView:UIView = UIView(frame:CGRect(x: 10, y: 100, width: 300, height: 400))
self.tableView = UITableView(frame: containerView.bounds, style: .plain)
containerView.backgroundColor = UIColor.clear
containerView.layer.shadowColor = UIColor.darkGray.cgColor
containerView.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
containerView.layer.shadowOpacity = 1.0
containerView.layer.shadowRadius = 2
self.tableView.layer.cornerRadius = 10
self.tableView.layer.masksToBounds = true
self.view.addSubview(containerView)
containerView.addSubview(self.tableView)
The RDC's answer is good, but for me the result didnt resolve my case, follow is my fix :
//for table view border
tableView.layer.borderColor = UIColor .grayColor().CGColor
tableView.layer.borderWidth = 1.0
//for shadow
let containerView:UIView = UIView(frame:self.tableView.frame)
//dont use clear color,fit blue color
containerView.backgroundColor = UIColor.blueColor()
//shadow view also need cornerRadius
containerView.layer.cornerRadius = 10
containerView.layer.shadowColor = UIColor.lightGrayColor().CGColor
containerView.layer.shadowOffset = CGSizeMake(-10, 10); //Left-Bottom shadow
//containerView.layer.shadowOffset = CGSizeMake(10, 10); //Right-Bottom shadow
containerView.layer.shadowOpacity = 1.0
containerView.layer.shadowRadius = 2
//for rounded corners
tableView.layer.cornerRadius = 10
tableView.layer.masksToBounds = true
self.view.addSubview(containerView)
self.view.addSubview(tableView)
i tried above solution but in my application tableview didSelectRowAt was not working.
use this Extension for UITabeleView
for corner
for shadow
//if u want shadow for all side use (shadowOffset = .zero)
extension UITableView {
func addCorner(){
self.layer.cornerRadius = 15
self.clipsToBounds = true
}
func addShadow(){
self.layer.shadowColor = UIColor.lightGray.cgColor
self.layer.shadowRadius = 5
self.layer.shadowOpacity = 0.5
self.layer.shadowOffset = .zero
self.layer.masksToBounds = false
}
}
How to use::
self.tableView.addCorner()
self.tableView.addShadow()
Thanks to #beyowulf
I have upgraded for me with Swift 2.2, to
set Border,
Rounded corner and
Drop shadow to the table view
//for table view border
tableView.layer.borderColor = UIColor .grayColor().CGColor
tableView.layer.borderWidth = 1.0
//for shadow
let containerView:UIView = UIView(frame:self.tableView.frame)
containerView.backgroundColor = UIColor.clearColor()
containerView.layer.shadowColor = UIColor.lightGrayColor().CGColor
containerView.layer.shadowOffset = CGSizeMake(-10, 10); //Left-Bottom shadow
//containerView.layer.shadowOffset = CGSizeMake(10, 10); //Right-Bottom shadow
containerView.layer.shadowOpacity = 1.0
containerView.layer.shadowRadius = 2
//for rounded corners
tableView.layer.cornerRadius = 10
tableView.layer.masksToBounds = true
self.view.addSubview(containerView)
containerView.addSubview(tableView)
result looks like