View Radius

To create a nice looking user interface sometimes it is not enough to use a view with а rectangular shape. Each corner of the view shape can be customized by supplying the values of the horizontal and vertical radii.

Since the corner radius changes the shape of the view it will affect the appearance of the view border and outline. The following primary view property is used to control the shape of the corners:

Property	Type	Description
"radius"	`RadiusProperty`	Controls radius of all corners of the view

Lets have a look at some examples of radius settings and how they affect the shape of the view.

RUI

EditView {
    radius = 8px,
    padding = 4px,
    hint = "User name"
},

RUI

EditView {
    radius = _{
        top-left = 4px,
        top-right = 8px,
        bottom-left = 8px,
        bottom-right = 4px,
    },
    padding = 4px,
    hint = "User name"
}

RUI

EditView {
    radius = _{
        top-left = 8px,
        top-right = 4px,
        bottom-left = 4px,
        bottom-right = 8px,
    },
    padding = 4px,
    hint = "User name"
}

RUI

EditView {
    radius = _{
        top-left = 1em,
        top-right = 1em,
        bottom-left = 1em,
        bottom-right = 1em,
    },
    padding = 4px,
    hint = "User name"
}

RUI

EditView {
    radius = _{
        top-left = 4px,
        top-right = 10px,
        bottom-left = 10px,
        bottom-right = 6px,
    },
    padding = 4px,
    hint = "User name"
}

RUI

EditView {
    radius = _{
        x = 4px,
        y = 10px,
    },
    padding = 4px,
    hint = "User name"
}

RUI

EditView {
    radius = _{
        x = 10px,
        y = 4px,
    },
    padding = 4px,
    hint = "User name"
}

We can experiment with properties to match the design of our application.

The "radius" property holds the value of the RadiusProperty interface. An instance of that interface can be created using the global rui.NewRadiusProperty() function:

func NewRadiusProperty(params rui.Params) rui.OutlineProperty

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

Property	Type	Description
"x"	`SizeUnit`	All corners horizontal radius
"y"	`SizeUnit`	All corners vertical radius
"bottom-left"	`SizeUnit`	Bottom left corner horizontal and vertical radius
"bottom-left-x"	`SizeUnit`	Bottom left corner horizontal radius
"bottom-left-y"	`SizeUnit`	Bottom left corner vertical radius
"bottom-right"	`SizeUnit`	Bottom right corner horizontal and vertical radius
"bottom-right-x"	`SizeUnit`	Bottom right corner horizontal radius
"bottom-right-y"	`SizeUnit`	Bottom right corner vertical radius
"top-left"	`SizeUnit`	Top left corner horizontal and vertical radius
"top-left-x"	`SizeUnit`	Top left corner horizontal radius
"top-left-y"	`SizeUnit`	Top left corner vertical radius
"top-right"	`SizeUnit`	Top right corner horizontal and vertical radius
"top-right-x"	`SizeUnit`	Top right corner horizontal radius
"top-right-y"	`SizeUnit`	Top right corner vertical radius

Example

Setting a view radius using the "radius" property.

view.Set(rui.Radius, rui.NewRadiusProperty(rui.Params{
    rui.X:           rui.Px(4),
    rui.Y:           rui.Px(4),
    rui.TopLeft:     rui.Px(8),
    rui.BottomRight: rui.Px(8),
}))

There are also other ways of creating an instance of RadiusProperty interface using rui.NewEllipticRadius() and rui.NewRadii() global functions:

view.Set(rui.Radius, rui.NewEllipticRadius(
    rui.Px(4), // The x-axis elliptic rounding radius for all corners
    rui.Px(4), // The y-axis elliptic rounding radius for all corners
))

view.Set(rui.Radius, rui.NewRadii(
    rui.Px(4), // The top-right corner x and y axis elliptic rounding radius
    rui.Px(4), // The bottom-right corner x and y axis elliptic rounding radius
    rui.Px(8), // The bottom-left corner x and y axis elliptic rounding radius
    rui.Px(8), // The top-left corner x and y axis elliptic rounding radius
))

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

RUI

