{"id":13730682,"url":"https://github.com/MdIqubal/Recyclable-Scroll-Rect","last_synced_at":"2025-05-08T03:31:33.951Z","repository":{"id":54216842,"uuid":"236678381","full_name":"MdIqubal/Recyclable-Scroll-Rect","owner":"MdIqubal","description":"Recyclable Scroll Rect reuses or recycles the least number of cells required to fill the viewport. As a result a huge number of items can be shown in the list without any performance hit.","archived":false,"fork":false,"pushed_at":"2024-02-11T09:41:40.000Z","size":274,"stargazers_count":534,"open_issues_count":9,"forks_count":68,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-08-04T02:09:45.636Z","etag":null,"topics":["unity","unity3d"],"latest_commit_sha":null,"homepage":"https://www.polyandcode.com","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MdIqubal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-01-28T07:13:48.000Z","updated_at":"2024-07-31T21:34:04.000Z","dependencies_parsed_at":"2024-01-11T14:25:57.213Z","dependency_job_id":null,"html_url":"https://github.com/MdIqubal/Recyclable-Scroll-Rect","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MdIqubal%2FRecyclable-Scroll-Rect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MdIqubal%2FRecyclable-Scroll-Rect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MdIqubal%2FRecyclable-Scroll-Rect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MdIqubal%2FRecyclable-Scroll-Rect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MdIqubal","download_url":"https://codeload.github.com/MdIqubal/Recyclable-Scroll-Rect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224695657,"owners_count":17354446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["unity","unity3d"],"created_at":"2024-08-03T02:01:17.984Z","updated_at":"2024-11-14T21:31:29.449Z","avatar_url":"https://github.com/MdIqubal.png","language":"C#","funding_links":[],"categories":["Open Source Repositories","C#","Open Source Packages"],"sub_categories":["UI"],"readme":"# Recyclable Scroll Rect\n\nhttps://twitter.com/polyandcode\u003cbr\u003e\nhttps://polyandcode.com || https://www.facebook.com/Polyandcode || https://www.instagram.com/polyandcode/\n\n### Available [here](https://assetstore.unity.com/packages/tools/gui/recyclable-scroll-rect-178560) on the Unity Asset Store\n\n ## Summary\n\u003cb\u003eUPDATE : Recyclable Scroll Rect now supports Horizontal and Grid layout.\u003c/b\u003e\u003cbr\u003e\u003cbr\u003e\nUsing the default Scroll-Rect to create lists with a huge number of items results in a laggy performance. Especially when creating a list with hundreds or thousands of items, it becomes impossible to use the Scroll Rect with the default approach i.e instantiating that many items. \u003ci\u003eRecyclable Scroll Rect\u003c/i\u003e reuses or recycles the least number of cells required to fill the viewport. As a result, a huge number of items can be shown in the list without any performance hit. Vertical, Horizontal and Grid layouts are supported. \n\n\n\n| Recycling  | Comparison with Default approach |\n| ------------- | ------------- |\n| ![Imgur Image](https://imgur.com/8LaILL7.gif)  | ![Imgur Image](https://imgur.com/pm9AmBH.gif) |\n\n## Quickstart Guide :\n\n \u003cb\u003eCheck the Demo scenes for a complete example \u003c/b\u003e \u003cbr\u003e\u003cbr\u003e\n The usage and structure are similar to Native iOS \u003ci\u003eTableViewController\u003c/i\u003e. There are mainly two parts in setting up a Recyclable Scroll Rect; Prototype cell and DataSource. Following are the steps to set up a \u003ci\u003eRecyclable Scroll Rect\u003c/i\u003e in detail:\n \n1. Recyclable Scroll View\n2. Prototype cell\n3. Cell class\n4. Datasource\n\n\n\u003cb\u003e1. Recyclable Scroll View\u003c/b\u003e: You can create a \u003ci\u003eRecyclable Scroll View\u003c/i\u003e by going to \u003ci\u003eCreate -\u003e UI -\u003e Recyclable Scroll View\u003c/i\u003e.\n\u003cimg src=\"https://imgur.com/Bxjdvlw.gif\" width=\"400\" align=\"centre\"\u003e\n\u003cbr\u003e\n\n\u003cb\u003e2. Prototype Cell\u003c/b\u003e: A Prototype cell is basically the cell layout for your list. A prototype cell can be in the hierarchy as the content's child or it can be a prefab. Don’t worry about disabling it if it is present in the hierarchy, it will not show up in play mode. The prototype cell must be assigned to the \u003ci\u003eRecyclable Scroll Rect\u003c/i\u003e\u003cbr\u003e\n\u003cimg src=\"https://imgur.com/v5e4nG7.png\" width=\"300\" align=\"centre\"\u003e\n\n\n\u003cb\u003e3. Cell class\u003c/b\u003e: Once you create your desired Prototype cell, assign it to the \u003ci\u003eRecyclable Scroll Rect\u003c/i\u003e component. Now you will need to create a \u003ci\u003eCell\u003c/i\u003e script and attach it to the Prototype Cell. This script must be a \u003ci\u003eMonobehaviour\u003c/i\u003e implementing \u003ci\u003eICell\u003c/i\u003e interface. The purpose of a Cell script is to configure the cell as the list is scrolled or updated. You must keep reference to the UI items that are required to be updated according to your data source.\n\u003cb\u003eCheck \u003ci\u003eDemoCell\u003c/i\u003e class for reference\u003c/b\u003e\n```c#\npublic class DemoCell : MonoBehaviour, ICell\n{\n    //UI\n    public Text nameLabel;\n    public Text genderLabel;\n    public Text idLabel;\n\n    //Model\n    private ContactInfo _contactInfo;\n    private int _cellIndex;\n\n    //This is called from the SetCell method in DataSource\n    public void ConfigureCell(ContactInfo contactInfo,int cellIndex)\n    {\n        _cellIndex = cellIndex;\n        _contactInfo = contactInfo;\n\n        nameLabel.text = contactInfo.Name;\n        genderLabel.text = contactInfo.Gender;\n        idLabel.text = contactInfo.id;\n    }\n}\n\n```\n\n\u003cb\u003e 4. Data source\u003c/b\u003e: The next step is to create a Data source class. A Data source is responsible for data-related operations in the \u003ci\u003eRecyclable Scroll Rect\u003c/i\u003e. These are the number of items in the list and how a cell should be configured according to the data. To create a Data source, implement the \u003ci\u003eIRecyclableScrollRectDataSource\u003c/i\u003e interface and its methods :\u003cbr\u003e\n  \u003cb\u003e• GetItemCount\u003c/b\u003e: This method tells \u003ci\u003eRecyclable Scroll Rect\u003c/i\u003e the length of the List. \u003cbr\u003e\n  \u003cb\u003e• SetCell \u003c/b\u003e: This method is responsible for configuring the cell UI according to your data. A cell is received as a parameter in this method with its index in the list. Using these, the necessary UI configuration can be done for the cell. The received cell is of \u003ci\u003eICell\u003c/i\u003e type. It must be cast to the implemented Cell type before using.\u003cbr\u003e\u003cbr\u003e\n  After the creation of a Cell and Data source, the last step is to assign the Data source instance to the \u003ci\u003eRecyclable Scroll Rect\u003c/i\u003e. The assignment must be done in \u003ci\u003eAwake\u003c/i\u003e or before the \u003ci\u003eRecyclable Scroll Rect\u003c/i\u003e's Start method (Check \u003ci\u003eothers\u003c/i\u003e section below for details on self-initialization).\u003cbr\u003e\n\u003cb\u003eCheck \u003ci\u003eRecyclableScrollerDemo\u003c/i\u003e class for reference\u003c/b\u003e\n```c#\npublic class RecyclableScrollerDemo : MonoBehaviour, IRecyclableScrollRectDataSource\n{\n    [SerializeField]\n    RecyclableScrollRect _recyclableScrollRect;\n\n    [SerializeField]\n    private int _dataLength;\n\n    //Dummy data List\n    private List\u003cContactInfo\u003e _contactList = new List\u003cContactInfo\u003e();\n\n    //Recyclable scroll rect's data source must be assigned in Awake.\n    private void Awake()\n    {\n        InitData();\n        _recyclableScrollRect.DataSource = this;\n    }\n\n    #region DATA-SOURCE\n\n    /// \u003csummary\u003e\n    /// Data source method. return the list length.\n    /// \u003c/summary\u003e\n    public int GetItemCount()\n    {\n        return _contactList.Count;\n    }\n\n    /// \u003csummary\u003e\n    /// Called for a cell every time it is recycled\n    /// Implement this method to do the necessary cell configuration.\n    /// \u003c/summary\u003e\n    public void SetCell(ICell cell, int index)\n    {\n        //Casting to the implemented Cell\n        var item = cell as DemoCell;\n        item.ConfigureCell(_contactList[index],index);\n    }\n    \n    #endregion\n}\n```\n \n \u003cb\u003e Others:\u003c/b\u003e \u003cbr\u003e\n \u003cb\u003eSelf-Initiaze\u003c/b\u003e: The \u003ci\u003eRecyclable Scroll Rect\u003c/i\u003e initializes on its own in its \u003ci\u003eStart\u003c/i\u003e method. If you wish to initialize it yourself you can turn off the component's \u003ci\u003eself initialize\u003c/i\u003e property and call the \u003ci\u003eInitialize\u003c/i\u003e method whenever required. Make sure the Data-source is assigned before initializing.\u003cbr\u003e\u003cbr\u003e\n \u003cb\u003eReloading Data\u003c/b\u003e: If a new data-source is asigned after initialization, call the \u003ci\u003eReloadData()\u003c/i\u003e function. Alternatively \u003ci\u003eReloadData(IRecyclableScrollRectDataSource dataSource)\u003c/i\u003e can also be used for assigning the data-source and reloading data.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMdIqubal%2FRecyclable-Scroll-Rect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMdIqubal%2FRecyclable-Scroll-Rect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMdIqubal%2FRecyclable-Scroll-Rect/lists"}