{"_id":"54ec5adad17b6d2300a54d75","__v":1,"category":{"_id":"54e3bef8464a9c3700f7ca67","pages":["54e3bfabe887c50d005ef6a0","54e3c35ee887c50d005ef6af","54e3c9ade887c50d005ef6b4","54e3ca68e887c50d005ef6b6","54e47d6a610dfd0d00b2a84a","54e487250e41ef2b00b996c2","54e48ec60e41ef2b00b996cd","54e5c6e8e662e60d00aff673","54e5d4efe0b92439007d6999","54e5dc0ae0b92439007d69aa","54e72c88e6e77d1900ed10fa","54e7391f3c1e111700d05749","54e73f1a3c1e111700d05757","54e863f5c8e0c00d007abffd","54e86704a64fba0d00846860","54e86abb32b0b00d00c960f2","54e9e881560f2b170087f1d0","54e9eca2a6f14f0d003e96b5","54e9f04d560f2b170087f1d3","54eb2041996da20d00e6d68e","54eb801659b1172100334ffc","54eb8101df7add210007b31a","54ec584cc0c0ba1700386f8d","54ec5adad17b6d2300a54d75","54ec5e077ab3172d00c01aae","54edf8ca1e4ee60d0018e89f","54edfbc0130818170073a16b","54edff0e8dafa7250027e659"],"project":"5463e333447e0a100024a087","__v":28,"version":"5463e333447e0a100024a08a","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-02-17T22:21:44.099Z","from_sync":false,"order":2,"slug":"cocos-studio","title":"Cocos Studio"},"user":"54639d06447e0a1000249f7f","version":{"_id":"5463e333447e0a100024a08a","project":"5463e333447e0a100024a087","__v":6,"createdAt":"2014-11-12T22:46:11.486Z","releaseDate":"2014-11-12T22:46:11.486Z","categories":["5463e333447e0a100024a08b","54645c365871e90800f50151","547b1c5a4366a708001b3b50","547b1cdf4366a708001b3b5a","54e3bef8464a9c3700f7ca67","54ec651d7ab3172d00c01ab7"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"project":"5463e333447e0a100024a087","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-02-24T11:04:58.785Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":999,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Adding A ListView\"\n}\n[/block]\nDrag a ListView from the Widgets section onto the middle canvas.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/wQ01qQ9pT6ih38f97i4U_Screen-Shot-2015-02-24-at-10.56.15.png\",\n        \"Screen-Shot-2015-02-24-at-10.56.15.png\",\n        \"256\",\n        \"188\",\n        \"#ed1511\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Selecting The ListView\"\n}\n[/block]\nYou can select the ListView if it isn't already selected from the **Animation Editor** at the bottom. The ListView doesn't appear in the resources as it's part of the Scene or other object that you are using.\n\nListView are used as a way of grouping objects together. To add objects to your ListView you simply drag any object onto the panel. All transformations applied to the ListView will affect it's children as well.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/P3MNxrAmRaChRajyR7Yb_Screen-Shot-2015-02-24-at-10.57.14.png\",\n        \"Screen-Shot-2015-02-24-at-10.57.14.png\",\n        \"251\",\n        \"334\",\n        \"#0f74f1\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Modifying The ListView\"\n}\n[/block]\nYou can change the ListView background file. Setting the ListView's background file can be done by double clicking on the section or dragging an image from the Resources section.\n\nTo hide the objects inside the ListView that are out of bounds you simply enable **Clipping**.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/9lSQqp0ITL20e1WI9KNO_Screen%20Shot%202015-02-24%20at%2010.57.25.png\",\n        \"Screen Shot 2015-02-24 at 10.57.25.png\",\n        \"353\",\n        \"583\",\n        \"#5a86d1\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Accessing The ListView In Code\"\n}\n[/block]\nListView's can be accessed via their **Name** or **Tag** which can be set in the **Properties** section.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/Ti4EJh1DRwyYdXz8AIOx_Screen%20Shot%202015-02-24%20at%2010.57.36.png\",\n        \"Screen Shot 2015-02-24 at 10.57.36.png\",\n        \"353\",\n        \"76\",\n        \"#7f8fad\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nTo access the ListView from a scene for example, in code it is simple. You either access it as a **Node** or cast it to a **ListView** allowing you to use **ListView** methods along with **Node** methods.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Node *rootNode = CSLoader::createNode( \\\"Filepath to .csb file\\\" );\\nthis->addChild( rootNode );\\n\\n// ListView accessed as a node using it's name\\nNode *listView = rootNode->getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// ListView cast to a ListView using it's name\\ncocos2d::ui::ListView *listView = ( cocos2d::ui::ListView * )rootNode->getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// ListView accessed as a node using it's tag\\nNode *listView = rootNode->getChildByTag( 5 );\\n\\n// ListView cast to a ListView using it's tag\\ncocos2d::ui::ListView *listView = ( cocos2d::ui::ListView * )rootNode->getChildByTag( 5 );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var rootNode = ccs.load( \\\"Filepath to .json file\\\" );\\nthis.addChild( rootNode.node );\\n\\n// get the ListView by name\\nvar listView = rootNode.node.getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// get the ListView by tag\\nvar listView = rootNode.node.getChildByTag( 5 );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nNote: *Cocos2d-JS doesn't require casting to use ListView methods.*","excerpt":"","slug":"containers-listview","type":"basic","title":"[Containers] ListView"}

[Containers] ListView


[block:api-header] { "type": "basic", "title": "Adding A ListView" } [/block] Drag a ListView from the Widgets section onto the middle canvas. [block:image] { "images": [ { "image": [ "https://files.readme.io/wQ01qQ9pT6ih38f97i4U_Screen-Shot-2015-02-24-at-10.56.15.png", "Screen-Shot-2015-02-24-at-10.56.15.png", "256", "188", "#ed1511", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Selecting The ListView" } [/block] You can select the ListView if it isn't already selected from the **Animation Editor** at the bottom. The ListView doesn't appear in the resources as it's part of the Scene or other object that you are using. ListView are used as a way of grouping objects together. To add objects to your ListView you simply drag any object onto the panel. All transformations applied to the ListView will affect it's children as well. [block:image] { "images": [ { "image": [ "https://files.readme.io/P3MNxrAmRaChRajyR7Yb_Screen-Shot-2015-02-24-at-10.57.14.png", "Screen-Shot-2015-02-24-at-10.57.14.png", "251", "334", "#0f74f1", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Modifying The ListView" } [/block] You can change the ListView background file. Setting the ListView's background file can be done by double clicking on the section or dragging an image from the Resources section. To hide the objects inside the ListView that are out of bounds you simply enable **Clipping**. [block:image] { "images": [ { "image": [ "https://files.readme.io/9lSQqp0ITL20e1WI9KNO_Screen%20Shot%202015-02-24%20at%2010.57.25.png", "Screen Shot 2015-02-24 at 10.57.25.png", "353", "583", "#5a86d1", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Accessing The ListView In Code" } [/block] ListView's can be accessed via their **Name** or **Tag** which can be set in the **Properties** section. [block:image] { "images": [ { "image": [ "https://files.readme.io/Ti4EJh1DRwyYdXz8AIOx_Screen%20Shot%202015-02-24%20at%2010.57.36.png", "Screen Shot 2015-02-24 at 10.57.36.png", "353", "76", "#7f8fad", "" ] } ] } [/block] To access the ListView from a scene for example, in code it is simple. You either access it as a **Node** or cast it to a **ListView** allowing you to use **ListView** methods along with **Node** methods. [block:code] { "codes": [ { "code": "Node *rootNode = CSLoader::createNode( \"Filepath to .csb file\" );\nthis->addChild( rootNode );\n\n// ListView accessed as a node using it's name\nNode *listView = rootNode->getChildByName( \"Name set in Cocos Studio\" );\n\n// ListView cast to a ListView using it's name\ncocos2d::ui::ListView *listView = ( cocos2d::ui::ListView * )rootNode->getChildByName( \"Name set in Cocos Studio\" );\n\n// ListView accessed as a node using it's tag\nNode *listView = rootNode->getChildByTag( 5 );\n\n// ListView cast to a ListView using it's tag\ncocos2d::ui::ListView *listView = ( cocos2d::ui::ListView * )rootNode->getChildByTag( 5 );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var rootNode = ccs.load( \"Filepath to .json file\" );\nthis.addChild( rootNode.node );\n\n// get the ListView by name\nvar listView = rootNode.node.getChildByName( \"Name set in Cocos Studio\" );\n\n// get the ListView by tag\nvar listView = rootNode.node.getChildByTag( 5 );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] Note: *Cocos2d-JS doesn't require casting to use ListView methods.*