DEV Community: Herlandro Hermogenes

How to Create the Carousel UIKit in Swift: A Step-by-Step Guide

Herlandro Hermogenes — Mon, 28 Oct 2024 23:32:21 +0000

The Carousel-UIK project is an example of a user interface component developed in Swift, designed to create a carousel for images or any other visual content.

In this article, we will guide you through the steps to create the Carousel-UIK in Swift.

Step 1: Project Setup

Before diving into the coding, we need to set up the project in Xcode.

Creating the Project:

Open Xcode and select “Create a new Xcode project”.
Choose “App” and click “Next”.
Name the project, choose the language “Swift,” and set the interface to “Storyboard” or “SwiftUI” (we’ll use Storyboard here).
Click “Next” and save the project in your desired directory.

Installing Dependencies (Optional):

If you want to use external libraries like SnapKit to simplify layout management, you can add these dependencies via CocoaPods or Swift Package Manager.

Step 2: Structuring the Carousel Component

Now, let’s create the basic carousel component.

Creating the Carousel View:

Create a new Swift file called CarouselView.swift.
Import UIKit: import UIKit.
Create a CarouselView class that inherits from UIView.

    import UIKit

    class CarouselView: UIView {

    // Array of views to be displayed in the carousel
    private var itemViews: [UIView] = []

    // Scroll view to enable horizontal scrolling
    private let scrollView: UIScrollView = {
        let scrollView = UIScrollView()
        scrollView.isPagingEnabled = true
        scrollView.showsHorizontalScrollIndicator = false
        return scrollView
    }()

    // Initializer for the view
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }

    // Initial setup of the view
    private func setupView() {
        addSubview(scrollView)
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            scrollView.leadingAnchor.constraint(equalTo: leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
            scrollView.topAnchor.constraint(equalTo: topAnchor),
            scrollView.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])
    }

    // Method to add views to the carousel
    func setItems(_ views: [UIView]) {
        itemViews.forEach { $0.removeFromSuperview() } // Remove previous views
        itemViews = views
        setupItems()
    }

    // Setup and position the views within the scroll view
    private func setupItems() {
        var previousView: UIView? = nil

        for view in itemViews {
            scrollView.addSubview(view)
            view.translatesAutoresizingMaskIntoConstraints = false
            NSLayoutConstraint.activate([
                view.topAnchor.constraint(equalTo: scrollView.topAnchor),
                view.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
                view.widthAnchor.constraint(equalTo: widthAnchor)
            ])

            if let previous = previousView {
                view.leadingAnchor.constraint(equalTo: previous.trailingAnchor).isActive = true
            } else {
                view.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
            }

            previousView = view
        }

        if let lastView = previousView {
            lastView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
        }
    }
}

This code creates a CarouselView that manages an array of UIView objects to display within a UIScrollView, enabling horizontal scrolling.

Step 3: Configuring the Carousel Items

Now that we have the CarouselView, we need to create and add the items to be displayed in the carousel.

Creating the Items:

You can create the carousel items as UIView or UIImageView, depending on the content you want to display.

func createCarouselItems() -> [UIView] {
    var items: [UIView] = []

    for i in 1...5 {
        let view = UIView()
        view.backgroundColor = i % 2 == 0 ? .blue : .red
        let label = UILabel()
        label.text = "Item \(i)"
        label.textColor = .white
        label.font = UIFont.boldSystemFont(ofSize: 24)
        label.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(label)
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
        items.append(view)
    }

    return items
}

In this example, each item is a UIView with alternating background colors and a label centered in it.

Adding Items to the Carousel:

In the main ViewController, add the CarouselView and configure the items

override func viewDidLoad() {
    super.viewDidLoad()

    let carouselView = CarouselView()
    carouselView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(carouselView)
    NSLayoutConstraint.activate([
        carouselView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        carouselView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        carouselView.heightAnchor.constraint(equalToConstant: 200),
        carouselView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
    ])

    let items = createCarouselItems()
    carouselView.setItems(items)
}

This code adds the CarouselView to the center of the screen and sets the carousel's height to 200 points.

Step 4: Customization and Enhancements

