{"id":19328218,"url":"https://github.com/jndisrupter/jnsegmentedcontrol","last_synced_at":"2025-08-29T05:06:52.857Z","repository":{"id":56916332,"uuid":"162305611","full_name":"JNDisrupter/JNSegmentedControl","owner":"JNDisrupter","description":"Segment Control","archived":false,"fork":false,"pushed_at":"2024-02-06T00:14:18.000Z","size":5805,"stargazers_count":7,"open_issues_count":2,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-08-19T02:47:09.679Z","etag":null,"topics":["cocoapods","collectionview","horizontal-scrolling","segment","segmented-controls","segmentedcontrol","swift","xcode"],"latest_commit_sha":null,"homepage":"","language":"Swift","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/JNDisrupter.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,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-12-18T15:07:12.000Z","updated_at":"2023-10-27T20:23:19.000Z","dependencies_parsed_at":"2025-04-22T21:42:54.733Z","dependency_job_id":null,"html_url":"https://github.com/JNDisrupter/JNSegmentedControl","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/JNDisrupter/JNSegmentedControl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JNDisrupter%2FJNSegmentedControl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JNDisrupter%2FJNSegmentedControl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JNDisrupter%2FJNSegmentedControl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JNDisrupter%2FJNSegmentedControl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JNDisrupter","download_url":"https://codeload.github.com/JNDisrupter/JNSegmentedControl/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JNDisrupter%2FJNSegmentedControl/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272631663,"owners_count":24967107,"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","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["cocoapods","collectionview","horizontal-scrolling","segment","segmented-controls","segmentedcontrol","swift","xcode"],"created_at":"2024-11-10T02:21:00.638Z","updated_at":"2025-08-29T05:06:52.835Z","avatar_url":"https://github.com/JNDisrupter.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JNSegmentedControl\n\n[![CI Status](https://img.shields.io/travis/ihmouda/JNSegmentedControl.svg?style=flat)](https://travis-ci.org/JNDisrupter/JNSegmentedControl)\n[![Version](https://img.shields.io/cocoapods/v/JNSegmentedControl.svg?style=flat)](https://cocoapods.org/pods/JNSegmentedControl)\n[![License](https://img.shields.io/cocoapods/l/JNSegmentedControl.svg?style=flat)](https://cocoapods.org/pods/JNSegmentedControl)\n[![Platform](https://img.shields.io/cocoapods/p/JNSegmentedControl.svg?style=flat)](https://cocoapods.org/pods/JNSegmentedControl)\n\n\n**JNSegmentedControl** is an easy to use, animated segmented control for iOS written in Swift.  \n**JNSegmentedControl** supports 3 main styles of segments: text only, image only, text with image on (under, above, before and after text).\n\n\n## Preview\n\n\u003cimg src=\"https://github.com/JNDisrupter/JNSegmentedControl/raw/master/Images/TextOnly.gif\" width=\"280\"/\u003e  \u003cimg src=\"https://github.com/JNDisrupter/JNSegmentedControl/raw/master/Images/ImageOnly.gif\" width=\"280\"/\u003e \u003cimg src=\"https://github.com/JNDisrupter/JNSegmentedControl/raw/master/Images/ImageUnderLabel.gif\" width=\"280\"/\u003e \u003cimg src=\"https://github.com/JNDisrupter/JNSegmentedControl/raw/master/Images/LabelUnderImage.gif\" width=\"280\"/\u003e \u003cimg src=\"https://github.com/JNDisrupter/JNSegmentedControl/raw/master/Images/ImageBeforeLabel.gif\" width=\"280\"/\u003e \u003cimg src=\"https://github.com/JNDisrupter/JNSegmentedControl/raw/master/Images/BadgeCount.gif\" width=\"280\"/\u003e\n\n## Requirements:\n\n- Xcode 9\n- iOS 9.0+\n- Swift 4.2+\n\n\n## Installation\n\nJNSegmentedControl is available through [CocoaPods](https://cocoapods.org). To install\nit, simply add the following line to your Podfile:\n\n```swift\npod 'JNSegmentedControl'\n```\n\n## Usage:\n\n- Import **JNSegmentedControl module**\n```swift\nimport JNSegmentedControl\n```\n\n- **Initalization:**\n    - ***Storyboard:***\n    Manually, you can add a UIView instance to your Xib, set **'JNSegmentedControl'** class and connect @IBOutlet reference.\n\n    - ***Programmatically:***\n    Init ‘JNSegmentedControl’ UIView instance programatically.\n\n    ```swift\n        let segmentedControlView = JNSegmentedCollectionView()\n        self.view.addSubview(segmentedControlView)\n    ```\n\n-  **Setup:**\n    - ***JNSegmentedControl Setup:***\n\n    ```swift\n        self.segmentedControlView.setup(\n            items: [NSAttributedString],\n            selectedItems: [NSAttributedString],\n            options: JNSegmentedCollectionOptions(),\n            badgeCounts: [Int]\n        )\n    ```\n    \n    To start with default options you can pass **(nil)** value to the options parameter.\n\n    ```swift\n        self.segmentedControlView.setup(\n            items: [NSAttributedString],\n            selectedItems: [NSAttributedString],\n            options: nil,\n            badgeCounts: []\n        )\n    ```\n\n    - ***Configuring items:***\n    \n    The Segmented Control items \u0026 selected items are array of **NSAttributedString**. In order to set items you need to provide an instance of **[NSAttributedString]**.\n\n    - ***Default Items:***\n        ```swift\n            var items = [NSAttributedString]()\n            let item  = NSAttributedString(string: “Default Item\", attributes: [])\n            items.append(item)\n        ```\n\n    - ***Selected Items:***\n        ```swift\n            var items = [NSAttributedString]()\n            let item  = NSAttributedString(string: “Selected Item\", attributes: [])\n            items.append(item)\n        ```\n\n- **Handling callback:**\n\n    ```swift\n        self.segmentedControlView.didSelectItem = { segment in\n            print(\"Selected item: \", segment)\n        }\n    ```\n\n- **Options Customization:**\n\n    - **backgroundColor**: Segmented control background color.\n    - **itemOptionType**: case value from **JNSegmentedCollectionItemOptionType** enumeration. \n    - **layoutType**: case value from **JNSegmentedCollectionLayoutType** enumeration.\n    - **verticalSeparatorOption**s: instance from **JNSegmentedCollectionItemVerticalSeparatorOptions** struct as vertical separator between segments.\n    - **scrollEnabled**: segmented control is scrolling enabled.\n    - **contentItemLayoutMargins**: Content item layout margins from Left and Right.\n\n    ```swift\n        JNSegmentedCollectionOptions(\n            backgroundColor: UIColor.white,\n            itemOptionType: JNSegmentedCollectionItemOptionType, \n            layoutType: JNSegmentedCollectionLayoutType.dynamic, \n            verticalSeparatorOptions: JNSegmentedCollectionItemVerticalSeparatorOptions? = nil,\n            scrollEnabled: true,\n            contentItemLayoutMargins: 10.0\n        )\n    ```\n\n- ***JNSegmented Collection Item Option Type:***\n    \n    The Segmented Control Item has two types of layout for items:\n  \n     - **single(option: JNSegmentedCollectionItemOptions):** Single option for all items.\n     - **multiple(options: [JNSegmentedCollectionItemOptions]):**  Multiple option for all items.\n    \n    ```swift\n        enum  JNSegmentedCollectionItemOptionType {\n            case single(option: JNSegmentedCollectionItemOptions) \n            case multiple(options: [JNSegmentedCollectionItemOptions]) \n        }\n    ```\n    \n- ***JNSegmented Collection Item Options:***\n\n    The Segmented Control has the ability to configure each item, that has the following settings:\n\n    -  **CornerRadius:**  Corner radius for container view.\n    -  **BackgroundColor:** Background color for container view.\n    -  **SelectedBackgroundColor:** Selected background color for container view.\n    -  **BadgeBackgroundColor:** Badge background color for badge count.\n    -  **SelectedBadgeBackgroundColor:** Selected badge background color for badge count.\n    -  **BadgeFont:** Badge count font.\n    -  **SelectedBadgeFont:** Selected badge count font.\n    -  **BadgeTextColor:** Badge count text color.\n    -  **SelectedBadgeTextColor:** Selected badge count text color.\n    \n    ```swift\n        JNSegmentedCollectionItemOptions(cornerRadius: 10.0, \n                backgroundColor: #colorLiteral(red: 0.456212461, green: 0.7545028329, blue: 0.8568375707, alpha: 1),\n                selectedBackgroundColor: #colorLiteral(red: 0.1984777451, green: 0.7956866622, blue: 1, alpha: 1),\n                badgeBackgroundColor: .white, \n                selectedBadgeBackgroundColor: .white,\n                badgeFont: UIFont.systemFont(ofSize: 16.0), \n                selectedBadgeFont: UIFont.systemFont(ofSize: 16.0), \n                badgeTextColor: .gray, selectedBadgeTextColor: .gray)\n    ``` \n    \n- ***JNSegmented Collection Layout Type:***\n    \n    The Segmented Control has two types of layout for items:\n  \n     - **Dynamic:** The width of each item will be according to its content.\n     - **Fixed:** The width of each item will be fixed according to max  visible Items.\n    \n    ```swift\n        enum  JNSegmentedCollectionLayoutType {\n            case dynamic\n            case fixed(maxVisibleItems: Int)\n        }\n    ```\n- ***JNSegmented Vertical Separator Options:***\n\n    The Segmented Control has the ability to show separator line between items, that has the following settings:\n\n    -  **HeigthRatio:**  Separator view height Ratio accroding to collection view height, max value is 1 and min is 0.\n    -  **Width:** Separator view width.\n    -  **Color:** Separator view background color.\n    \n    ```swift\n        JNSegmentedCollectionItemVerticalSeparatorOptions (\n            heigthRatio: 0.3, \n            width: 1.0,\n            color: UIColor.blue\n        )\n    ```\n\n## Example\n\nTo run the example project, clone the repo, and run `pod install` from the Example directory first.\n\n\n## Author\n\nJayel Zaghmoutt, Mohammad Nabulsi \u0026 Mohammad Ihmouda\n\n## License\n\nJNSegmentedControl is available under the MIT license. See the [LICENSE](https://github.com/JNDisrupter/JNSegmentedControl/blob/master/LICENSE) file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjndisrupter%2Fjnsegmentedcontrol","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjndisrupter%2Fjnsegmentedcontrol","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjndisrupter%2Fjnsegmentedcontrol/lists"}