listview - コロナのlistViewチュートリアル

Question

コロナのlistViewに関するチュートリアルはありますか？

コロナのサンプルコードでここに行きましたが、理解するのに苦労しています。コロナでlistViewを使用する方法を教えるリンクを誰かに教えてもらえますか？sqliteデータをlistViewに挿入するためのチュートリアルはさらに良いでしょう。

前もって感謝します。

Answer 1

ここで私はListViewについての非常に良いブログを見つけました。それはあなたにとって役立つと思います:)
またこのテーブルビューサンプルV0.13を見ることをお勧めします

Answer 2

最近、CoronaSDKに新しいウィジェットがあります。リストビューの場合、現在これを使用していますが、これは非常に簡単に構成できます。

Answer 3

これは古い学校（ウィジェットなし）ですが、私はそれを適応させ、必要なものに機能しました。 http://www.coronalabs.com/blog/2010/09/24/create-scrolling-list-views-with-text-and-graphics-in-coronasdk-ios-android-tutorial/

新しいmain.luaを作成した後、ストーリーボードを作成できるように次の変更を加えました。簡単なアイデアを得るために、それをコピーしてmain/luaに貼り付けることができるはずです。画像が欠落しているためにエラーが発生します（彼のコーヒーの例のより大きなバージョンを見つけました）。ダミーの画像を作成し、複製して6回名前を変更するだけです。とりあえず...：

local storyboard = require "storyboard"
local scene = storyboard.newScene()

--import the table view library
local tableView = require("tableView")

--import the button events library
local ui = require("ui")

display.setStatusBar( display.HiddenStatusBar ) 
_W=display.contentWidth
_H=display.contentHeight
--initial values
local screenOffsetW, screenOffsetH = _W - display.viewableContentWidth, _H - display.viewableContentHeight

local myList, backBtn, detailScreenText

function scene:createScene( event )
local group = self.view

local background = display.newRect(0, 0, _W, _H+80)
background:setFillColor(255, 255, 255)
background.y=_H*.5
group:insert(background)
--setup a destination for the list items
local detailScreen = display.newGroup()


--setup the table
local data = {}  --note: the declaration of this variable was moved up higher to broaden its scope


--setup functions to execute on touch of the list view items
function listButtonRelease( event )
    self = event.target
    local id = self.id
    print(self.id)
    local img2 = display.newImage(data[id].image2,_W*.5,_H*.25)
        img2.width=_W*.75
        img2.height=_H*.75
        detailBg = img2
        detailBg.x=_W*.5
        detailBg.y=_H*.375
      detailScreen:insert(detailBg) 
      detailScreenText = native.newTextBox( 0, _H*.785, _W, 160 )
      local fontSize = 18
      detailScreenText.font = native.newFont( "Arial",  fontSize )
detailScreenText.isEditable=false
detailScreenText.text = data[id].text
 detailScreen:insert(detailScreenText) 
 group:insert(detailScreen)
    transition.to(myList, {time=400, x=_W*-1, transition=easing.outExpo })
        transition.to(detailScreen, {time=400, x=0, transition=easing.outExpo })
        transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2) + screenOffsetW*.5 + 6, transition=easing.outExpo })
        transition.to(backBtn, {time=400, alpha=1 })

        delta, velocity = 0, 0

end

function backBtnRelease( event )
    print("back button released")
    transition.to(myList, {time=400, x=0, transition=easing.outExpo })
    transition.to(detailScreen, {time=400, x=_W, transition=easing.outExpo })
    transition.to(detailScreenText, {time=400, x=_W, transition=easing.outExpo })
    transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2)+backBtn.width, transition=easing.outExpo })
    transition.to(backBtn, {time=400, alpha=0 })

    delta, velocity = 0, 0
end

--setup each row as a new table, then add title, subtitle, and image
data[1] = {}
data[1].title = "Hot Coffee"
data[1].subtitle = "Grounds brewed in hot water"
data[1].image = "coffee1.png"
data[1].image2 = "coffee_1.png"
data[1].text="This is Hot Coffee line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8\nAnd this is Line9\nAnd this is Line10\nAnd this is Line11"

data[2] = {}
data[2].title = "Iced Coffee"
data[2].subtitle = "Chilled coffee with ice"
data[2].image = "coffee2.png"
data[2].image2 = "coffee_2.png"
data[2].text="This is Iced Coffee line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[3] = {}
data[3].title = "Espresso"
data[3].subtitle = "Hot water forced through"
data[3].image = "coffee3.png"
data[3].image2 = "coffee_3.png"
data[3].text="This is Espresso line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[4] = {}
data[4].title = "Cappuccino"
data[4].subtitle = "Espresso with frothy milk"
data[4].image = "coffee4.png"
data[4].image2 = "coffee_4.png"
data[4].text="This is Cappucino line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[5] = {}
data[5].title = "Latte"
data[5].subtitle = "More milk and less froth"
data[5].image = "coffee5.png"
data[5].image2 = "coffee_5.png"
data[5].text="This is Latte line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[6] = {}
data[6].title = "Americano"
data[6].subtitle = "Espresso with hot water"
data[6].image = "coffee6.png"
data[6].image2 = "coffee_6.png"
data[6].text="This is Americano line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"

