ケルベロスさんのプログラミング\nけるぷろ

ネオプログラマのけるさんことケルベロスです

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

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
}
  1. widgetライブラリをインポートしてインスタンス
  2. widgetライブラリのnewTableViewでTableViewインスタンスを作成してディスプレイに表示
  3. widthとheightはdisplayサイズに合わせる
  4. Cellがレンダーされた時のリスナ登録 - 後述
  5. Cellがタップされた時のリスナ登録 - 後述
  6. 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
  1. myDataというtableインスタンスを作成(tableviewとは関係ないよ) -> https://docs.coronalabs.com/daily/api/library/table/index.html
  2. 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
  1. 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
  1. event.rowでどのセルがレンダーに入ったかを取得できます
  2. 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

参照

Tutorial: Advanced TableView tactics | Corona Labs