{"_id":"54ec584cc0c0ba1700386f8d","project":"5463e333447e0a100024a087","__v":2,"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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-02-24T10:54:04.636Z","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 ScrollView\"\n}\n[/block]\nDrag a ScrollView from the Widgets section onto the middle canvas.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/bPhelsS1KvK3uLAkCIbg_Screen-Shot-2015-02-24-at-10.45.23.png\",\n        \"Screen-Shot-2015-02-24-at-10.45.23.png\",\n        \"257\",\n        \"188\",\n        \"#f2120e\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Selecting The ScrollView\"\n}\n[/block]\nYou can select the ScrollView if it isn't already selected from the **Animation Editor** at the bottom. The ScrollView doesn't appear in the resources as it's part of the Scene or other object that you are using.\n\nScrollView are used as a way of grouping objects together. To add objects to your ScrollView you simply drag any object onto the panel. All transformations applied to the ScrollView will affect it's children as well.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/JhTy2M4R4a8o13L0c3UN_Screen-Shot-2015-02-24-at-10.46.48.png\",\n        \"Screen-Shot-2015-02-24-at-10.46.48.png\",\n        \"254\",\n        \"332\",\n        \"#1074f1\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Modifying The ScrollView\"\n}\n[/block]\nYou can change the ScrollView background file. Setting the ScrollView's background file can be done by double clicking on the section or dragging an image from the Resources section.\n\nThe scroll area is the total size of the of ScrollView, but the Size which is set in the Position and Size properties section is the viewable area of the ScrollView. ScrollView's allow the user to scroll through the group of items.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/AEM5pZApTOKIVcz5jmV7_Screen%20Shot%202015-02-24%20at%2010.47.03.png\",\n        \"Screen Shot 2015-02-24 at 10.47.03.png\",\n        \"356\",\n        \"565\",\n        \"#5083c4\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Accessing The ScrollView In Code\"\n}\n[/block]\nScrollView'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/8zN7ri5mS0ymKJ2UAcvM_Screen%20Shot%202015-02-24%20at%2010.47.11.png\",\n        \"Screen Shot 2015-02-24 at 10.47.11.png\",\n        \"353\",\n        \"81\",\n        \"#846157\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nTo access the ScrollView from a scene for example, in code it is simple. You either access it as a **Node** or cast it to a **ScrollView** allowing you to use **ScrollView** 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// ScrollView accessed as a node using it's name\\nNode *scrollView = rootNode->getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// ScrollView cast to a ScrollView using it's name\\ncocos2d::ui::ScrollView *scrollView = ( cocos2d::ui::ScrollView * )rootNode->getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// ScrollView accessed as a node using it's tag\\nNode *scrollView = rootNode->getChildByTag( 5 );\\n\\n// ScrollView cast to a ScrollView using it's tag\\ncocos2d::ui::ScrollView *scrollView = ( cocos2d::ui::ScrollView * )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 ScrollView by name\\nvar scrollView = rootNode.node.getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// get the ScrollView by tag\\nvar scrollView = 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 ScrollView methods.*","excerpt":"","slug":"containers-scrollview","type":"basic","title":"[Containers] ScrollView"}

[Containers] ScrollView


[block:api-header] { "type": "basic", "title": "Adding A ScrollView" } [/block] Drag a ScrollView from the Widgets section onto the middle canvas. [block:image] { "images": [ { "image": [ "https://files.readme.io/bPhelsS1KvK3uLAkCIbg_Screen-Shot-2015-02-24-at-10.45.23.png", "Screen-Shot-2015-02-24-at-10.45.23.png", "257", "188", "#f2120e", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Selecting The ScrollView" } [/block] You can select the ScrollView if it isn't already selected from the **Animation Editor** at the bottom. The ScrollView doesn't appear in the resources as it's part of the Scene or other object that you are using. ScrollView are used as a way of grouping objects together. To add objects to your ScrollView you simply drag any object onto the panel. All transformations applied to the ScrollView will affect it's children as well. [block:image] { "images": [ { "image": [ "https://files.readme.io/JhTy2M4R4a8o13L0c3UN_Screen-Shot-2015-02-24-at-10.46.48.png", "Screen-Shot-2015-02-24-at-10.46.48.png", "254", "332", "#1074f1", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Modifying The ScrollView" } [/block] You can change the ScrollView background file. Setting the ScrollView's background file can be done by double clicking on the section or dragging an image from the Resources section. The scroll area is the total size of the of ScrollView, but the Size which is set in the Position and Size properties section is the viewable area of the ScrollView. ScrollView's allow the user to scroll through the group of items. [block:image] { "images": [ { "image": [ "https://files.readme.io/AEM5pZApTOKIVcz5jmV7_Screen%20Shot%202015-02-24%20at%2010.47.03.png", "Screen Shot 2015-02-24 at 10.47.03.png", "356", "565", "#5083c4", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Accessing The ScrollView In Code" } [/block] ScrollView'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/8zN7ri5mS0ymKJ2UAcvM_Screen%20Shot%202015-02-24%20at%2010.47.11.png", "Screen Shot 2015-02-24 at 10.47.11.png", "353", "81", "#846157", "" ] } ] } [/block] To access the ScrollView from a scene for example, in code it is simple. You either access it as a **Node** or cast it to a **ScrollView** allowing you to use **ScrollView** methods along with **Node** methods. [block:code] { "codes": [ { "code": "Node *rootNode = CSLoader::createNode( \"Filepath to .csb file\" );\nthis->addChild( rootNode );\n\n// ScrollView accessed as a node using it's name\nNode *scrollView = rootNode->getChildByName( \"Name set in Cocos Studio\" );\n\n// ScrollView cast to a ScrollView using it's name\ncocos2d::ui::ScrollView *scrollView = ( cocos2d::ui::ScrollView * )rootNode->getChildByName( \"Name set in Cocos Studio\" );\n\n// ScrollView accessed as a node using it's tag\nNode *scrollView = rootNode->getChildByTag( 5 );\n\n// ScrollView cast to a ScrollView using it's tag\ncocos2d::ui::ScrollView *scrollView = ( cocos2d::ui::ScrollView * )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 ScrollView by name\nvar scrollView = rootNode.node.getChildByName( \"Name set in Cocos Studio\" );\n\n// get the ScrollView by tag\nvar scrollView = rootNode.node.getChildByTag( 5 );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] Note: *Cocos2d-JS doesn't require casting to use ScrollView methods.*