Creating Shadows in Swift with Xib for TableView

I am currently working on:

Attached is a screenshot from an iPhone:

This is the code snippet in question:

cell.shadowLayerView.layer.masksToBounds = false
cell.shadowLayerView.layer.shadowOffset = CGSize(width: 0, height: 0)
cell.shadowLayerView.layer.shadowColor = UIColor.black.cgColor
cell.shadowLayerView.layer.shadowOpacity = 0.23
cell.shadowLayerView.layer.shadowRadius = 4
cell.shadowLayerView.layer.shadowPath = UIBezierPath(roundedRect: cell.shadowLayerView.bounds, cornerRadius: 2).cgPath
cell.shadowLayerView.layer.shouldRasterize = true
cell.shadowLayerView.layer.rasterizationScale = UIScreen.main.scale
cell.discriptionLbl.frame.size.width = UIScreen.main.bounds.size.width

In the original tableview XIB image, there is a light gray shadow surrounding all sides (top, bottom, left, right). However, in the captured image, there appears to be extra shadow on the right and bottom sides.

Refer to the Image Below:

Question: How can I replicate the same consistent shadow effect seen in the original image (light gray color) on all sides of the view?

If anyone could provide insight into how to address this issue, I would greatly appreciate it. I have attempted various solutions without success so far.

Thank you in advance for any assistance provided.

ioscssswiftuitableview

Answer №1

Check out the code snippet below:

mainViewCorner.layer.shadowColor = UIColor.red.cgColor;
mainViewCorner.layer.shadowOffset = CGSize.zero //direction of shadow
mainViewCorner.layer.shadowOpacity = 1.0; // opacity for shadow
mainViewCorner.layer.shadowRadius = 0.0; //amount of shadow to blur
mainViewCorner.layer.cornerRadius = 4.0;

The problem in your code was with the shadowOffset. It specifies the direction of the shadow. To have a shadow on all sides, both width and height should have a value of zero.

Answer №2

give it a go 

   myView.layer.cornerRadius = 10
   let shadowPath = UIBezierPath(roundedRect: myView.bounds, cornerRadius: 10)

    myView.layer.masksToBounds = false
    myView.layer.shadowColor = UIColor.gray.cgColor
    myView.layer.shadowOffset = CGSize(width: 0, height: 2)
    myView.layer.shadowOpacity = 0.5

Alternatively, you could opt for Sketch Shadow 

extension CALayer {
    func applySketchShadow(
        color: UIColor = .black,
        alpha: Float = 0.5,
        x: CGFloat = 0,
        y: CGFloat = 2,
        blur: CGFloat = 4,
        spread: CGFloat = 0)
    {
        shadowColor = color.cgColor
        shadowOpacity = alpha
        shadowOffset = CGSize(width: x, height: y)
        shadowRadius = blur / 2.0
        if spread == 0 {
            shadowPath = nil
        } else {
            let dx = -spread
            let rect = bounds.insetBy(dx: dx, dy: dx)
            shadowPath = UIBezierPath(rect: rect).cgPath
        }
    }
}

implement Sketch Shadow 

 myView.layer.cornerRadius = 10
        let shadowPath = UIBezierPath(roundedRect: myView.bounds, cornerRadius: 10)

   myView.layer.applySketchShadow(
            color: .black, 
            alpha: 0.5, 
            x: CGFloat(0), 
            y: CGFloat(10), 
            blur: 20, 
            spread: 0)
        myView.layer.shadowPath = shadowPath.cgPath

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to stretch the background image across both the footer and navbar for my app?

Here is the code snippet I am currently working with: <template> <v-app> <AppBar></AppBar> <v-main> <router-view></router-view> </v-main> <Footer></Footer> ...

javascripthtmlcssvue.js

Dynamic Motion of HTML Elements

I'm facing a challenge where the elements on my website do not stay in place within their designated sections when I zoom out. Despite my efforts to inspect and adjust the properties of these elements, I can't seem to pinpoint the root cause of t ...

htmlcss

What is the best way to horizontally center an image in Bootstrap 4 while having a fixed-top navbar and preventing vertical scrollbars?

I am struggling to achieve the desired outcome, which is depicted in this image: https://i.sstatic.net/i6X0j.jpg Specific requirements for this project include: The image must be responsive A fixed-top navbar should remain visible No vertical scrolling ...

cssbootstrap-4

The PHP Include function seems to be malfunctioning and unable to properly display

Everything you see is what I have on my home.php page <?php include ('../bgs/bg-verbier.html'); include('../menus/menu-verbier.html'); ?> Both of the files requested are located in the parent directory. The /menus/menu-v ...

phpcss

