This tutorial main focus will be the `UIPageControlTimerProgress` class.
`UIPageControlTimerProgress` has been introduced in **iOS 17**, and it is also available in **tvOS 17**.
This class allows us to create timed paging really easily and with a relatively small amount of code.
## Visual
The new `UIPageControlTimerProgress` will display a `UIPageControl` as usual, but the current page indicator has a pill shape with a progress bar inside.
Once the progress bar is filled, the `UIPageViewController` will transition to the next page.
It is the same kind of behavior that we can see in apps like Instagram, Snapchat, and WhatsApp stories.
We have seen this behavior for a long time, but it is nice that Apple decided to introduce it eventually. 
## SwiftUI interoperability
Currently, it is available only for **UIKit**, but you can wrap the `UIPageViewController` in a `UIViewControllerRepresentable` struct and use it in your **SwiftUI** project.
Hopefully, Apple will eventually add it to **SwiftUI** as a style modifier for the `TabView`.
Now, let's see how to use it.
## Page control timer implementation
`UIPageControlTimerProgress` is not a`UIPageControl` in itself, but it has to be assigned to the `progress` property of the `UIPageControl` component.
To do so, let's start by creating the `ViewController` that will host the page controller.
```swift
class TimerPageViewController: UIPageViewController {
 
  /// This property will hold the pages to show.
  let pages: [PageVC]
}
```
> The `PageVC` code and the `UIPageViewController` implementation is [here](https://gist.github.com/francescoleoni98/7b58d5661b1c16e2f3e175507acf2a5e). I didn't include it in the tutorial since this isn't the main focus.
Then we create the `UIPageControlTimerProgress` component and assign it to the `UIPageControl`.
So, inside the `viewDidLoad` method add:
```swift
let timerProgress = UIPageControlTimerProgress(preferredDuration: 2)
timerProgress.delegate = self // we will configure this later
timerProgress.resetsToInitialPageAfterEnd = true
  
let pageControl = UIPageControl()
pageControl.progress = timerProgress
pageControl.numberOfPages = pages.count
 
// Add the page control to the view controller.
view.addSubview(pageControl)
NSLayoutConstraint.activate([
  pageControl.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  pageControl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
```
## UIPageControlTimerProgressDelegate
Then conform the `TimerPageViewController` to `UIPageControlTimerProgressDelegate` and implement the `pageControlTimerProgress(_:shouldAdvanceToPage:)` method.
```swift
extension TimerPageViewController: UIPageControlTimerProgressDelegate { 
 
 func pageControlTimerProgress(_ progress: UIPageControlTimerProgress, shouldAdvanceToPage page: Int) -> Bool {
    let nextPage = pages[page]
    self.setViewControllers([nextPage], direction: .forward, animated: true)
    return true
  }
}
```
This method is called every time the current progress of the `UIPageControlTimerProgress ` reaches the end and asks you whether it should advance to the next page.
Here we get the next view controller and set it to the **PageViewController** in order to show it.
Finally, we return `true` to tell the control that it can advance to the next page.
## Start the timer process page controller
The `UIPageControlTimerProgress` won't start automatically, but we need to do so by calling `resumeTimer()`.
I have found that the most useful place to start the timer is inside `viewDidAppear`, since inside `viewDidLoad` it won't have any effect. Maybe this is a bug that will be fixed in the public release.
```swift
override func viewDidAppear(_ animated: Bool) {
  super.viewDidAppear(animated)
  timerProgress.resumeTimer()
}
```
## Handle user interaction
As it is now, if the user swipes to the next page, the progress control won't go to the next indicator until it has finished with the current one.
To fix this behavior, we need to implement a method from the `UIPageViewControllerDelegate` protocol, called `pageViewController(_:willTransitionTo:)`.
This method is called as soon as the user starts scrolling.
```swift
class TimerPageViewController {
 
    // 1.
    var suspensionTimer: Timer? 
}
 
extension TimerPageViewController: UIPageViewControllerDelegate {
 
  func pageViewController(_ pageViewController: UIPageViewController, willTransitionTo pendingViewControllers: [UIViewController]) {
    // 2.
    timerProgress.pauseTimer()
    suspensionTimer?.invalidate()
     
    // 3.
    suspensionTimer = Timer.scheduledTimer(withTimeInterval: 2, repeats: false) { _ in
      self.timerProgress.resumeTimer()
    }
  }
}
```
Here we:
1. Add a variable  that will hold the timer that handles user interactions
2. Pause the page control timer progress as soon as the user starts swiping
3. Start a timer for 2 seconds that will resume the progress page controller in case the user stops swiping through pages

This way, if the user swipes a page, the page control timer will pause and resume after 2 seconds.
And we are done with the new `UIPageControlTimerProgress ` component.
## Preview
To preview what we have done, you can use the new `#Preview` [macro](/articles/swift-macros) available in **Swift 5.9**.
```swift
#Preview {
  TimerPageViewController(pages: [PageVC(index: 0, image: "bergamo"),
                                  PageVC(index: 1, image: "venice"),
                                  PageVC(index: 2, image: "florence")])
}
```
Here is the result
![timed_carousel_swift.gif](https://media.graphassets.com/GBIGvs0QTwOkthSMMOl2)
## Complete code
[Here](https://gist.github.com/francescoleoni98/7b58d5661b1c16e2f3e175507acf2a5e) you can find the complete code.
## Conclusion
This implementation is not written anywhere else since it is a new component and Apple didn't provide any sample code, as far as I know.
So, if you have any suggestions on how to improve it, let me know [here](https://twitter.com/franceleonidev), I will really appreciate it.
`UIPageControlTimerProgress` is a really cool feature that Apple introduced in iOS 17.
It makes it clearer to the user that the slideshow is animated and how long each page will last.

Learn how to create a page controller that automatically changes page with the new UIPageControlTimerProgress component.

Tutorial: How to Create a Timed Paging Carousel Like Instagram

Menus are really useful in **iOS** and **iPadOS**, they allow to pack many option in a single button in an easy way.
Now, they are even more powerful.
There is a new way to display options in `Menu`.
It is called `Palette` and allows you to display multiple items in a row, that can even be scrollable in case the number of items don't fit in the menu.
This option is available in both `UIKit` and `SwiftUI` but with a slightly different approach.
## Palette picker SwiftUI
In **SwiftUI**, the palette options must be applied to a `Picker` view and the picker must be added inside a `Menu`.
This way the picker will be shown in a row of the menu.
```swift
Menu("Options") {
  Button("Remove tag") { }
  
  Picker("Tags", selection: $selection) {
    ForEach(Tag.allCases, id: \.self) { tag in
      Image(systemName: "circle.fill")
        .tint(tag.color)
        .tag(tag)
    }
  }
  .pickerStyle(.palette)
}
```
This will result in the following menu.
![Menu with palette picker in SwiftUI](https://media.graphassets.com/anraTEiTmekszMMpCeE9)
!NOTE If you apply the `.segmented` picker style to a `Picker` that is placed outside of a `Menu`, it will behaved like the `.segmented` style.
## UIMenu palette UIKit
In **UIKit**, to create a palette menu, add to the `options` parameter of the `UIMenu`, the `.displayAsPalette` and `.displayInline` options.
```swift
let tagOptions = Tag.allCases.map { tag in
  let image = UIImage(systemName: "circle.fill")?.withTintColor(tag.color, renderingMode: .alwaysOriginal)
  return UIAction(image: image) { _ in }
}
 
let tagMenu = UIMenu(options: [.displayInline, .displayAsPalette], 
                     children: tagOptions)
 
let menu = UIMenu(children: [
  UIAction(title: "Remove tag") { _ in },
  tagMenu
]) 
```
The result is the same as for the **SwiftUI** approach.
## Palette selection effect
SwiftUI offers also the possibility to customise the selection effect really easily.
You just need to use the `.paletteSelectionEffect` modifier on your picker and choose one of these options.
* `automatic`, shows a blue outline around selected items
* `custom`, lets you implement your own selection effect
* `symbolVariant`, applies a variant of the SF Symbol used
### Custom selection effect
This selection effect lets you choose which element to display for the selected item.
```swift
Picker("Tags", selection: $selection) {
  ForEach(Tag.allCases, id: \.self) { tag in
    // 1.
    Image(systemName: selection == tag ? "circle.slash.fill" : "circle.fill")
      .tint(tag.color)
      .tag(tag)
  }
}
.pickerStyle(.palette)
// 2.
.paletteSelectionEffect(.custom)
```
1. Change the image whether the current tag is selected
2. Set the selection effect modifier to `custom`
![Custom selection effect on palette menu SwiftUI](https://media.graphassets.com/hnM589QThukiLyxiW4Yj)
### Symbol variant selection effect
The variant selection effect can only be used with **SF Symbols**.
It applies a variant of the base symbol. 
E.g. if you set the property of `.symbolVariant ` to `.slash`, the `circle` symbol will be replaced by the `circle.slash` symbol when it is selected.
```swift
Picker("Tags", selection: $selection) {
  ForEach(Tag.allCases, id: \.self) { tag in
    Image(systemName: "circle")
      .tint(tag.color)
      .tag(tag)
  }
}
.pickerStyle(.palette)
// 1.
.paletteSelectionEffect(.symbolVariant(.slash))
```
1. Set the selection effect modifier to `symbolVariant(.slash)`. This way, the selected tag image will be replaced with the slashed version if available.
![Symbol variant selection effect on palette menu SwiftUI](https://media.graphassets.com/NM9Qz7IpQgOkP5wjg942)
!WARNING Not every SF Symbol has a corresponding variant.
#### Complete code on GitHub
Check out the complete code [here](https://gist.github.com/francescoleoni98/9ec227a73ccccfa6a3ad85d2c0fdcf66).

Use the new palette picker and menu style to display options as rows of compact elements in UIMenu and Menu View in iOS 17.

UIKit

Tutorial: How to Create a Timed Paging Carousel Like Instagram

Create Menus with Palette Picker in SwiftUI and UIKit