Corona SDKでシンプルなTableView(List View)を実装する

2015-12-11
チュートリアル形式でコードを書いていきます

local widget = require 'widget' -- 1

local myList = widget.newTableView { -- 2
    width = display.contentWidth, -- 3 
    height = display.contentHeight, -- 3
    onRowRender = onRowRender, -- 4
    onRowTouch = onRowTouch, -- 5
    listener = scrollListener -- 6
}

widgetライブラリをインポートしてインスタンス化
widgetライブラリのnewTableViewでTableViewインスタンスを作成してディスプレイに表示
widthとheightはdisplayサイズに合わせる
Cellがレンダーされた時のリスナ登録 - 後述
Cellがタップされた時のリスナ登録 - 後述
TableViewがスクロールされた時のリスナ登録 - 後述

まだこれでは真っ白で何も表示されません

さらに以下を追記

local myData = {} -- 1
myData[1] = { name="Fred",    phone="555-555-1234" }
myData[2] = { name="Barney",  phone="555-555-1235" }
myData[3] = { name="Wilma",   phone="555-555-1236" }
myData[4] = { name="Betty",   phone="555-555-1237" }
myData[5] = { name="Pebbles", phone="555-555-1238" }
myData[6] = { name="BamBam",  phone="555-555-1239" }
myData[7] = { name="Dino",    phone="555-555-1240" }

for i = 1, #myData do
    myList:insertRow{ -- 2
        rowHeight = 60,
        isCategory = false,
        rowColor = { 1, 1, 1 },
        lineColor = { 0.90, 0.90, 0.90 }
    }
end

myDataというtableインスタンスを作成(tableviewとは関係ないよ) -> https://docs.coronalabs.com/daily/api/library/table/index.html
TableViewのメソッドTableView:insertRowでセルを挿入 isCategoryはiOSでいうそのセルをtableHeaderにするかどうか

これでセルの間の線が表示されてセルが作成されたことがわかります
しかしまだセルの内容がありません
そこでさっき登録したonRowRenderを実装します
その前に少し上のコードを修正します

for i = 1, #myData do
    myList:insertRow{ -- 2
        rowHeight = 60,
        isCategory = false,
        rowColor = { 1, 1, 1 },
        lineColor = { 0.90, 0.90, 0.90 },
        params = {                           -- 1
            name = myData[i].name,
            phone = myData[i].phone
        }
    }
end

insertRowの際にparamsというtableを設定することができます。そこにnameとphoneにパラメータをいれておきます

onRowRenderの実装です
注意する点としては先ほどのwidget.newTableviewでonRowRenderを登録するよりも上に下記コードを書いてください

local function onRowRender( event )
   local row = event.row
   local id = row.index

   row.bg = display.newRect( 0, 0, display.contentWidth, 59 )
   row.bg.anchorX = 0
   row.bg.anchorY = 0
   row.bg:setFillColor( 1 )
   row:insert( row.bg )

   if event.row.params then
       local name = event.row.params.name
       local phone = event.row.params.phone

       row.nameText = display.newText(name, 12, 0, native.systemFontBold, 18 )
       row.nameText.anchorX = 0
       row.nameText.anchorY = 0.5
       row.nameText:setFillColor( 0 )
       row.nameText.y = 20
       row.nameText.x = 42

       row.phoneText = display.newText(phone, 12, 0, native.systemFont, 18 )
       row.phoneText.anchorX = 0
       row.phoneText.anchorY = 0.5
       row.phoneText:setFillColor( 0.5 )
       row.phoneText.y = 40
       row.phoneText.x = 42

       row:insert( row.nameText )
       row:insert( row.phoneText )
   end

   return true
end -- onRowRender

event.rowでどのセルがレンダーに入ったかを取得できます
event.row.paramsでinsertRowした際のparamsを取得できます

これで一通りテーブルビュー(リストビュー)の表示ができたと思います
f:id:popeyekn:20151211161140p:plain
最後に一通りの実装したコードを載せておきます

local widget = require 'widget'

local onRowTouch
local scrollListener

local myData = {}
myData[1] = { name="Fred",    phone="555-555-1234" }
myData[2] = { name="Barney",  phone="555-555-1235" }
myData[3] = { name="Wilma",   phone="555-555-1236" }
myData[4] = { name="Betty",   phone="555-555-1237" }
myData[5] = { name="Pebbles", phone="555-555-1238" }
myData[6] = { name="BamBam",  phone="555-555-1239" }
myData[7] = { name="Dino",    phone="555-555-1240" }


local function onRowRender( event )
   local row = event.row
   local id = row.index

   row.bg = display.newRect( 0, 0, display.contentWidth, 59 )
   row.bg.anchorX = 0
   row.bg.anchorY = 0
   row.bg:setFillColor( 1 )
   row:insert( row.bg )

   if event.row.params then
       local name = event.row.params.name
       local phone = event.row.params.phone

       row.nameText = display.newText(name, 12, 0, native.systemFontBold, 18 )
       row.nameText.anchorX = 0
       row.nameText.anchorY = 0.5
       row.nameText:setFillColor( 0 )
       row.nameText.y = 20
       row.nameText.x = 42

       row.phoneText = display.newText(phone, 12, 0, native.systemFont, 18 )
       row.phoneText.anchorX = 0
       row.phoneText.anchorY = 0.5
       row.phoneText:setFillColor( 0.5 )
       row.phoneText.y = 40
       row.phoneText.x = 42

       row:insert( row.nameText )
       row:insert( row.phoneText )
   end

   return true
end -- onRowRender

local myList = widget.newTableView {
    width = display.contentWidth, 
    height = display.contentHeight,
    onRowRender = onRowRender,
    onRowTouch = onRowTouch,
    listener = scrollListener
}

for i = 1, #myData do
    myList:insertRow{
        rowHeight = 60,
        isCategory = false,
        rowColor = { 1, 1, 1 },
        lineColor = { 0.90, 0.90, 0.90 },
        params = {
            name = myData[i].name,
            phone = myData[i].phone
        },
    }
end