for i=1, 6 do
    table.insert(data, data[i])
end

local topBoundary = display.screenOriginY + 40
local bottomBoundary = display.screenOriginY + 0

-- create the list of items
myList = tableView.newList{
    data=data, 
    default="listItemBg.png",
    --default="listItemBg_white.png",
    over="listItemBg_over.png",
    onRelease=listButtonRelease,
    top=topBoundary,
    bottom=bottomBoundary,
    --backgroundColor={ 255, 255, 255 },  --commented this out because we're going to add it down below
    callback = function( row )
                         local g = display.newGroup()

                         local img = display.newImage(row.image)
                         g:insert(img)
                         img.x = math.floor(img.width*0.5 + 6)
                         img.y = math.floor(img.height*0.5) 



                         local title =  display.newText( row.title, 0, 0, native.systemFontBold, 14 )
                         title:setTextColor(0, 0, 0)
                         --title:setTextColor(255, 255, 255)
                         g:insert(title)
                         title.x = title.width*0.5 + img.width + 6
                         title.y = 30

                         local subtitle =  display.newText( row.subtitle, 0, 0, native.systemFont, 12 )
                         subtitle:setTextColor(80,80,80)
                         --subtitle:setTextColor(180,180,180)
                         g:insert(subtitle)
                         subtitle.x = subtitle.width*0.5 + img.width + 6
                         subtitle.y = title.y + title.height + 6

group:insert(g)

                         return g   


                  end 
}


local function scrollToTop()
    myList:scrollTo(topBoundary-1)
end

--Setup the nav bar 
local navBar = ui.newButton{
    default = "navBar.png",
    onRelease = scrollToTop
}
navBar.x = _W*.5
navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)
group:insert(navBar)

local navHeader = display.newText("Coffee", 0, 0, native.systemFontBold, 16)
navHeader:setTextColor(255, 255, 255)
navHeader.x = _W*.5
navHeader.y = navBar.y
group:insert(navHeader)
--Setup the back button
backBtn = ui.newButton{ 
    default = "backButton.png", 
    over = "backButton_over.png", 
    onRelease = backBtnRelease
}
backBtn.x = math.floor(backBtn.width/2) + backBtn.width + screenOffsetW
backBtn.y = navBar.y 
backBtn.alpha = 0
group:insert(backBtn)
--Add a white background to the list.  
--It didn't move with the list when it appeared on the larger screen of the iPad.
local listBackground = display.newRect( 0, 0, myList.width, myList.height )
listBackground:setFillColor(255,255,255)
myList:insert(1,listBackground)
group:insert(listBackground)
end

function scene:exitScene( event )
storyboard.purgeScene("coffee")
storyboard.removeScene("coffee")
collectgarbage("collect")
collectgarbage()

end


-- Called prior to the removal of scene's "view" (display group)
function scene:destroyScene( event )

    ----print( "((destroying scene 1's view))" )
end

---------------------------------------------------------------------------------
-- END OF YOUR IMPLEMENTATION
---------------------------------------------------------------------------------

-- "createScene" event is dispatched if scene's view does not exist
scene:addEventListener( "createScene", scene )

-- "enterScene" event is dispatched whenever scene transition has finished
scene:addEventListener( "enterScene", scene )

-- "exitScene" event is dispatched before next scene's transition begins
scene:addEventListener( "exitScene", scene )

-- "destroyScene" event is dispatched before view is unloaded, which can be
-- automatically unloaded in low memory situations, or explicitly via a call to
-- storyboard.purgeScene() or storyboard.removeScene().
scene:addEventListener( "destroyScene", scene )

---------------------------------------------------------------------------------

return scene    

Answer 4

okay, so this one is state of the art, 2.0 compatible. it combines the best of the old school (pre-widget) code that I dropped above–based on Carlos' code and the list view code that comes in the Sample Code folder of the most recent version of Corona. it has the same image requirements as above to avoid errors. this can be saved as main.lua in the same folder as the suggested download above.

when you click a selection, you get a slide-in image and text explaining the image. the index also includes images like Carlos'... 

-- 
-- Abstract: List View sample app
--  
-- Version: 2.0
-- 
-- Sample code is MIT licensed, see http://www.coronalabs.com/links/code/license
-- Copyright (C) 2013 Corona Labs Inc. All Rights Reserved.
--
-- Demonstrates how to create a list view using the widget's Table View Library.
-- A list view is a collection of content organized in rows that the user
-- can scroll up or down on touch. Tapping on each row can execute a 
-- custom function.
--
-- Supports Graphics 2.0
------------------------------------------------------------

