custom scroll bar width and height

Hi, i looked around the foruns and havent found a way to change the scroll bar width. it is not on the tutorial given by corona.
But on one of the posts Rob have given the adress to make hard coding.
Looking at the code i discovered that on the original code there is a easy way to change the width and height of the scroll bar.

So im writing here to show how to do it.
I suggest adding this funcionality to the oficial corona tutorial about widgets.

the original code, without changing, for modifying the bar is this:

local scrollBarOpt = {
  width = 20,
  height = 20,
  numFrames = 3,
  sheetContentWidth = 20,
  sheetContentHeight = 60
}
local scrollBarSheet = graphics.newImageSheet( “scrollBar.png”, scrollBarOpt )

 

 

scrollBarOptions = {
  sheet = scrollBarSheet,
  topFrame = 1,
  middleFrame = 2,
  bottomFrame = 3
}

 

 

_local scrollView = widget.newScrollView
{
  top = 100,
  left = 10,
  width = 300,
  height = 400,
  scrollWidth = 600,
  scrollHeight = 800,
  listener = scrollListener,
  scrollBarOptions = {
    sheet = scrollBarSheet,
    topFrame = 1,
    middleFrame = 2,
    bottomFrame = 3

}_

 

To change the bar width or height, just change this code here:

 

_local scrollView = widget.newScrollView
{
  top = 100,
  left = 10,
  width = 300,
  height = 400,
  scrollWidth = 600,
  scrollHeight = 800,
  listener = scrollListener,
  scrollBarOptions = {
    sheet = scrollBarSheet,
    topFrame = 1,
    middleFrame = 2,
    bottomFrame = 3

}_

 

adding two lines:

 

_local scrollView = widget.newScrollView
{
  top = 100,
  left = 10,
  width = 300,
  height = 400,
  scrollWidth = 600,
  scrollHeight = 800,
  listener = scrollListener,
  scrollBarOptions = {
    sheet = scrollBarSheet,
    topFrame = 1,
    middleFrame = 2,
    bottomFrame = 3
     frameWidth = 30 _

_     frameHeight = 2
}_

this way you can change the size of the bar any way you want it.

oh i wouls like to ask for one exlpanation to be added, it is how to make the bar sheet, i havent found it anywhere, and there is no samples about it.

thanks
my best regards.
hope to help someone.

ps.: sorry for my bad english. Im from brasil, if you can correct my way of writing i will be most thankfull.

Did not work for me…

Sorry i tested it with newTableView. It was my mistake. With scroll view it doesnt work. ill correct it.

1 Like

Found the problem.
The scrollView was not passing the values to the lib, so it wasant working. i had to add it on the widget i downloaded on gitHub from solar2d.
Ill pass the link to the files i modified to you.
If you want you can use it.
I dunno if solar2d forum forbids posting download links, but i hope it dont.
You have to download all 3 files for it to work, and use: local widget = require(“widget2”)

scrollView modified

1 Like

In case my download link stops working in the future i ill try to explain what i did.

What i did was to download the 3 files: widget.lua , widget_scrollview.lua and widget_momentumScrolling.lua and modify their names ading the number 2.

Then, what i did was add on the file “widget_scrollview2.lua” on line: 817
the lines:

frameWidth = customOptions.scrollBarOptions.frameWidth,
frameHeight = customOptions.scrollBarOptions.frameHeight

This:
Captura de Tela 2021-03-20 às 00.13.39

To this:
Captura de Tela 2021-03-20 às 00.14.02

and changed line 13 to: local _widget = require( “widget2” )

On the file: “widget2.lua” i chenged the line: 268 to: local _scrollView = require( “widget_scrollview2” )

And on the file: “widget_momentumScrolling2.lua” i changed the line: 669 to: local _widget = require( “widget2” )

i guess it was all for it to work.

Hope it helps.

Download link to the widget library given by solar2d:
https://github.com/coronalabs/framework-widget

2 Likes

Nice job, thanks!

1 Like