https://kotlinlang.org logo
#ios
Title
# ios
c

Christian Sousa

03/25/2020, 6:24 PM
Hello all, trying to create a UIView with rounded corners and shadows, after digging through some code online I ended up with something like this:
Copy code
private fun generateViewWithShadow(): UIView {
        var generatedView = UIView().apply {
            translatesAutoresizingMaskIntoConstraints = false
            heightAnchor.constraintEqualToConstant(60.0).active = true
        }

        var size = CGSizeMake(20.0, 20.0)
        var offsetVal = CGSizeMake(2.0, 2.0)

        var layerPath = UIBezierPath.bezierPathWithRoundedRect(rect= generatedView.bounds, byRoundingCorners = UIRectCornerAllCorners, cornerRadii = size ).CGPath

        var shadowLayer = CAShapeLayer().apply {
            path = layerPath
            fillColor = UIColor.whiteColor.CGColor
            shadowColor = UIColor.blackColor.CGColor
            shadowPath = layerPath
            shadowOffset = offsetVal
            shadowOpacity = 1.0F
            shadowRadius = 5.0
        }

        generatedView.layer.addSublayer(shadowLayer)

        return generatedView

    }
Looking at some swift code, I guess that my translation to kotlin is correct, but I still dont get what it should output.. any ideas?
r

ribesg

03/26/2020, 9:07 AM
Here is some of the DSL I did and use in my views
c

Christian Sousa

03/26/2020, 9:15 AM
And after that what do you usually do to make a view? just call its constructor and then addDropshadow on it?
r

ribesg

03/26/2020, 9:21 AM
I’m calling the first function usually to build subviews
I call the two others when I want to round corners or add shadows to a view that isn’t a UIView (Typically UIImageView)
c

Christian Sousa

03/26/2020, 9:24 AM
Gotcha. I’m doing like this:
Copy code
UIView.uiView(
    cornerRadius = 6.0,
    shadowRadius = 6.0
)
But it gives me an unresolved reference
r

ribesg

03/26/2020, 9:25 AM
It’s an extension function
c

Christian Sousa

03/26/2020, 9:26 AM
Sorry, I’m kinda new to Kotlin and Swift.. What does that mean?
r

ribesg

03/26/2020, 9:29 AM
Well the view of your feature should be a subclass of UIView like
class LoginUIView(frame: CValue<CGRect>) : UIView(frame)
So when you build the content of your view you should be inside a UIView, that’s why the extension is on UIView
But you can remove the
UIView.
in the definition if you want, I just don’t like having general function like that available everywhere, it’s polluting autocompletion
c

Christian Sousa

03/26/2020, 9:35 AM
Yeah, gotcha. Just one more thing, if I understood correctly, your
UIView.uiView
returns just a shadowed view? Or does it return the shadowed with the rounded corners? I’m asking this because you have also the
roundCorners
function. Or you just have it to round corners of something other than a UIView?
r

ribesg

03/26/2020, 9:40 AM
Or you just have it to round corners of something other than a UIView?
Exactly.
roundCorners
also allows to round only some of the corners and not all of them (the technique is different if you want to round all of them or just some)
Also iirc with this you can’t round only some corners AND have a shadow
But I didn’t need to so I didn’t look for another way
c

Christian Sousa

03/26/2020, 9:41 AM
Yeah, I tested using your uiView but got something like this:
I’m adding the generated view via the
uiView
to a
UIStackView
Any idea of what might be causing this?
r

ribesg

03/26/2020, 10:24 AM
I don’t know
You need a background different than
clearColor
or
null
to have a shadow
c

Christian Sousa

03/26/2020, 10:27 AM
I tried just using the
UIView.uiView
to create the view, after that tried to use:
Copy code
var generatedView = UIView().apply {
           layer.cornerRadius = 6.0
            backgroundColor = UIColor.whiteColor
            translatesAutoresizingMaskIntoConstraints = false
            heightAnchor.constraintEqualToConstant(60.0).active = true
        }

var shadowView = View.uiView(cornerRadius = 6.0,shadowRadius = 6.0)

generatedView.addSubview(shadowView)

return generatedView
But that doesn’t work either
8 Views