Now that we have a basic working carousel, you can customize and enhance it:

Adding Page Indicators:

Add a UIPageControl to indicate the current page.

private let pageControl: UIPageControl = {
    let pageControl = UIPageControl()
    pageControl.currentPageIndicatorTintColor = .black
    pageControl.pageIndicatorTintColor = .lightGray
    return pageControl
}()

Then, update the current page as the user scrolls.

Adding Animations:

You can add transition animations between items or even configure auto-scroll so that the carousel automatically changes after a few seconds.

Customizing the Layout:

Use UICollectionView instead of UIScrollView for more layout flexibility and support for behaviors like zooming or different item sizes.

Conclusion

In this article, we built a basic carousel in Swift using UIKit. We learned how to set up the project, create the CarouselView, add items, and customize the carousel. With this foundation, you can expand the component to meet the specific needs of your application by adding animations, page indicators, and more.

Explore and modify the code as needed to create a unique and interactive user experience! Get the source-code here

How to fix the error: DT_TOOLCHAIN_DIR cannot be used to evaluate LIBRARY_SEARCH_PATHS, use TOOLCHAIN_DIR instead

Herlandro Hermogenes — Mon, 28 Oct 2024 23:17:39 +0000

In Xcode 15, Apple made a modification to the variable that points to the default toolchain location, replacing from $DT_TOOLCHAIN_DIR to $TOOLCHAIN_DIR. If your project or target relies on the previous variable, you should update it to use $TOOLCHAIN_DIR.

To perform this replacement, you can add the following code snippet at the end of your project’s Podfile. This error was on a MacOS v14 (Sonoma), XCode 15.4, Swift 5.0 regarding the Firebase and Firebase Analytics Pods.

Solution:
Add this code to your Podfile

# Solution for: macOS v14 (Sonoma) | XCode 15.4 | Swift 5.0 | PodFile

  post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|

  # Update the Swift version
      config.build_settings['SWIFT_VERSION'] = '5.0'

  # Update all Pods iOS Deployment Target ios Version
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '15.0'

    # Update LIBRARY_SEARCH_PATHS
      ['Firebase.release.xcconfig', 'FirebaseAnalytics.release.xcconfig'].each do |file_name|
        Dir.glob("Pods/**/#{file_name}", File::FNM_CASEFOLD).each do |xcconfig_path|
          text = File.read(xcconfig_path)
          new_contents = text.gsub('DT_TOOLCHAIN_DIR', 'TOOLCHAIN_DIR')
          File.open(xcconfig_path, "w") {|file| file.puts new_contents }
        end
      end

    end
  end
end

and run

pod install

Top 10 open source iOS libraries every developer should replace in 2024

Herlandro Hermogenes — Sat, 28 Sep 2024 23:05:46 +0000

Transform Your Apps by Embracing SwiftUI and Modern Development Practices Today

In myprevious article, I wrote about the Top 10 open source iOS libraries that every developer should have known before 2024

The technology evolves, so must we. Let me share with you the journey of replacing these 10 legacy libraries with cutting-edge solutions that have revitalized my development process.

1. Alamofire ➡️ URLSession with async/await

Letting Go of Alamofire

I used to swear by Alamofire for all my networking needs. It simplified HTTP requests and made handling responses a breeze. But with the introduction of Swift’s async/await and the powerful capabilities of URLSession, I've found that I can achieve the same results with cleaner, more efficient code. Embracing URLSession has reduced dependencies and made my networking layer feel more native and integrated.

2. RxSwift (UIKit) ➡️ Combine

Moving Beyond RxSwift to Combine

RxSwift opened my eyes to the possibilities of reactive programming. However, integrating it with SwiftUI felt like forcing two puzzle pieces that didn’t quite fit. Transitioning to Combine, Apple’s native reactive framework, has been a revelation. The seamless integration with SwiftUI has made my codebase more cohesive and has significantly reduced complexity.

3. Realm ➡️ Core Data with SwiftUI

Replacing Realm with Core Data and SwiftUI