display.setStatusBar( display.HiddenStatusBar ) 

-- Import the widget library
local widget = require( "widget" )

-- create a constant for the left spacing of the row content
local LEFT_PADDING = 10

--Set the background to white
display.setDefault( "background", 1, 1, 1 )

--Create a group to hold our widgets & images
local widgetGroup = display.newGroup()
local _W = display.contentWidth
local _H = display.contentHeight
-- Create a background to go behind our tableView
--local background = display.newImage( widgetGroup, "bg.jpg", 0, 0, true )
--background.anchorX = 0; background.anchorY = 0        -- TopLeft anchor

-- The gradient used by the title bar
local titleGradient = {
    type = 'gradient',
    color1 = { 189/255, 203/255, 220/255, 255/255 }, 
    color2 = { 0, 0, 0, 1 },
    direction = "down"
}

-- Create toolbar to go at the top of the screen
local titleBar = display.newRect( display.contentCenterX, 0, display.contentWidth, 32 )
titleBar:setFillColor( titleGradient ) 
titleBar.y = display.screenOriginY + titleBar.contentHeight * 0.5

-- create embossed text to go on toolbar
local titleText = display.newEmbossedText( "Coffee", display.contentCenterX, titleBar.y, native.systemFontBold, 20 )

local data = {}

data[1] = {}
data[1].title = "Hot Coffee"
data[1].subtitle = "Grounds brewed in hot water"
data[1].image = "coffee1.png"
data[1].image2 = "coffee_1.png"
data[1].text="This is Hot Coffee line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8\nAnd this is Line9\nAnd this is Line10\nAnd this is Line11\nAnd this is Line12\nAnd this is Line13\nAnd this is Line14\nAnd this is Line11\nAnd this is Line15\nAnd this is Line11\nAnd this is Line16\nAnd this is Line11\nAnd this is Line17\nAnd this is Line11\nAnd this is Line18\nAnd this is Line11\nAnd this is Line19\nAnd this is Line11\nAnd this is Line19\nAnd this is Line11\nAnd this is Line20\n\n\n\n"

data[2] = {}
data[2].title = "Iced Coffee"
data[2].subtitle = "Chilled coffee with ice"
data[2].image = "coffee2.png"
data[2].image2 = "coffee_2.png"
data[2].text="This is Iced Coffee line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[3] = {}
data[3].title = "Espresso"
data[3].subtitle = "Hot water forced through"
data[3].image = "coffee3.png"
data[3].image2 = "coffee_3.png"
data[3].text="This is Espresso line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[4] = {}
data[4].title = "Cappuccino"
data[4].subtitle = "Espresso with frothy milk"
data[4].image = "coffee4.png"
data[4].image2 = "coffee_4.png"
data[4].text="This is Cappucino line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[5] = {}
data[5].title = "Latte"
data[5].subtitle = "More milk and less froth"
data[5].image = "coffee5.png"
data[5].image2 = "coffee_5.png"
data[5].text="This is Latte line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8"


data[6] = {}
data[6].title = "Americano"
data[6].subtitle = "Espresso with hot water"
data[6].image = "coffee6.png"
data[6].image2 = "coffee_6.png"
data[6].text="This is Americano line 1.\nAnd this is line2\nAnd this is Line3\nAnd this is Line4\nAnd this is Line5\nAnd this is Line6\nAnd this is Line7\nAnd this is Line8\n\n\n"
for i=1, 6 do
    table.insert(data, data[i])
end
-- create a shadow underneath the titlebar (for a nice touch)
local shadow = display.newImage( "shadow.png" )
shadow.anchorX = 0; shadow.anchorY = 0      -- TopLeft anchor
shadow.x, shadow.y = 0, titleBar.y + titleBar.contentHeight * 0.5
shadow.xScale = 320 / shadow.contentWidth
shadow.alpha = 0.45

--Text to show which item we selected
local itemSelected = native.newTextBox( 20, _H*.75, _W, 160 )
local fontSize = 20
itemSelected.font = native.newFont( "Arial",  fontSize )
itemSelected.isEditable=false
--itemSelected:setFillColor(0,0,0)
itemSelected.x = display.contentWidth + itemSelected.contentWidth * 0.5
itemSelected.y = display.contentCenterY+200
widgetGroup:insert( itemSelected )

-- Forward reference for our back button & tableview
local backButton, list