_{
    bottom-left = <val> | "<x_val>/<y_val>",
    bottom-left-x = <val>,
    bottom-left-y = <val>,
    bottom-right = <val> | "<x_val>/<y_val>",
    bottom-right-x = <val>,
    bottom-right-y = <val>,
    top-left = <val> | "<x_val>/<y_val>",
    top-left-x = <val>,
    top-left-y = <val>,
    top-right = <val> | "<x_val>/<y_val>",
    top-right-x = <val>,
    top-right-y = <val>,
    x = <val>,
    y = <val>,
}

where <x_val>, <y_val> are the horizontal and vertical radius values. The <val> is holding one value either for both horizontal and vertical radius or for specific one. All values are the text representation of SizeUnit type.

The corner properties like "bottom-left", "bottom-right", "top-left", and "top-right" can contain one value for both "x" and "y" radiuses or two values separated by / which describe "x" and "y" radiuses respectively. Pay attention that if two values are specified, they must be enclosed in double quotes.

If some properties are not required we can omit them, by default their values are equal to 0.

Example

Setting the view radius 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 {
        // Setting view radius attributes
        radius = _{
            x = 4px,
            y = 4px,
            top-left = 8px,
            bottom-right = "4px/8px",
        },
        hint = "User name",
    }
}

To read the actual values of the view radius we can use BoxRadius() method of the RadiusProperty interface:

switch radiusProp := view.Get(rui.Radius).(type) {
case rui.RadiusProperty:
    radius := radiusProp.BoxRadius(session)
    // Do something with the values
}

The BoxRadius() method will return values in a form of BoxRadius structure. Another way of getting these values is by using the global function rui.GetRadius():

radius := rui.GetRadius(view, "view-id")
// Do something with the values

In this case there is no need to perform a type conversion and resolving a possible constant, everything is done behind the scene.

When setting "radius" property using Set() method or during the view construction we can pass values of multiple types like SizeUnit, BoxRadius, string and others, see View reference documentation for "radius" property to get more details.

Examples

// Setting radius attributes using a value of SizeUnit type 
view.Set(rui.Radius, rui.NewRadiusProperty(rui.Params{
        rui.X:           rui.Px(4),
        rui.Y:           rui.Px(4),
        rui.TopLeft:     rui.Px(8),
        rui.BottomRight: rui.Px(8),
    })
)

// Setting radius attributes using a value of BoxRadius type 
view.Set(rui.Radius, rui.BoxRadius{
    TopLeftX:     rui.Percent(10),
    TopLeftY:     rui.Percent(50),
    BottomRightX: rui.Percent(10),
    BottomRightY: rui.Percent(50),
})

// Setting radius attributes using a value of string type 
view.Set(rui.Radius, "2/4") // values without postfix will be treated as values in pixels

// Setting radius attributes during the view construction
view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint: "User name",
        // We can use other supported types as well
        rui.Radius: rui.NewRadiusProperty(rui.Params{
            rui.X:           rui.Px(4),
            rui.Y:           rui.Px(4),
            rui.TopLeft:     rui.Px(8),
            rui.BottomRight: rui.Px(8),
        }),
    }),
})

Besides the "radius" property we can use other convenient properties which are starting with "radius-" prefix:

Property	Type	Description
"radius-x"	`SizeUnit`	All corners horizontal radius
"radius-y"	`SizeUnit`	All corners vertical radius
"radius-bottom-left"	`SizeUnit`	Bottom left corner horizontal and vertical radius
"radius-bottom-left-x"	`SizeUnit`	Bottom left corner horizontal radius
"radius-bottom-left-y"	`SizeUnit`	Bottom left corner vertical radius
"radius-bottom-right"	`SizeUnit`	Bottom right corner horizontal and vertical radius
"radius-bottom-right-x"	`SizeUnit`	Bottom right corner horizontal radius
"radius-bottom-right-y"	`SizeUnit`	Bottom right corner vertical radius
"radius-top-left"	`SizeUnit`	Top left corner horizontal and vertical radius
"radius-top-left-x"	`SizeUnit`	Top left corner horizontal radius
"radius-top-left-y"	`SizeUnit`	Top left corner vertical radius
"radius-top-right"	`SizeUnit`	Top right corner horizontal and vertical radius
"radius-top-right-x"	`SizeUnit`	Top right corner horizontal radius
"radius-top-right-y"	`SizeUnit`	Top right corner vertical radius

To work with them we can use the Set() or Get() methods of the View object or the global methods with the same name. When setting such properties library first check whether the view has "radius" property set, if not it will create it and then update it's corresponding corner radius values.