Corona Hand Tour Tutorial Widget:slider

Not much nonsense. As with other widgets in the Corona SDK, a custom slider for memory-saving considerations requires the use of imagesheet, and it cannot be scaled (scale) or changed in width and height by the. Width or. Height property.

The basic way we create a slider is:

Widget.newslider (Options)

The public parameters of the options are:

• ID: (optional) An optional string identifier that is given to the slider. The default value is "Widget_slider"
• X, y: (optional) Origin coordinates
• Left, top: (optional) The coordinates of the upper-right corner
• Orientation: (optional) The orientation of the slider, with an optional value of "horizontal" and "vertical". The default value is "Horizontal"
• Width and height of the height:slider. (width for horizontal,height for vertical)
• Value: (optional) indicates the initial percentage of the slider. The default is 50, which means that the slider handle is in the 50% position.
• Listener: (optional) This function is used to handle the interactive events of the slider. In this listener function, the values returned by Event.phase include "began", "moved" and "ended" in the same situation as touch. In addition, you can read the new value of the slider, Event.value.

How to read and write value:

• Property: Object.value
• Method: Object:setvalue ()

Visual customization

Slider widgets use Imagesheet to make visual customizations. As the following example shows, the slider needs 5 frames to assemble: a frame and an inner area. The outer frame includes the left hat (red), the middle block (green), and the Right hat (yellow). The inner area (orange) extends to fill the percentage of the current value. All the frames of the frame, and the inner frame, should share the width and height.

There is also a handle frame, whose size can be different from other frames. Note that all slider controls have restrictions on the boundaries at which the handles can be dragged in the middle area. For visual customization, the handle will stop at its center coordinate to reach both sides of the middle inner zone. For a horizontal slider, the handle should stop at the left and right borders of the inner area. The same rule applies to vertical sliders, except that the limit becomes the upper and lower bounds of the inner zone.

1 Horizontal Slider

• Leftframe: Frame number of the outer frame left hat
• Middleframe: Frame ordinal of the outer frame middle block
• Rightframe: Frame number of the outer frame right hat
• Fillframe: Frame number of the outer box fill area
• Framewidth,frameheight: Width and height of frame and intermediate fill area frames. All of these frames should share the same width and height
• Handleframe: Frame number of the handle frame
• Handlewidth, Handleheight: Width and height of the handle frame

2 Vertical Slider

• Topframe: Frame number of the hat on the outer frame
• Middleframe: Frame ordinal of the outer frame middle block
• BottomFrame: Frame number of the hat under the outer frame
• Fillverticalframe: Frame number of the outer box fill area
• Framewidth,frameheight: Width and height of frame and intermediate fill area frames. All of these frames should share the same width and height
• Handleframe: Frame number of the handle frame
• Handlewidth, Handleheight: Width and height of the handle frame

Examples of horizontal sliders:

LocalWidget =require("Widgets" )--Slider ListenerLocal functionSliderlistener (Event)Print("Slider at".. Event.value."%" )End--Create the widgetLocalslider =widget.newslider{Top= $, Left= -, Width= -, Value=Ten,--Start Slider at 10% (optional)Listener =Sliderlistener}

Examples of vertical sliders:

LocalWidget =require("Widgets" )--Slider ListenerLocal functionSliderlistener (Event)Print("Slider at".. Event.value."%" )End--Create the widgetLocalslider =widget.newslider{Top= $, Left= -, Orientation="Vertical", Height= $, Value=Ten,--Start Slider at 10% (optional)Listener =Sliderlistener}

Customized Examples:

LocalWidget =require("Widgets" )--Slider ListenerLocal functionSliderlistener (Event)Print("Slider at".. Event.value."%" )End--Image Sheet options and declarationLocalOptions ={Frames={{x=0, y=0, width= $, height= -}, {x= +, y=0, width= $, height= -}, {x= the, y=0, width= $, height= -}, {x=124, y=0, width= $, height= -}, {x=168, y=0, width= -, height= -}}, Sheetcontentwidth=232, Sheetcontentheight= -}LocalSlidersheet = Graphics.newimagesheet ("Slidersheet.png", Options)--Create the widgetLocalslider =widget.newslider{Sheet=Slidersheet, Leftframe=1, Middleframe=2, Rightframe=3, Fillframe=4, Framewidth= $, Frameheight= -, Handleframe=5, Handlewidth= -, Handleheight= -, Top= $, Left= -, Orientation="Horizontal", Width= -, Listener=Sliderlistener}

Corona Hand Tour Tutorial Widget:slider