-- Handle row rendering
local function onRowRender( event )
    local phase = event.phase
    local row = event.row
    local id = row.index
    -- in graphics 2.0, the group contentWidth / contentHeight are initially 0, and expand once elements are inserted into the group.
    -- in order to use contentHeight properly, we cache the variable before inserting objects into the group

    local groupContentHeight = row.contentHeight

    local rowTitle = display.newText( row, data[id].title,0,0, native.systemFontBold, 16 )
    rowTitle:setFillColor(0,0,0)
    -- in Graphics 2.0, the row.x is the center of the row, no longer the top left.
    rowTitle.x = LEFT_PADDING + 80

    -- we also set the anchorX of the text to 0, so the object is x-anchored at the left
    rowTitle.anchorX = 0

    rowTitle.y = groupContentHeight * 0.25

    local rowSubTitle = display.newText( row, data[id].subtitle,0,0, native.systemFontBold, 12 )
    rowSubTitle:setFillColor(.2,.2,.2)
    -- in Graphics 2.0, the row.x is the center of the row, no longer the top left.
    rowSubTitle.x = LEFT_PADDING + 80

    -- we also set the anchorX of the text to 0, so the object is x-anchored at the left
    rowSubTitle.anchorX = 0

    rowSubTitle.y = groupContentHeight * 0.75

    local rowArrow = display.newImage( row, "rowArrow.png",false )
    rowArrow.x = row.contentWidth - LEFT_PADDING
    rowArrow.y = groupContentHeight * 0.5

    -- we set the image anchorX to 1, so the object is x-anchored at the right
    rowArrow.anchorX = 1
    --data[id]=row.index
    local itemImage = display.newImage( row, data[id].image,0,0)
    itemImage.x = 100
    itemImage.y = groupContentHeight * 0.5

    -- we set the image anchorX to 1, so the object is x-anchored at the right
    itemImage.anchorX = 1

end

-- Hande row touch events
local function onRowTouch( event )
    local phase = event.phase
    local row = event.target
    local id = row.index

    if "press" == phase then
        print( "Pressed row: " .. row.index )

    elseif "release" == phase then
        -- Update the item selected text
        itemSelected.text = data[id].text
        itemSelected:toFront()
        backButton:toFront()
        --Transition out the list, transition in the item selected text and the back button
img = display.newImage(data[id].image2,0,0)
print(data[id].image2)
img.width=img.width*.45
img.height=img.height*.45
img.x= display.contentCenterX
img.y= _H*.45
widgetGroup:insert( img )
        -- The table x origin refers to the center of the table in Graphics 2.0, so we translate with half the object's contentWidth
        transition.to( list, { x = - list.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
        transition.to( itemSelected, { x = display.contentCenterX, time = 400, transition = easing.outExpo } )
        transition.to( img, { x = display.contentCenterX, time = 400, transition = easing.outExpo } )
        transition.to( backButton, { alpha = 1, time = 400, transition = easing.outQuad } )

        print( "Tapped and/or Released row: " .. row.index )
    end
end

-- Create a tableView
list = widget.newTableView
{
    top = 38,
    width = 320, 
    height = 448,
    hideBackground = true,
    maskFile = "mask-320x448.png",
    onRowRender = onRowRender,
    onRowTouch = onRowTouch,
}

--Insert widgets/images into a group
widgetGroup:insert( list )
widgetGroup:insert( titleBar )
widgetGroup:insert( titleText )
widgetGroup:insert( shadow )


--Handle the back button release event
local function onBackRelease()
    --Transition in the list, transition out the item selected text and the back button

    -- The table x origin refers to the center of the table in Graphics 2.0, so we translate with half the object's contentWidth
    transition.to( list, { x = list.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
    transition.to( itemSelected, { x = display.contentWidth + itemSelected.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
    transition.to( img, { x = display.contentWidth + img.width, time = 400, transition = easing.outExpo } )
    transition.to( backButton, { alpha = 0, time = 400, transition = easing.outQuad } )
end

--Create the back button
backButton = widget.newButton
{
    width = 298,
    height = 56,
    label = "Back", 
    labelYOffset = - 1,
    onRelease = onBackRelease
}
backButton.alpha = 0
backButton.x = display.contentCenterX
backButton.y = backButton.contentHeight
widgetGroup:insert( backButton )


for i = 1, 12 do

    local isCategory = false
    local rowHeight = 90
    local rowColor = { default={ 1, 1, 1 }, over={ 1, 0.5, 0, 0.2 } }
    local lineColor = { 0.5, 0.5, 0.5 }

    -- Make some rows categories
   --[[ if ( i == 1 or i == 21 ) then
        isCategory = true
        rowHeight = 40
        rowColor = { default={ 0.8, 0.8, 0.8, 0.8 } }
        lineColor = { 1, 0, 0 }
    end--]]

    -- Insert a row into the tableView
    list:insertRow(
        {
            isCategory = isCategory,
            rowHeight = rowHeight,
            rowColor = rowColor,
            lineColor = lineColor
        }
    )
end