Realm was my trusted companion for data persistence. Its simplicity and performance were unmatched — until SwiftUI enhanced its integration with Core Data. With features like @FetchRequest and better managedObjectContext support, Core Data has become more approachable and efficient. Making the switch has unified my data management and improved app stability.

4. SDWebImage ➡️ AsyncImage or Nuke

Evolving from SDWebImage to AsyncImage and Nuke

Loading images asynchronously was a challenge that SDWebImage elegantly solved. But with SwiftUI’s AsyncImage component introduced in iOS 15, I've found a native solution that fits perfectly into my apps. For those times when I need more advanced image processing, Nuke has been a fantastic library that offers SwiftUI support and powerful features.

5. Kingfisher ➡️ Kingfisher for SwiftUI

Upgrading Kingfisher for SwiftUI

Kingfisher has been a staple for image downloading and caching. The good news is that it’s kept up with the times. Its latest versions fully support SwiftUI, making the integration smoother than ever. Continuing with Kingfisher feels like working with an old friend who’s learned new tricks — it’s familiar yet refreshingly modern.

6. Lottie ➡️ Lottie for SwiftUI

Enhancing Animations with Lottie in SwiftUI

Animations add that magical touch to our apps, and Lottie has been instrumental in bringing animations to life. Now that Lottie supports SwiftUI, incorporating those delightful animations has become even more seamless. It’s reignited my passion for creating engaging user experiences.

7. SwiftyJSON ➡️ Codable

Embracing Codable over SwiftyJSON

SwiftyJSON was once my go-to for parsing JSON data. It simplified a complex process and saved me countless hours. But with Swift’s native Codable protocol, I've discovered a more streamlined and type-safe way to handle JSON. This shift has made my networking code cleaner and more reliable.

8. Charts ➡️ Apple Charts Framework

Utilizing Apple’s Native Charts Framework

Creating visually appealing charts was a daunting task that often required bulky third-party libraries. With Apple’s introduction of the native Charts framework, building data visualizations has become an integrated and enjoyable part of development. It’s allowed me to present data in engaging ways without the overhead of external dependencies.

9. SnapKit ➡️ SwiftUI’s Layout System

Transitioning from SnapKit to SwiftUI’s Layout System

SnapKit made Auto Layout less of a headache, and I was grateful for it. However, SwiftUI’s declarative layout approach has revolutionized how I design interfaces. Using stacks and alignment guides, I’ve been able to create complex layouts with less code and greater flexibility. It’s made UI development a joy again.

10. MBProgressHUD ➡️ ProgressView

Modernizing with ProgressView over MBProgressHUD

MBProgressHUD was the standard for indicating progress and loading states. But SwiftUI’s ProgressView has provided a native, customizable alternative that fits naturally within my apps. It's simplified my code and enhanced the user experience by providing smooth and responsive feedback.

Looking Ahead: The Future of iOS Development

Making these changes hasn’t just updated my projects — it’s revitalized my passion for development. Here’s what I see on the horizon:

SwiftUI Becoming the Norm: By the end of 2025, I anticipate that SwiftUI will be the foundation of most new iOS projects.
Reduced Reliance on External Libraries: As native solutions continue to improve, the need for third-party libraries will diminish, leading to more stable and maintainable codebases.
Adoption of Native Reactive Programming: Combine will likely become the standard for reactive programming in Swift, offering seamless integration and performance benefits.

What about you? Have you started transitioning away from these legacy libraries? I’d love to hear your experiences, challenges, or any tips you might have. Let’s start a conversation and help each other grow in this ever-evolving field!

U𝗽𝗱𝗮𝘁𝗲 your view at runtime on the simulator using LLDB

Herlandro Hermogenes — Fri, 09 Aug 2024 21:13:15 +0000

How to use LLDB (XCode) to change the view background color at runtime and update view UI on the simulator (for projects without SwiftUI)?

Set a breakpoint in the same line that you want do change/update in runtime.
Run the app on the simulator. When the execution is paused, type this expression on the main thread in the XCode console:

e DispatchQueue.main.async { self.view.backgroundColor = UIColor.blue }

Hit Enter and release the execution. You will see the background changing from green to blue on the simulator.

This is a good UI solution for UIKit projects without SwiftUI Preview