View Shadow

Shadow casting can be used to create a nice looking 3D effect or highlight a selected view. If required we can set several shadows for the view. Each shadow represented by its offset relative to the view, blur, spread radius, color and whether it's spreading direction like inner or outer.

The view shadows are described by the "shadow" property:

Property Type Description
"shadow" []ShadowProperty An array of view shadow settings

Property holds the value of the array of ShadowProperty interface. If one instance of the ShadowProperty will be provided then it will be converted to an array automatically. An instance of that interface can be created using several global methods:

Go

func NewShadow[xOffsetType SizeUnit | int | float64, yOffsetType SizeUnit | int | float64, blurType SizeUnit | int | float64, spreadType SizeUnit | int | float64](xOffset xOffsetType, yOffset yOffsetType, blurRadius blurType, spreadRadius spreadType, color Color) ShadowProperty
func NewInsetShadow[xOffsetType SizeUnit | int | float64, yOffsetType SizeUnit | int | float64, blurType SizeUnit | int | float64, spreadType SizeUnit | int | float64](xOffset xOffsetType, yOffset yOffsetType, blurRadius blurType, spreadRadius spreadType, color Color) ShadowProperty
func NewShadowProperty(params Params) ShadowProperty

where Params is a map which can contain the following properties:

Property Type Description
"blur" SizeUnit Shadow blur radius
"color" Color Shadow color
"inset" bool Shadow spreading direction
"spread-radius" SizeUnit Shadow area
"x-offset" SizeUnit Shadow offset along horizontal axis
"y-offset" SizeUnit Shadow offset along vertical axis

Example

Setting the view shadow using the "shadow" property.

Go

view.Set(rui.Shadow, rui.NewShadowProperty(rui.Params{
    rui.Blur:         rui.Px(3),
    rui.ColorTag:     rui.Red,
    rui.Inset:        false,
    rui.SpreadRadius: rui.Px(2),
    rui.XOffset:      rui.Px(0),
    rui.YOffset:      rui.Px(0),
}))

By the way, it might be simpler to use rui.NewShadow() and rui.NewInsetShadow() functions.

When setting this property in resource description file it has a dedicated object format:

RUI

_{
    blur = <val>,
    color = <val>,
    inset = <val>,
    spread-radius = <val>,
    x-offset = <val>,
    y-offset = <val>,
}

where <val> is the text representation of the corresponding property type. The format doesn't enforce to have all attributes listed, at least "color" and "spread-radius" must be provided.

Example

Setting the view shadow from resource description file.

RUI

GridLayout {
    width = 100%,
    height = 100%,
    // Center content on the screen
    cell-horizontal-align = center,
    cell-vertical-align = center,
    // Use EditView as a child
    content = EditView {
        id = "view-id",
        padding = 4px,
        radius = 1em,
        // Setting view shadow attributes
        shadow = [
            // Outer shadow
            _{
                blur = 3px,
                color = red,
                spread-radius = 2px,
            },
        ],
        hint = "User name",
    }
}

Setting multiple view shadows from resource description file.

RUI

GridLayout {
    width = 100%,
    height = 100%,
    // Center content on the screen
    cell-horizontal-align = center,
    cell-vertical-align = center,
    // Use EditView as a child
    content = EditView {
        id = "view-id",
        padding = 4px,
        radius = 1em,
        // Setting view shadow attributes
        shadow = [
            // Outer shadow
            _{
                blur = 3px,
                color = red,
                spread-radius = 2px,
            },
            // Inner shadow
            _{
                blur = 2px,
                color = black,
                spread-radius = 1px,
                inset = true,
            },
        ],
        // Remove border
        border = _{
            style = none,
        },
        hint = "User name",
    }
}

Lets have a look at a few examples of shadows which might inspire you for your designs. We will use an EditView UI control for demonstration.

RUI

EditView {
    edit-view-type = password,
    hint = "Password",
    shadow = _{
        blur = 3px,
        color = red,
        spread-radius = 2px,
    },
}

Shadow example 1

Same but with adjusted view shape using "radius" property.

RUI

EditView {
    edit-view-type = password,
    hint = "Password",
    radius = 1em,
    shadow = _{
        blur = 3px,
        color = red,
        spread-radius = 2px,
    },
}

Shadow example 2

Combining inner, outer shadows and removing the border.

RUI

EditView {
    hint = "User name",
    padding = 4px,
    radius = 1em,
    shadow = [
        _{
            blur = 3px,
            color = black,
            spread-radius = 2px,
        },
        _{
            inset = true,
            blur = 3px,
            color = lightgray,
            spread-radius = 2px,
        },
    ],
}

Shadow example 3

Adding even more shadows and changing colors a bit.

RUI

EditView {
    hint = "User name",
    padding = 4px,
    radius = 1em,
    shadow = [
        _{
            blur = 3px,
            color = purple,
            spread-radius = 2px,
        },
        _{
            blur = 3px,
            color = lightgray,
            spread-radius = 2px,
            x-offset = 6px,
            y-offset = 6px,
        },
        _{
            inset = true,
            blur = 3px,
            color = lightgray,
            spread-radius = 2px,
        },
    ],
}

Shadow example 4

RUI

EditView {
    hint = "User name",
    padding = 4px,
    radius = 1em,
    shadow = [
        _{
            color = lightgray,
            spread-radius = 2px,
        },
    ],
}

Shadow example 5

RUI

EditView {
    hint = "User name",
    padding = 4px,
    radius = 6px,
    shadow = [
        _{
            blur = 10px,
            color = lightgray,
            spread-radius = 2px,
        },
    ],
}

Shadow example 6

Same but without the view border.

RUI

EditView {
    hint = "User name",
    padding = 4px,
    radius = 6px,
    border = _{style=none},
    shadow = [
        _{
            blur = 10px,
            color = lightgray,
            spread-radius = 2px,
        },
    ],
}

Shadow example 7

Using an offset and the negative spread radius.

RUI

EditView {
    hint = "User name",
    padding = 4px,
    border = _{style=none},
    shadow = [
        _{
            blur = 30px,
            color = black,
            spread-radius = -5px,
            y-offset = 10px
        },
    ],
}

Shadow example 8

To read the actual values of the view shadow we can use a Get() method of the ShadowProperty interface:

Go

switch shadowProp := view.Get(rui.Shadow).(type) {
    case []rui.ShadowProperty :
        for _, shadow := range shadowProp {
            // We can get any shadow attributes here, not just a "color"
            if colorProp := shadow.Get(rui.ColorTag); colorProp != nil {
                switch colorProp.(type) {
                case rui.Color:
                    // Do something with the value
                }
            }
        }
}

We can simplify it a bit by using a global function rui.GetShadowPropertys():

Go

shadows := rui.GetShadowPropertys(view, "view-id")
for _, shadow := range shadows {
    // We can get any shadow attributes here, not just a "color"
    if colorProp := shadow.Get(rui.ColorTag); colorProp != nil {
        switch colorProp.(type){
        case rui.Color:
            // Do something with the value
        }
    }
}

© Alxanosoft inc.