### Instantiate Various CHIPageControl Styles Source: https://context7.com/chililabs/chipagecontrol/llms.txt Provides examples of how to instantiate several CHIPageControl styles, including Chimayo, Fresno, Jaloro, and Paprika. All these styles conform to the `CHIBasePageControl` API, allowing for consistent usage across different visual presentations. ```swift // CHIPageControlChimayo let chimayoControl = CHIPageControlChimayo(frame: .zero) // CHIPageControlFresno let fresnoControl = CHIPageControlFresno(frame: .zero) // CHIPageControlJaloro let jaloroControl = CHIPageControlJaloro(frame: .zero) // CHIPageControlPaprika let paprikaControl = CHIPageControlPaprika(frame: .zero) // All styles share the same API from CHIBasePageControl ``` -------------------------------- ### Install CHIPageControl using CocoaPods Source: https://context7.com/chililabs/chipagecontrol/llms.txt This snippet shows how to install the CHIPageControl library, including all animation styles or individual styles, using CocoaPods. Ensure you have CocoaPods installed and configured in your project. ```ruby # Install all page control styles pod 'CHIPageControl', '~> 0.2.1' # Or install individual styles pod 'CHIPageControl/Aji' pod 'CHIPageControl/Aleppo' pod 'CHIPageControl/Chimayo' pod 'CHIPageControl/Fresno' pod 'CHIPageControl/Jalapeno' pod 'CHIPageControl/Jaloro' pod 'CHIPageControl/Paprika' pod 'CHIPageControl/Puya' ``` -------------------------------- ### Swift Package Manager Installation Source: https://github.com/chililabs/chipagecontrol/blob/master/README.md Details the steps for adding CHIPageControl as a dependency using the Swift Package Manager. It includes the necessary `Package.swift` configuration and the command-line instruction to build the project, enabling integration into Swift projects that utilize SPM for dependency management. ```swift dependencies: [ .package(url: "https://github.com/ChiliLabs/CHIPageControl.git", .branch("master")) ] $ swift build ``` -------------------------------- ### CHIPageControlPuya - Multiple Elements Animation Source: https://context7.com/chililabs/chipagecontrol/llms.txt Shows an example of CHIPageControlPuya, which features complex multi-element animations for its indicators. It supports customization of the number of pages, radius, padding, and colors. The `set(progress:animated:)` method is used for animating transitions. ```swift let puyaControl = CHIPageControlPuya(frame: CGRect(x: 50, y: 250, width: 200, height: 30)) puyaControl.numberOfPages = 6 puyaControl.radius = 4 puyaControl.padding = 6 puyaControl.tintColor = .systemPurple.withAlphaComponent(0.4) puyaControl.currentPageTintColor = .systemPurple view.addSubview(puyaControl) // Complex multi-element animation style puyaControl.set(progress: 3, animated: true) ``` -------------------------------- ### CocoaPods Installation for CHIPageControl Source: https://github.com/chililabs/chipagecontrol/blob/master/README.md Provides the Ruby code snippet for integrating CHIPageControl into an iOS project using CocoaPods. It shows how to add the main library or individual page control components to the `Podfile` and specifies the versioning. This is a common method for dependency management in iOS development. ```ruby pod 'CHIPageControl', '~> 0.1.3' # individual page control pod 'CHIPageControl/Aji' pod 'CHIPageControl/Aleppo' pod 'CHIPageControl/Chimayo' pod 'CHIPageControl/Fresno' pod 'CHIPageControl/Jalapeno' pod 'CHIPageControl/Jaloro' pod 'CHIPageControl/Paprika' pod 'CHIPageControl/Puya' ``` -------------------------------- ### Implement Onboarding Flow with UIScrollView and CHIPageControlJalapeno in Swift Source: https://context7.com/chililabs/chipagecontrol/llms.txt Provides a complete example of integrating CHIPageControlJalapeno with a UIScrollView for an onboarding experience in Swift. The `OnboardingViewController` sets up a scroll view for paging, configures the page control, and creates individual pages. Delegate methods handle scrolling updates to synchronize the page control's progress and allow user interaction with the page control to navigate the scroll view. ```swift import UIKit import CHIPageControl class OnboardingViewController: UIViewController { private let scrollView = UIScrollView() private let pageControl = CHIPageControlJalapeno() private let pages = ["Welcome", "Features", "Setup", "Done"] override func viewDidLoad() { super.viewDidLoad() setupScrollView() setupPageControl() createPages() } private func setupScrollView() { scrollView.isPagingEnabled = true scrollView.showsHorizontalScrollIndicator = false scrollView.delegate = self scrollView.frame = view.bounds view.addSubview(scrollView) } private func setupPageControl() { pageControl.numberOfPages = pages.count pageControl.radius = 6 pageControl.padding = 10 pageControl.tintColor = .white.withAlphaComponent(0.4) pageControl.currentPageTintColor = .white pageControl.enableTouchEvents = true pageControl.delegate = self pageControl.translatesAutoresizingMaskIntoConstraints = false view.addSubview(pageControl) NSLayoutConstraint.activate([ pageControl.centerXAnchor.constraint(equalTo: view.centerXAnchor), pageControl.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -30) ]) } private func createPages() { scrollView.contentSize = CGSize( width: view.bounds.width * CGFloat(pages.count), height: view.bounds.height ) for (index, title) in pages.enumerated() { let pageView = UIView(frame: CGRect( x: view.bounds.width * CGFloat(index), y: 0, width: view.bounds.width, height: view.bounds.height )) pageView.backgroundColor = UIColor(hue: CGFloat(index) / CGFloat(pages.count), saturation: 0.6, brightness: 0.9, alpha: 1.0) let label = UILabel() label.text = title label.font = .systemFont(ofSize: 32, weight: .bold) label.textAlignment = .center label.frame = pageView.bounds pageView.addSubview(label) scrollView.addSubview(pageView) } } } extension OnboardingViewController: UIScrollViewDelegate { func scrollViewDidScroll(_ scrollView: UIScrollView) { let pageWidth = scrollView.frame.width let progress = scrollView.contentOffset.x / pageWidth pageControl.progress = Double(progress) } } extension OnboardingViewController: CHIBasePageControlDelegate { func didTouch(pager: CHIBasePageControl, index: Int) { let targetOffset = CGPoint(x: CGFloat(index) * scrollView.frame.width, y: 0) scrollView.setContentOffset(targetOffset, animated: true) } } ``` -------------------------------- ### Configure CHIPageControl using Interface Builder Source: https://context7.com/chililabs/chipagecontrol/llms.txt This guide explains how to set up CHIPageControl within Interface Builder by setting a UIView's custom class and configuring its IBInspectable properties in the Attributes Inspector. It also shows connecting an IBOutlet and setting colors in `viewDidLoad`. ```swift // 1. Drop a UIView onto your storyboard // 2. Set the custom class to CHIPageControlAji (or any other style) // 3. Configure IBInspectable properties in the Attributes Inspector: // - numberOfPages: 5 // - radius: 4 // - padding: 6 // - inactiveTransparency: 0.4 // - hidesForSinglePage: true // - borderWidth: 0 // 4. Connect IBOutlet @IBOutlet weak var pageControl: CHIPageControlAji! override func viewDidLoad() { super.viewDidLoad() pageControl.tintColor = .systemGray pageControl.currentPageTintColor = .systemBlue } ``` -------------------------------- ### CHIPageControlAji - Horizontal Sliding Indicator Source: https://context7.com/chililabs/chipagecontrol/llms.txt Example of using CHIPageControlAji, which features a horizontally sliding indicator. This control allows for setting page count, radius, padding, and distinct colors for the default and active states. The `progress` property can be used to position the indicator between pages for a smooth sliding effect. ```swift let ajiControl = CHIPageControlAji(frame: CGRect(x: 50, y: 100, width: 200, height: 30)) ajiControl.numberOfPages = 5 ajiControl.radius = 5 ajiControl.padding = 8 ajiControl.tintColor = .systemGray ajiControl.currentPageTintColor = .systemBlue view.addSubview(ajiControl) // Simple horizontal movement - active indicator slides between positions ajiControl.progress = 2.5 // Indicator positioned halfway between page 2 and 3 ``` -------------------------------- ### Set CHIPageControl Progress with Animation Source: https://context7.com/chililabs/chipagecontrol/llms.txt This Swift code shows how to change the CHIPageControl's current page, with options for animated or instant transitions. It also includes an example of how to retrieve the current page and mentions that progress values outside the valid range are ignored. ```swift // Jump to page with animation (animated transition over ~0.1s increments) pageControl.set(progress: 2, animated: true) // Jump to page instantly (no animation) pageControl.set(progress: 4, animated: false) // Safe bounds checking - values outside 0...(numberOfPages-1) are ignored pageControl.set(progress: 10, animated: true) // Does nothing if numberOfPages < 11 // Get current page (rounded from progress) let currentPage = pageControl.currentPage // Returns Int ``` -------------------------------- ### Create and Configure CHIPageControl Programmatically Source: https://context7.com/chililabs/chipagecontrol/llms.txt This Swift code shows how to create a CHIPageControl instance programmatically, set its frame, configure essential properties like the number of pages, radius, padding, and colors, and add it to the view hierarchy. It also demonstrates setting the initial progress. ```swift import CHIPageControl // Create with frame let pageControl = CHIPageControlAji(frame: CGRect(x: 0, y: 0, width: 200, height: 30)) // Configure basic properties pageControl.numberOfPages = 5 pageControl.radius = 4 pageControl.padding = 6 pageControl.tintColor = .lightGray pageControl.currentPageTintColor = .blue // Add to view hierarchy view.addSubview(pageControl) // Set initial page pageControl.progress = 0 ``` -------------------------------- ### Basic Swift Initialization and Configuration Source: https://github.com/chililabs/chipagecontrol/blob/master/README.md Demonstrates how to initialize and configure a CHIPageControl instance in Swift code. Key properties like `numberOfPages`, `radius`, `tintColor`, `currentPageTintColor`, and `padding` can be set to customize the appearance and behavior of the page control. This is useful for programmatically adding page indicators. ```swift let pageControl = CHIPageControlAji(frame: CGRect(x: 0, y:0, width: 100, height: 20)) pageControl.numberOfPages = 4 pageControl.radius = 4 pageControl.tintColor = .red pageControl.currentPageTintColor = .green pageControl.padding = 6 ``` -------------------------------- ### CHIPageControlAleppo - Expanding Width Indicator Source: https://context7.com/chililabs/chipagecontrol/llms.txt Demonstrates CHIPageControlAleppo, an indicator that expands and contracts in width as it moves between pages. Configuration includes setting the number of pages, radius, and colors. The `set(progress:animated:)` method can be used to animate the indicator's movement. ```swift let aleppoControl = CHIPageControlAleppo(frame: CGRect(x: 50, y: 150, width: 200, height: 30)) aleppoControl.numberOfPages = 5 aleppoControl.radius = 5 aleppoControl.tintColor = .systemGray aleppoControl.currentPageTintColor = .systemRed view.addSubview(aleppoControl) // Indicator expands/contracts in width as it moves between pages aleppoControl.set(progress: 1, animated: true) ``` -------------------------------- ### Swift Image Gallery with CHIPageControlPaprika Source: https://context7.com/chililabs/chipagecontrol/llms.txt This Swift code defines a GalleryViewController that uses UIPageViewController to display a sequence of images and CHIPageControlPaprika to indicate the current page and allow navigation. It handles setting up the page view controller, the page control, creating image view controllers, and responding to user interactions. ```swift import UIKit import CHIPageControl class GalleryViewController: UIViewController { private var pageViewController: UIPageViewController! private let pageControl = CHIPageControlPaprika() private var imageViewControllers: [UIViewController] = [] private let images = ["image1", "image2", "image3", "image4", "image5"] override func viewDidLoad() { super.viewDidLoad() setupPageViewController() setupPageControl() createImagePages() } private func setupPageViewController() { pageViewController = UIPageViewController( transitionStyle: .scroll, navigationOrientation: .horizontal ) pageViewController.delegate = self pageViewController.dataSource = self addChild(pageViewController) view.addSubview(pageViewController.view) pageViewController.view.frame = view.bounds pageViewController.didMove(toParent: self) } private func setupPageControl() { pageControl.numberOfPages = images.count pageControl.radius = 5 pageControl.padding = 8 pageControl.tintColors = [.red, .orange, .yellow, .green, .blue] pageControl.currentPageTintColor = .white pageControl.enableTouchEvents = true pageControl.delegate = self pageControl.translatesAutoresizingMaskIntoConstraints = false view.addSubview(pageControl) NSLayoutConstraint.activate([ pageControl.centerXAnchor.constraint(equalTo: view.centerXAnchor), pageControl.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20) ]) } private func createImagePages() { imageViewControllers = images.map { let vc = UIViewController() let imageView = UIImageView(image: UIImage(named: $0)) imageView.contentMode = .scaleAspectFit imageView.frame = vc.view.bounds vc.view.addSubview(imageView) return vc } if let firstVC = imageViewControllers.first { pageViewController.setViewControllers([firstVC], direction: .forward, animated: false) pageControl.progress = 0 } } } extension GalleryViewController: UIPageViewControllerDelegate { func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) { guard completed, let currentVC = pageViewController.viewControllers?.first, let index = imageViewControllers.firstIndex(of: currentVC) else { return } pageControl.set(progress: index, animated: true) } } extension GalleryViewController: UIPageViewControllerDataSource { func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? { guard let index = imageViewControllers.firstIndex(of: viewController), index > 0 else { return nil } return imageViewControllers[index - 1] } func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? { guard let index = imageViewControllers.firstIndex(of: viewController), index < imageViewControllers.count - 1 else { return nil } return imageViewControllers[index + 1] } } extension GalleryViewController: CHIBasePageControlDelegate { func didTouch(pager: CHIBasePageControl, index: Int) { guard index < imageViewControllers.count else { return } let currentIndex = imageViewControllers.firstIndex(of: pageViewController.viewControllers!.first!)! let direction: UIPageViewController.NavigationDirection = index > currentIndex ? .forward : .reverse pageViewController.setViewControllers( [imageViewControllers[index]], direction: direction, animated: true ) { _ in pager.progress = Double(index) } } } ``` -------------------------------- ### Add CHIPageControl using Swift Package Manager Source: https://context7.com/chililabs/chipagecontrol/llms.txt This code demonstrates how to add the CHIPageControl library to your project using the Swift Package Manager. This is a common method for managing dependencies in modern Swift projects. ```swift dependencies: [ .package(url: "https://github.com/ChiliLabs/CHIPageControl.git", .branch("master")) ] ``` -------------------------------- ### Advanced Border Styling with CHIPageControlAji Source: https://context7.com/chililabs/chipagecontrol/llms.txt Demonstrates advanced customization of CHIPageControlAji by adding border styling to page indicators. This involves setting the `tintColor` to transparent and defining a `borderWidth` and `currentPageTintColor` to create hollow circles with colored borders for the active page. ```swift let pageControl = CHIPageControlAji(frame: CGRect(x: 0, y: 0, width: 200, height: 30)) pageControl.numberOfPages = 4 pageControl.radius = 6 pageControl.tintColor = .clear // Transparent fill pageControl.borderWidth = 2 // Add border to indicators pageControl.currentPageTintColor = .blue // Result: Hollow circles with 2pt borders, filled blue for active page ``` -------------------------------- ### Configure CHIPageControlAji with Auto Layout in Swift Source: https://context7.com/chililabs/chipagecontrol/llms.txt Demonstrates configuring CHIPageControlAji for Auto Layout in Swift. It sets the number of pages, radius, and padding, then adds it as a subview and activates constraints for horizontal centering and bottom alignment. The intrinsic content size automatically determines the width and height based on page count, diameter, and padding. ```swift let pageControl = CHIPageControlAji() pageControl.numberOfPages = 5 pageControl.radius = 5 pageControl.padding = 8 pageControl.translatesAutoresizingMaskIntoConstraints = false view.addSubview(pageControl) NSLayoutConstraint.activate([ pageControl.centerXAnchor.constraint(equalTo: view.centerXAnchor), pageControl.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20) // Width and height automatically determined by intrinsicContentSize ]) ``` -------------------------------- ### Setting Multiple Tint Colors Source: https://github.com/chililabs/chipagecontrol/blob/master/README.md This Swift code snippet shows how to apply different colors to individual page indicators using the `tintColors` array or by inserting a specific color at a given position. The `tintColors` array must match the `numberOfPages` to avoid errors. The `insertTintColor` method offers a more flexible way to manage colors dynamically. ```swift // The size of the array needs to match the numberOfPages or it will throw an fatal error pageControl.tintColors = [UIColor.black, UIColor.yellow, UIColor.black, UIColor.black] // or // If it is the first one, it will fill all colors with the selected tintColor and then replace the colors with the desired one pageControl.insertTintColor(UIColor.yellow, position: 1) ``` -------------------------------- ### Handle Touch Events with CHIPageControlChimayo Delegate Source: https://context7.com/chililabs/chipagecontrol/llms.txt Shows how to enable and handle touch events for CHIPageControlChimayo using its delegate. The `didTouch` delegate method is called when a user taps a page indicator, allowing you to programmatically navigate to the tapped page and update associated scroll views. ```swift class OnboardingViewController: UIViewController, CHIBasePageControlDelegate { let pageControl = CHIPageControlChimayo(frame: CGRect(x: 0, y: 0, width: 300, height: 30)) override func viewDidLoad() { super.viewDidLoad() pageControl.numberOfPages = 5 pageControl.enableTouchEvents = true // Enable tap detection pageControl.delegate = self view.addSubview(pageControl) } // Delegate method called when user taps an indicator func didTouch(pager: CHIBasePageControl, index: Int) { print("User tapped page indicator at index: (index)") // Jump to tapped page with animation pager.set(progress: index, animated: true) // Scroll associated UIScrollView let targetOffset = CGPoint(x: CGFloat(index) * scrollView.frame.width, y: 0) scrollView.setContentOffset(targetOffset, animated: true) } } ``` -------------------------------- ### Enabling and Handling Touch Events Source: https://github.com/chililabs/chipagecontrol/blob/master/README.md This Swift code explains how to enable user interaction with the page indicators using `enableTouchEvents = true`. It also shows the delegate method signature `didTouch(pager:index:)` from `CHIBasePageControlDelegate`, which must be implemented to receive callbacks when a user taps on a page indicator. ```swift pageControl.enableTouchEvents = true // Implement the CHIBasePageControlDelegate to catch touch events. // func didTouch(pager: CHIBasePageControl, index: Int) ``` -------------------------------- ### Set Individual Page Colors with CHIPageControlFresno Source: https://context7.com/chililabs/chipagecontrol/llms.txt Demonstrates setting individual page indicator colors for CHIPageControlFresno. You can set all colors at once using an array or insert/replace colors at specific positions. Ensure the array count matches `numberOfPages` when setting all at once to avoid fatal errors. ```swift let pageControl = CHIPageControlFresno(frame: CGRect(x: 0, y: 0, width: 200, height: 30)) pageControl.numberOfPages = 4 // Method 1: Set all colors at once (array count must match numberOfPages) pageControl.tintColors = [.red, .blue, .green, .orange] // Fatal error if count doesn't match: "The number of tint colors needs to be the same as the number of page" // Method 2: Insert individual colors (automatically fills array if needed) pageControl.tintColor = .gray // Default color pageControl.insertTintColor(.yellow, position: 1) // Replace color at index 1 pageControl.insertTintColor(.purple, position: 3) // Replace color at index 3 // Result: [gray, yellow, gray, purple] ``` -------------------------------- ### CHIPageControlJalapeno - Morphing Blob Indicator Source: https://context7.com/chililabs/chipagecontrol/llms.txt Illustrates the use of CHIPageControlJalapeno, which creates a morphing blob-like shape for the active indicator using bezier curves. This control remembers the last page to animate smoothly in the correct direction. Customization includes number of pages, radius, padding, and colors. ```swift let jalapenoControl = CHIPageControlJalapeno(frame: CGRect(x: 50, y: 200, width: 200, height: 30)) jalapenoControl.numberOfPages = 4 jalapenoControl.radius = 6 jalapenoControl.padding = 10 jalapenoControl.tintColor = .orange.withAlphaComponent(0.3) jalapenoControl.currentPageTintColor = .orange view.addSubview(jalapenoControl) // Creates blob-like morphing shape using bezier curves // Remembers last page to animate in correct direction jalapenoControl.progress = 0 // ... user scrolls ... jalapenoControl.progress = 2.3 // Smooth morphing animation ``` -------------------------------- ### Updating Page Control Progress Source: https://github.com/chililabs/chipagecontrol/blob/master/README.md Illustrates how to update the current page indicator in Swift, either directly by setting the `progress` property or by using the `set(progress:animated:)` method for animated transitions. This is essential for reflecting the user's navigation through pages or for programmatic page changes. ```swift //update dynamically pageControl.progress = 0.5 //set progress with animation pageControl.set(progress: 2, animated: true) ``` -------------------------------- ### Update CHIPageControl Progress with UIPageViewController Source: https://context7.com/chililabs/chipagecontrol/llms.txt This Swift code illustrates how to synchronize CHIPageControl's progress with page transitions in a UIPageViewController. It updates the page control's progress when the transition is completed, ensuring the UI accurately reflects the current page. ```swift // Example with UIPageViewController func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) { guard completed, let currentVC = pageViewController.viewControllers?.first, let index = pages.firstIndex(of: currentVC) else { return } pageControl.progress = Double(index) } ``` -------------------------------- ### Customize CHIPageControl Colors Source: https://context7.com/chililabs/chipagecontrol/llms.txt This Swift code snippet demonstrates how to customize the colors of a CHIPageControl, specifically the CHIPageControlPaprika style. It shows setting the general `tintColor` for inactive pages with transparency and `currentPageTintColor` for the active page. ```swift let pageControl = CHIPageControlPaprika(frame: CGRect(x: 0, y: 0, width: 200, height: 30)) pageControl.numberOfPages = 4 // Inactive indicators use tintColor with transparency pageControl.tintColor = .red pageControl.inactiveTransparency = 0.4 // 40% opacity for inactive pages // Active indicator uses currentPageTintColor if set, otherwise tintColor pageControl.currentPageTintColor = .green // Active page will be green ``` -------------------------------- ### Auto-hiding CHIPageControl for Single Page Source: https://context7.com/chililabs/chipagecontrol/llms.txt Explains the `hidesForSinglePage` property in CHIPageControlAleppo. When set to `true` (which is the default), the page control will automatically hide itself if there is only one page, and become visible again when there are multiple pages. ```swift let pageControl = CHIPageControlAleppo(frame: CGRect(x: 0, y: 0, width: 200, height: 30)) pageControl.hidesForSinglePage = true // Default is true pageControl.numberOfPages = 1 // pageControl.isHidden automatically becomes true pageControl.numberOfPages = 3 // pageControl.isHidden automatically becomes false ``` -------------------------------- ### Update CHIPageControl Progress during UIScrollView Scrolling Source: https://context7.com/chililabs/chipagecontrol/llms.txt This Swift code snippet demonstrates how to update the CHIPageControl's progress dynamically as a UIScrollView scrolls. It calculates the current progress based on the scroll offset and updates the `pageControl.progress` property for smooth visual feedback. ```swift // Update progress smoothly as user scrolls through UIScrollView func scrollViewDidScroll(_ scrollView: UIScrollView) { let pageWidth = scrollView.frame.width let currentProgress = scrollView.contentOffset.x / pageWidth // Progress can be fractional (e.g., 1.5 means halfway between page 1 and 2) pageControl.progress = Double(currentProgress) } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.