Hello all, trying to create a UIView with rounded ...

# ios

[Christian Sousa]

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:

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?

[ribesg]

Here is some of the DSL I did and use in my views

UIView.kt

[Christian Sousa]

And after that what do you usually do to make a view? just call its constructor and then addDropshadow on it?

[ribesg]

I’m calling the first function usually to build subviews

[ribesg]

I call the two others when I want to round corners or add shadows to a view that isn’t a UIView (Typically UIImageView)

[Christian Sousa]

Gotcha.
I’m doing like this:

UIView.uiView(
    cornerRadius = 6.0,
    shadowRadius = 6.0
)

But it gives me an unresolved reference

[ribesg]

It’s an extension function

[Christian Sousa]

Sorry, I’m kinda new to Kotlin and Swift.. What does that mean?

[ribesg]

Well the view of your feature should be a subclass of UIView like class LoginUIView(frame: CValue<CGRect>) : UIView(frame)

[ribesg]

So when you build the content of your view you should be inside a UIView, that’s why the extension is on UIView

[ribesg]

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

[Christian Sousa]

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?

[ribesg]

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)

[ribesg]

Also iirc with this you can’t round only some corners AND have a shadow

[ribesg]

But I didn’t need to so I didn’t look for another way

[Christian Sousa]

Yeah, I tested using your uiView but got something like this:

[Christian Sousa]

I’m adding the generated view via the uiView to a UIStackView

[Christian Sousa]

Any idea of what might be causing this?

[ribesg]

I don’t know

[ribesg]

You need a background different than clearColor or null to have a shadow

[Christian Sousa]

I tried just using the UIView.uiView to create the view, after that tried to use:

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

[ribesg]

https://developer.apple.com/library/archive/documentation/DeveloperTools/Conceptual/debugging_with_xcode/chapters/special_debugging_workflows.html