What is the best way to transfer information from one screen to a UIView on a different screen?

As a newcomer to the world of app development, I've been struggling to find solutions to my current challenge. My goal is to create a to-do app where tasks are displayed as cards, similar to this. While I plan on adding animations later, my main road ...

iosswift

The event resizing feature in fullCalendar2.6* seems to be experiencing some issues

After updating from fullCalendar 1.6 to 2.6, all functionality seems to be working except for eventResize. In the newer version, I am unable to see the resize arrow when attempting to adjust events, although it was functioning properly in the previous ver ...

phpjqueryhtmlcssfullcalendar

Create a radial-gradient() that covers two separate elements

Seeking to create a spherical appearance for a circle made of two semi-circular divs using background: radial-gradient(). Any ideas on achieving this effect without combining the two semi-circle divs into one circular div? [The decision to use two semi-ci ...

cssradial-gradients

"Enhance your website with a backspace button using jquery - here's

Recently, I delved into the world of jQuery and decided to test my skills by creating a jQuery calculator. Everything worked perfectly except for the backspace button. This is what I tried: if (value === backspace) { $(input).val($(input).val().substring ...

javascriptjqueryhtmlcss

I am having trouble with the CSS Hover and Active styling on my website

Below is the code for my navigation bar: <ul> <li><a href="index.html">HOME</a></li> <li><a href="portfolio.html">PORTFOLIO</a></li> <li><a href="resources.html">RESOURCES</a ...

htmlcss

Mastering the art of horizontal alignment in forms

So, within my render function, the following code is used: render() { <div> <form id="one"> <TextField id="t1" ... /> <Button id="b1" /> </form> <div id="empty"><div ...

cssreactjsmaterial-ui

How to accurately determine the width of an element using JavaScript

Consider this scenario where I have created a custom dropdown list using HTML within a generic div: $(document).ready(function() { $("#selectbox-body").css("width", $("#selectbox").width()); }); <script src="https://ajax.googleapis.com/ajax/libs/ ...

javascriptjqueryhtmlcss

The carousel top position in Bootstrap 4 is not functioning properly

I am struggling to get the teal rectangle to move to the top of the carousel. I have set my carousel to have a position relative and my teal rectangle to have a position absolute with top="0", but it doesn't seem to be working properly. Instead of mov ...

cssbootstrap-4

What is the process for reinserting a list item into the nested elements?

Looking for help with manipulating a menu in HTML? I have a menu that I want to modify by removing and adding list items. While I've had success removing items, I'm struggling to properly use the add method. Here's an example of what my menu ...

javascriptjqueryasp.netcss

How to link an external CSS file to a Vue.js project

I created a new project using @vue/cli and now I want to add an external CSS file to my App.vue Here's what I attempted: <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | ...

javascriptcssvue.jswebpack

I've been trying to update the UIButton Highlight Image, but unfortunately, I haven't had any

I am struggling to change the highlight image of a UIButton in my view Despite my efforts, I have been unsuccessful UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 66, 29)]; [button setBackgroundImage:[UIImage imageNamed:@"filt ...

iosobjective-cuibutton

Alignment of elements in a list at the bottom

I am looking to create multi-level tabs using <li> that grow from bottom to top. Here is the current code I have: div{ width: 200px; border: 1px solid black; } ul{ margin: 0px; padding: 0px; } li{ margin: 2px; width: 20px; display: ...

htmlcss

Utilizing Bootstrap to Showcase a Form

I am facing some confusion. In my MVC5 project, I am trying to display a form with 4 input fields. The display looks perfect without using the @using (HTML.BeginForm(...) statement. @using(Html.BeginForm("Create", "HR", FormMethod.Post)) { When the @ ...

cssasp.net-mvc-5bootstrap-4

App crash on IOS only occurs when running on a physical device, but not when running on the simulator

Following a successful build in Xcode, my app runs smoothly on the simulator and my iPhone. However, when I distribute it for testing, it crashes whenever test users attempt to perform a search. If I hardcode the URL elements, everything works perfectly b ...

iosjsonswift

Fetching large images with "fill" layout in NextJS

I am currently using Cloudinary to serve correctly sized images, however, it appears that NextJS image is always fetching with a width of 3840, instead of the fixed value. <Image src={loaderUrl(logoImage)} alt="" role="presen ...

cssnext.jsnext-images

Performing multiplication or division operations on numbers exceeding 38 digits in Objective-C

I need to create an application that can multiply or divide extremely large numbers by 19, with these numbers potentially reaching up to hundreds of digits in length. Can anyone recommend a library for this task? I've attempted using NSDecimalNumber, ...

iosobjective-cmacosmathnsdecimalnumber