Scrollview as Tableview in Corona SDK using Lua

Introduction : Generally to display data in tabular format we use tableview, whereas the same thing can also be achieved using scrollview for mobile devices. Actually scrollview is used to display large content where we can scroll the content but it can also display data in tabular format. All we need to put our custom made rows inside it.

Description : Lets have an example where we have several row items and we need to put them in tabular format displaying with different rows for a mobile application using Corona SDK which will be scrolled vertically.

To achieve our goal, I will use widget library to render scrollview on screen and underscore library to loop row items in order to generate rows.

CODE BLOCK :
main.lua
——–

-- Initialize widget library
local widget = require( "widget" )

-- Initialize underscore library
local _ = require ('underscore');

-- Create the scrollview widget
local tblScrollView = widget.newScrollView
{
top = 0, -- top position for scrollview
left = 0, -- Set left position
width = display.contentWidth,
height = display.contentHeight,
horizontalScrollDisabled = true -- To block horizontal scroll, Default is false
}

local rowHeight = 200
local textYpos = nil
local rowView = nil
local rowText = nil

-- Function to create row
local function createRow( data )
-- Created row background
rowView = display.newRect( 0, ( rowHeight * data.rowNum ), display.contentWidth, rowHeight )
rowView.strokeWidth = 5; -- Set border width
rowView:setFillColor( 0.3 ) -- Set background color
rowView:setStrokeColor( 1, 0, 0 ) -- Set border color
rowView.anchorX, rowView.anchorY = 0, 0 -- Set reference point for row

textYpos = ( ( rowHeight * data.rowNum ) + ( rowHeight / 2 ) )

-- Define text label
rowText = display.newText( data.rowItem, 50, textYpos, native.systemFontBold, 40 )
rowText.anchorX = 0 -- Set reference point

-- Inserted row background and row text
tblScrollView:insert( rowView )
tblScrollView:insert( rowText )
end

-- Row items
local rowList = {
{ rowNum = 0, rowItem = "Row 1"},
{ rowNum = 1, rowItem = "Row 2"},
{ rowNum = 2, rowItem = "Row 3"},
{ rowNum = 3, rowItem = "Row 4"},
{ rowNum = 4, rowItem = "Row 5"},
{ rowNum = 5, rowItem = "Row 6"},
{ rowNum = 6, rowItem = "Row 7"},
{ rowNum = 7, rowItem = "Row 8"},
{ rowNum = 8, rowItem = "Row 9"},
{ rowNum = 9, rowItem = "Row 10"},
{ rowNum = 10, rowItem = "Row 11"},
{ rowNum = 11, rowItem = "Row 12"}
}

— Loop for creating rows
_.each(rowList, createRow);

On above code I have initialized a scrollview (“tblScrollView”) and then define a function which will create individual rows having a background with some border to differentiate among each other. Also added text label to display row number. Then assign an item list (“rowList”) representing each rows.
Finally called each method of underscore to call “createRow” function for each items of “rowList”. This only.
After running it on device we will have scrollview which will be looking as like as scrollview on screen.

Summary : So here we have learned the way to use scrollview as tableview in Corona SDK using lua. In my next blog I will implement click event on each row to identify them separately. So just follow me 🙂

THAT’S IT

Advertisements