This view's order is like this
-View Controller
-Fake shadow view
-Container view
-Search Bar
In normal state, roundedcorner works correctly, but when I click on it, there is some shadow. When I type something on it just the view becomes rectengular
try this IBDesignable class and give rounded corner from story board
import Foundation
#IBDesignable class customView: UIView {
#IBInspectable var cornerRadius: CGFloat = 0 {
didSet {
layer.cornerRadius = cornerRadius
}
}
#IBInspectable var borderWidth: CGFloat = 0 {
didSet {
layer.borderWidth = borderWidth
}
}
#IBInspectable var borderColor: UIColor = UIColor.gray {
didSet {
layer.borderColor = borderColor.cgColor
}
}
#IBInspectable var shadowColor: UIColor = UIColor.gray {
didSet {
layer.shadowColor = shadowColor.cgColor
}
}
#IBInspectable var shadowOpacity: Float = 1.0 {
didSet {
layer.shadowOpacity = shadowOpacity
}
}
#IBInspectable var shadowRadius: CGFloat = 1.0 {
didSet {
layer.shadowRadius = shadowRadius
}
}
#IBInspectable var masksToBounds: Bool = true {
didSet {
layer.masksToBounds = masksToBounds
}
}
#IBInspectable var shadowOffset: CGSize = CGSize(width: 12, height: 12) {
didSet {
layer.shadowOffset = shadowOffset
}
}
}
Related
I have cell's imageView shadow customization:
override func layoutSubviews() {
moviePosterImageView.layer.shadowOffset = .zero
moviePosterImageView.layer.shadowColor = UIColor.black.cgColor
moviePosterImageView.layer.shadowRadius = 5
moviePosterImageView.layer.shadowOpacity = 1
moviePosterImageView.layer.masksToBounds = false
moviePosterImageView.layer.shadowPath = UIBezierPath(rect: moviePosterImageView.bounds).cgPath
}
But it breaks imageView sizes and constraints. Without shadow it works pretty good.
But it breaks imageView sizes and constraints.
Yes, because you forgot to start by saying
override func layoutSubviews() {
super.layoutSubviews() // important
Since autolayout happens in layoutSubviews, if you don’t call super you prevent it from operating.
Use This Code in another swift File and set shadow in story board or xib easily
extension UIView {
#IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
}
}
#IBInspectable
var borderWidth: CGFloat {
get {
return layer.borderWidth
}
set {
layer.borderWidth = newValue
}
}
#IBInspectable
var borderColor: UIColor? {
get {
if let color = layer.borderColor {
return UIColor(cgColor: color)
}
return nil
}
set {
if let color = newValue {
layer.borderColor = color.cgColor
} else {
layer.borderColor = nil
}
}
}
#IBInspectable
var shadowRadius: CGFloat {
get {
return layer.shadowRadius
}
set {
layer.shadowRadius = newValue
}
}
#IBInspectable
var shadowOpacity: Float {
get {
return layer.shadowOpacity
}
set {
layer.shadowOpacity = newValue
}
}
#IBInspectable
var shadowOffset: CGSize {
get {
return layer.shadowOffset
}
set {
layer.shadowOffset = newValue
}
}
#IBInspectable
var shadowColor: UIColor? {
get {
if let color = layer.shadowColor {
return UIColor(cgColor: color)
}
return nil
}
set {
if let color = newValue {
layer.shadowColor = color.cgColor
} else {
layer.shadowColor = nil
}
}
}
}
I am searching for a long time on net. But no use. Please help or try to give some ideas how to achieve this.
create a UIViewX in the View Controller or
add UIButton on custom view(UIViewX). And IBAction is print(" test ")
Everything work good.
But...
When add UIButton on custom view(UIViewX) and add animation code with UIViewX, button does't work if I press it
how to fix it that can response print(" test ")?
Thanks in advance.
Here is animation code :
var currentColorArrayIndex = -1
var colorArray:[(color1: UIColor, color2: UIColor)] = []
override func viewDidLoad() {
super.viewDidLoad()
colorArrayFunction()
backgroundAnimate()
}
colorArrayFunction & backgroundAnimate
Here is UIViewX code :
import UIKit
#IBDesignable
class UIViewXXXXX: UIView {
// MARK: - Gradient
#IBInspectable var firstColor: UIColor = UIColor.white {
didSet {
updateView()}}
#IBInspectable var secondColor: UIColor = UIColor.white {
didSet {
updateView()}}
#IBInspectable var horizontalGradient: Bool = false {
didSet {
updateView()}}
override class var layerClass: AnyClass {
get {
return CAGradientLayer.self}}
func updateView() {
let layer = self.layer as! CAGradientLayer
layer.colors = [ firstColor.cgColor, secondColor.cgColor ]
if (horizontalGradient) {
layer.startPoint = CGPoint(x: 0.0, y: 0.5)
layer.endPoint = CGPoint(x: 1.0, y: 0.5)
} else {
layer.startPoint = CGPoint(x: 0, y: 0)
layer.endPoint = CGPoint(x: 0, y: 1)
}}
// MARK: - Border
#IBInspectable public var borderColor: UIColor = UIColor.clear {
didSet {
layer.borderColor = borderColor.cgColor}}
#IBInspectable public var borderWidth: CGFloat = 0 {
didSet {
layer.borderWidth = borderWidth}}
#IBInspectable public var cornerRadius: CGFloat = 0 {
didSet {
layer.cornerRadius = cornerRadius
}
}
// MARK: - Shadow
#IBInspectable public var shadowOpacity: CGFloat = 0 {
didSet {
layer.shadowOpacity = Float(shadowOpacity)}}
#IBInspectable public var shadowColor: UIColor = UIColor.clear {
didSet {
layer.shadowColor = shadowColor.cgColor}}
#IBInspectable public var shadowRadius: CGFloat = 0 {
didSet {
layer.shadowRadius = shadowRadius}}
#IBInspectable public var shadowOffsetY: CGFloat = 0 {
didSet {
layer.shadowOffset.height = shadowOffsetY}}}
I created lots of IBInspectable. But today, I observed that Xcode having some properties like this:
In the link, I marked rectangle box. I want to create custom IBInspectable like that. I don't know that is possible or not.
Any help would be appreciated.
Follow below steps to create Custom IBDesignable
Step 1:
Step 2:
step 3: add this code in created customTextView file
import UIKit
#IBDesignable
class customTextView: UITextView {
#IBInspectable var cornerRadius: CGFloat = 4.0 {
didSet{
layer.cornerRadius = cornerRadius
}
}
#IBInspectable var borderWidth: CGFloat = 0.0 {
didSet{
layer.borderWidth = borderWidth
}
}
#IBInspectable var borderColor: UIColor = UIColor.clear {
didSet{
layer.borderColor = borderColor.cgColor
}
}
#IBInspectable var shadowOpacity: Float = 0 {
didSet{
layer.shadowOpacity = shadowOpacity
}
}
#IBInspectable var shadowColor: UIColor = UIColor.clear {
didSet{
layer.shadowColor = shadowColor.cgColor
}
}
#IBInspectable var shadowOffSet: CGSize = CGSize.zero {
didSet{
layer.shadowOffset = shadowOffSet
}
}
}
Step 4:
Step 5: Here you get you custom fields
I can view the changes made using IBInspectable on my simulator but not in my storyboard
I tried reinstalling my Xcode but it didn't fix this issue. Here are some screenshots :
So i know my code works fine because it runs in the simulator and this is a new project altogether so I do not have any of the "Storyboard might still be loading the changes" problems.
import UIKit
extension UIView {
#IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.masksToBounds = newValue > 0
}
}
#IBInspectable
var borderWidth: CGFloat {
get {
return layer.borderWidth
}
set {
layer.borderWidth = newValue
}
}
#IBInspectable
var borderColor: UIColor? {
get {
let color = UIColor(cgColor: layer.borderColor!)
return color
}
set {
layer.borderColor = newValue?.cgColor
}
}
#IBInspectable
var shadowRadius: CGFloat {
get {
return layer.shadowRadius
}
set {
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2)
layer.shadowOpacity = 0.4
layer.shadowRadius = shadowRadius
}
}
}
Firstly, you need #IBDesignable directive to render the updates in Storyboard whereas #IBInspectable is only to access the property directly in the Storyboard.
Secondly, you have extended the UIView class to show the inspectable properties in the Storyboard but without #IBDesignable.
Now you would think adding #IBDesignable would solve your problem but sadly you can't apply #IBDesignable on an extension like so:
#IBDesignable //won't work on an extension
extension UIView {
//...
}
You can only apply the #IBDesignable directive on a class you have access to, like so:
#IBDesignable
class MyPrettyDesignableView: UIView {
//...
}
Solution:
Bottomline is that you should subclass UIView and apply the #IBDesignable directive on this class.
Basically, your only option is:
#IBDesignable
class MyPrettyDesignableView: UIView {
#IBInspectable var cornerRadius: CGFloat = 0 {
didSet {
self.layer.cornerRadius = cornerRadius
self.layer.masksToBounds = true
}
}
#IBInspectable var borderWidth: CGFloat = 0 {
didSet {
self.layer.borderWidth = borderWidth
}
}
#IBInspectable var borderColor: UIColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1) {
didSet {
self.layer.borderColor = borderColor.cgColor
}
}
}
Then in the storyboard, go to the view that you want designable in storyboard and change it's custom class to MyPrettyDesignableView.
Change it's custom class to your IBDesignable subclass:
Set the IBInspectable properties:
Have you checked that in Interface Builder (Editor Menu) that you have set Automatically Refresh Views and Refresh All Views?
Update: Try this:
#IBDesignable public class CustomView: UIView {
#IBInspectable var borderColor: UIColor = .white{
didSet {
layer.borderColor = borderColor.cgColor
}
}
#IBInspectable var borderWidth: CGFloat = 2.0 {
didSet {
layer.borderWidth = borderWidth
}
}
#IBInspectable var cornerRadius: CGFloat = 10.0 {
didSet {
layer.cornerRadius = cornerRadius
}
}
#IBInspectable var shadowRadius: CGFloat {
get {
return layer.shadowRadius
}
set {
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2)
layer.shadowOpacity = 0.4
layer.shadowRadius = shadowRadius
}
}
override public func layoutSubviews() {
super.layoutSubviews()
clipsToBounds = true
}
}
Please update your code as below. You must have to set layer.maskToBound = false and view.clipToBounds = false
import UIKit
extension UIView {
#IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.masksToBounds = newValue > 0
}
}
#IBInspectable
var borderWidth: CGFloat {
get {
return layer.borderWidth
}
set {
layer.borderWidth = newValue
}
}
#IBInspectable
var borderColor: UIColor? {
get {
let color = UIColor(cgColor: layer.borderColor!)
return color
}
set {
layer.borderColor = newValue?.cgColor
}
}
#IBInspectable
var shadowRadius: CGFloat {
get {
return layer.shadowRadius
}
set {
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2)
layer.shadowOpacity = 0.4
layer.shadowRadius = shadowRadius
layer.maskToBounds = false
}
}
}
Have you tried to check Automatically Refresh Views or Refresh All Views? It works in my Xcode 9.4.1.
Editor -> Automatically Refresh Views
Assuming you have already applied #IBDesignable correctly at the declaration of a class. And assuming you have already applied #IBInspectable at the properties of the classes, then here is the trick that worked for me.
I delete and retype #IBDesignable.
sometimes even after adding #IBDesignable on the class and #IBInspectable on property definition, your Xcode might not show and refresh, so first
make sure you are using them correctly. if it is not refreshing in my case i had to close all instance of Xcode and restart the Xcode, then it will load the new fresh Interface builder files.
My goal is to make my the ImageView rounded and I already created a custom IBDesignable class
Code
import UIKit
#IBDesignable class MyImageView: UIImageView {
#IBInspectable var borderColor: UIColor = UIColor.clear {
didSet {
layer.borderColor = borderColor.cgColor
}
}
#IBInspectable var borderWidth: CGFloat = 0 {
didSet {
layer.borderWidth = borderWidth
}
}
#IBInspectable var cornerRadius: CGFloat = 0 {
didSet {
layer.cornerRadius = cornerRadius
}
}
}
Everything works fine already, but why is the image didn't change to rounded?
Result:
Set the clipToBounds property of UIImageView to true.
#IBInspectable var cornerRadius: CGFloat = 0 {
didSet {
layer.cornerRadius = cornerRadius
self.clipsToBounds = true
}
}