StepView | Step by step，just use HorizontalStepView，VerticalStepView | Animation library

 public void BtnBack_Clicked(object sender, EventArgs e)
        {
            BtnNext.IsEnabled = true;
            int currentIndex = getCurrentIndex();

            //if its the first item disable back button
            if (currentIndex.Equals(1))
            {
                BtnBack.IsEnabled = false;
            }
            var content = _protocol.Contents[currentIndex - 1];
            _contentId = content.Contentid;
            lblText.Text = content?.Text;
            string protocolName = _protocol.Name;

            //replace space with underscore to get correct picture name
            protocolName = protocolName.Replace(" ", "_");
            myImage.Source = ($"{protocolName}{content?.Contentid}.jpg");

            //get current navTitle on button click
            setNewNavTitle();
        }

        public void BtnNext_Clicked(object sender, EventArgs e)
        {
            BtnBack.IsEnabled = true;
            int currentIndex = getCurrentIndex();
            var content = _protocol.Contents[currentIndex + 1];

            //do something after second last
            if (currentIndex == _protocol.Contents.Count - 2)
            {
                BtnNext.IsEnabled = false;
            }
            _contentId = content.Contentid;
            lblText.Text = content?.Text;
            string protocolName = _protocol.Name;

            //replace space with underscore to get correct picture name
            protocolName = protocolName.Replace(" ", "_");
            myImage.Source = ($"{protocolName}{content?.Contentid}.jpg");

            //get current navTitle on button click
            setNewNavTitle();
        }

myImage.Source = ($"{protocolName}{content?.Contentid}.jpg");

  "protocols": [
    {
      "id": "1",
      "name": "Pols tellen",
      "contents": [
        {
          "chapterTitle": "Voorzorg",
          "contentid": "1",
          "text": "test1"
        },
        {
          "contentid": "2",
          "text": "test2"
        },
        {
          "chapterTitle": "Handeling",
          "contentid": "3",
          "text": "test3"
        },
        {
          "contentid": "4",
          "test1": "test4"
        },
        {
          "chapterTitle": "Nazorg",
          "contentid": "10",
          "text": "test5"
        },
        {
          "contentid": "11",
          "text": "test6"
        }

      ]
    },
}

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class StepView : ContentPage
{
    //get index
    private long _contentId;

    //get step
    private Protocol _protocol;

    //go to selected step
    public StepView(Protocol protocol, string title, string chapterTitle, long contentId)
    {
        _protocol = protocol;
        InitializeComponent();
        Title = title + " - " + chapterTitle;

        // get label text
        lblText.Text = protocol.Contents.FirstOrDefault(x => x.ChapterTitle == chapterTitle).Text;
        _contentId = contentId;
    }

    public void BtnBack_Clicked(object sender, EventArgs e)
    {
        BtnNext.IsEnabled = true;
        int currentIndex = getCurrentIndex();

        //if its the first item disable back button
        if (currentIndex.Equals(1))
        {
            BtnBack.IsEnabled = false;
        }
        var content = _protocol.Contents[currentIndex - 1];
        _contentId = content.Contentid;
        lblText.Text = content?.Text;
        string protocolName = _protocol.Name;

        //replace space with underscore to get correct picture name
        protocolName = protocolName.Replace(" ", "_");
        myImage.Source = ($"{protocolName}{content?.Contentid}.jpg");

        //get current navTitle on button click
        setNewNavTitle();
    }

    //go back to home
    public async void btnHome_Clicked(object sender, EventArgs e)
    {
        //go to mainpage
        await Navigation.PushAsync(new MainPage());
    }

    public void BtnNext_Clicked(object sender, EventArgs e)
    {
        BtnBack.IsEnabled = true;
        int currentIndex = getCurrentIndex();
        var content = _protocol.Contents[currentIndex + 1];

        //do something after second last
        if (currentIndex == _protocol.Contents.Count - 2)
        {
            BtnNext.IsEnabled = false;
        }
        _contentId = content.Contentid;
        lblText.Text = content?.Text;
        string protocolName = _protocol.Name;

        //replace space with underscore to get correct picture name
        protocolName = protocolName.Replace(" ", "_");
        myImage.Source = ($"{protocolName}{content?.Contentid}.jpg");

        //get current navTitle on button click
        setNewNavTitle();
    }

    private string getChapterTitle()
    {
        var currentIndex = getCurrentIndex();
        string chapterTitle = _protocol.Contents[currentIndex].ChapterTitle;

        //get the previous or next chapter based on where you clicked on
        while (currentIndex > 0 && string.IsNullOrWhiteSpace(chapterTitle))
        {
            currentIndex -= 1;
            chapterTitle = _protocol.Contents[currentIndex].ChapterTitle;
        }
        return chapterTitle;
    }

    private int getCurrentIndex()
    {
        var currentContent = _protocol.Contents.FirstOrDefault(x => x.Contentid == _contentId);
        var currentIndex = _protocol.Contents.IndexOf(currentContent);
        return currentIndex;
    }

    //get new protocol + chapter based on btnBack and btnNext
    private void setNewNavTitle()
    {
        string nextTitile = _protocol.Name + " - " + getChapterTitle();
        Title = nextTitile;
    }

import UIKit
import SwiftUI

class ViewController: UIViewController {
    
    
    @IBOutlet weak var stepperContenerView: UIView!
    @IBOutlet weak var btn:UIButton!
    
    
    lazy var stepView = StepperView(intialCount: 1)
    lazy var swiftUIHostingView = UIHostingController(rootView: stepView)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        stepperContenerView.addSubview(swiftUIHostingView.view)
        addChild(swiftUIHostingView)
//        stepView.delegate = self

        swiftUIHostingView.view.frame = stepperContenerView.bounds
        stepperContenerView.addConstrained(subview: swiftUIHostingView.view)
        swiftUIHostingView.didMove(toParent: self)
    }
    @IBAction func onClickBtn(_ sender: UIButton) {
        let alert = UIAlertController(title: "Stepper count", message: "Current value : \(stepView.getCount())", preferredStyle: UIAlertController.Style.alert)
        alert.addAction(UIAlertAction(title: "ok", style: UIAlertAction.Style.default, handler: nil))
        self.present(alert, animated: true, completion: nil)
    } 
}
 
//extension ViewController:OnClickStepperButton {
//    func updateCount(count: Int) {
//        print("Test")
//        lbl.text = "Stepper count is - \(count)"
//    }
//}

import SwiftUI

protocol OnClickStepperButton {
    func updateCount(count:Int)
}

struct StepperView: View {
    @State private var count:Int = 1
    var delegate:OnClickStepperButton?
    
    init(intialCount:Int){
        self.count = intialCount
    }
    
    var body: some View {
        HStack(alignment: .center, spacing: 10) {
            Button("+", action: {
                count += 1
                print(count)
//                delegate?.updateCount(count: count)
            })
            
            Text("\(count)")
                .frame(minWidth: 40,minHeight: 40)
                .background(Color.white)
                .foregroundColor(.black)
                .scaledToFill()
                
            Button("-", action: {
                if count > 1 {
                    count -= 1
                    print(count)
                }
//                delegate?.updateCount(count: count)
            })
            
        }
        .font(.system(size: 22, weight: .medium, design: .serif))
        .frame(minWidth: 120, minHeight: 40, alignment: .center)
        .background(Color.blue)
        .foregroundColor(Color.white)
        .cornerRadius(20)
    
    }
    public func getCount() -> Int {
        count
    }

}

struct Stepper_Previews: PreviewProvider {
    static var previews: some View {
        StepperView(intialCount: 1)
            .previewLayout(.fixed(width: 300, height: 70))
    }
}

    //for chosen step inside protocol

    //for chosen step inside protocol
    public void Handle_ItemTapped(object sender, ItemTappedEventArgs e)
    {
        //change title based on clicked step
        var tappedStep = (Content)MyListView.SelectedItem;
        int stepIndex = (default);
        Navigation.PushAsync(new StepView(_protocol, Title, tappedStep.ChapterTitle, stepIndex));
        //Deselect item
        ((ListView)sender).SelectedItem = null;
    }

public partial class StepView : ContentPage
{
    //get step
    private Protocol _protocol;

    //go to selected step
    public StepView(Protocol protocol, string title, string chapterTitle)
    {
        _protocol = protocol;
        InitializeComponent();
        Title = title + " - " + chapterTitle;
        // get label text
        lblText.Text = protocol.Contents.FirstOrDefault(x => x.ChapterTitle == chapterTitle).Text;
    }

    private int index;

    public void BtnBack_Clicked(object sender, EventArgs e)
    {
        index--;
        var firstId = _protocol.Contents.FirstOrDefault(x => x.Contentid != null).Contentid;
        BtnNext.IsEnabled = true;
        if (index == firstId - 1)
        {
            BtnBack.IsEnabled = false;
        }
        var content = _protocol.Contents.ElementAtOrDefault(index);
        lblText.Text = content?.Text;
        //get current navTitle on button click
        getNewNavTitle(content);
    }

    public void BtnNext_Clicked(object sender, EventArgs e)
    {
        index++;
        BtnBack.IsEnabled = true;
        if (index == _protocol.Contents.Count - 1)
        {
            BtnNext.IsEnabled = false;
        }
        var content = _protocol.Contents.ElementAtOrDefault(index);
        lblText.Text = content?.Text;
        //get current navTitle on button click
        getNewNavTitle(content);
    }

    //get new protocol + chapter based on btnBack and btnNext
    private void getNewNavTitle(Content content)
    {
        Title = null;
        string nextTitile = _protocol.Name + " - " + content.NavTitle;
        Title = nextTitile;
    }

    //go back to home
    public void btnHome_Clicked(object sender, EventArgs e)
    {
        //go to mainpage
        Navigation.PushAsync(new MainPage());
    }

   {
  "protocols": [
    {
      "id": "1",
      "name": "Pols meten",
      "contents": [
        {
          "chapterTitle": "Voorzorg",
          "contentid": "1",
          "navTitle": "Voorzorg",
          "text": "voor blabla"
        },
        {
          "contentid": "2",
          "navTitle": "Voorzorg",
          "text": "voor blabla2"
        },
        {
          "contentid": "3",
          "navTitle": "Voorzorg",
          "text": "voor blablabla3"
        },
        {
          "contentid": "4",
          "chapterTitle": "Handeling",
          "navTitle": "Handeling",
          "text": "Handeling blabla"
        },
        {
          "contentid": "5",
          "navTitle": "Handeling",
          "text": "Handeling blabla2"
        },
        {
          "contentid": "6",
          "navTitle": "Handeling",
          "text": "Handeling blybli3"
        },
        {
          "contentid": "7",
          "chapterTitle": "Nazorg",
          "navTitle": "Nazorg",
          "text": "Nazorg blabla"
        },
        {
          "contentid": "8",
          "navTitle": "Nazorg",
          "text": "Nazorg blabla2"
        },
        {
          "contentid": "9",
          "navTitle": "Nazorg",
          "text": "Nazorg blybli3"
        }
      ]
    }
  ]
}

public partial class RootObject
{
    [JsonProperty("protocols")]
    public List<Protocol> Protocols { get; set; }
}

public partial class Protocol
{
    [JsonProperty("id")]
    public long Id { get; set; }

    [JsonProperty("name")]
    public string Name { get; set; }

    [JsonProperty("contents")]
    public List<Content> Contents { get; set; }
}

public partial class Content
{
    [JsonProperty("contentid")]
    public long Contentid { get; set; }

    [JsonProperty("chapterTitle", NullValueHandling = NullValueHandling.Ignore)]
    public string ChapterTitle { get; set; }

    [JsonProperty("text")]
    public string Text { get; set; }
}

    //for chosen step inside protocol
    public void Handle_ItemTapped(object sender, ItemTappedEventArgs e)
    {
        //change title based on clicked step
        var tappedStep = (Content)MyListView.SelectedItem;
        var nextTitle = Title + " - " + tappedStep.ChapterTitle;
        Navigation.PushAsync(new StepView(_protocol, Title, tappedStep.ChapterTitle));
        //Deselect item
        ((ListView)sender).SelectedItem = null;
    }

public partial class StepView : ContentPage
{
    //get step
    private Protocol _protocol;

    //go to selected step
    public StepView(Protocol protocol, string title, string chapterTitle)
    {
        _protocol = protocol;
        InitializeComponent();
        Title = title + " - " + chapterTitle;
        // get label text
        lblText.Text = protocol.Contents.FirstOrDefault(x => x.ChapterTitle == chapterTitle).Text;
    }

    private int index;

    public void BtnBack_Clicked(object sender, EventArgs e)
    {
        index--;
        var firstId = _protocol.Contents.FirstOrDefault(x => x.Contentid != null).Contentid;
        BtnNext.IsEnabled = true;
        if (index == firstId - 1)
        {
            BtnBack.IsEnabled = false;
        }
        var content = _protocol.Contents.ElementAtOrDefault(index);
        lblText.Text = content?.Text;
        //get current navTitle on button click
        getNewNavTitle(content);
    }

    public void BtnNext_Clicked(object sender, EventArgs e)
    {
        index++;
        BtnBack.IsEnabled = true;
        if (index == _protocol.Contents.Count - 1)
        {
            BtnNext.IsEnabled = false;
        }
        var content = _protocol.Contents.ElementAtOrDefault(index);
        lblText.Text = content?.Text;
        //get current navTitle on button click
        getNewNavTitle(content);
    }

    //get new protocol + chapter based on btnBack and btnNext
    private void getNewNavTitle(Content content)
    {
        Title = null;
        string nextTitile = _protocol.Name + " - " + content.NavTitle;
        Title = nextTitile;
    }

    //go back to home
    public void btnHome_Clicked(object sender, EventArgs e)
    {
        //go to mainpage
        Navigation.PushAsync(new MainPage());
    }

{
  "protocols": [
    {
      "id": "1",
      "name": "Pols meten",
      "contents": [
        {
          "contentid": "1",
          "chapterTitle": "Voorzorg",
          "text": "voor blabla"
        },
        {
          "contentid": "2",
          "text": "voor blabla2"
        },
        {
          "contentid": "3",
          "text": "voor blablabla3"
        },
        {
          "contentid": "4",
          "chapterTitle": "Handeling",
    }
  ]
}

public partial class RootObject
{
    [JsonProperty("protocols")]
    public List<Protocol> Protocols { get; set; }
}

public partial class Protocol
{
    [JsonProperty("id")]
    public long Id { get; set; }

    [JsonProperty("name")]
    public string Name { get; set; }

    [JsonProperty("contents")]
    public List<Content> Contents { get; set; }
}

public partial class Content
{
    [JsonProperty("contentid")]
    public long Contentid { get; set; }

    [JsonProperty("chapterTitle", NullValueHandling = NullValueHandling.Ignore)]
    public string ChapterTitle { get; set; }

    [JsonProperty("text")]
    public string Text { get; set; }
}

var body: some View {
    ZStack {
        TabView(selection:$selection) {
            OffersView()
                .tabItem ({
                    Image(systemName: "bag").renderingMode(.template)
                    Text("Offers")
                })
                .tag(1)
            StepView()
                .tabItem ({
                    Image(systemName: "figure.walk.circle").renderingMode(.template)
                    Text("Steps")
                })
                .tag(2)
            ProfileView()
                .tabItem {
                    Image(systemName: "person")
                    Text("Profile")
                }
                .tag(3)
        }
        .accentColor(Color("ColorOnboarding"))
        .navigationBarBackButtonHidden(true)
    }

import SwiftUI
import HealthKit

struct StepView: View {
    private var healthStore: HealthStore?
    @State private var presentClipboardView = true
    @State private var steps: [Step] = [Step]()
    init() {
        healthStore = HealthStore()
    }
    private func updateUIFromStatistics(_ statisticsCollection: HKStatisticsCollection) {
        let now = Date()
        let startOfDay = Calendar.current.startOfDay(for: now)
        statisticsCollection.enumerateStatistics(from: startOfDay, to: now) { (statistics, stop) in
            let count = statistics.sumQuantity()?.doubleValue(for: .count())
            let step = Step(count: Int(count ?? 0), date: statistics.startDate, wc: Double(count ?? 0 / 1000 ))
            steps.append(step)
        }
    }
    var body: some View {  
        VStack {
            ForEach(steps, id: \.id) { step in
                VStack {
                        HStack{
                            Text("WC")
                            Text("\(step.wc)")
                        }
                        HStack {
                            Text("\(step.count)")
                            Text("Total Steps")
                        }
                        Text(step.date, style: .date)
                            .opacity(0.5)
                        Spacer()
                }
            }
            .navigationBarBackButtonHidden(true)
        }
        .onAppear() {
            if let healthStore = healthStore {
                healthStore.requestAuthorization { (success) in
                    if success {
                        healthStore.calculateSteps { (statisticsCollection) in
                            if let statisticsCollection = statisticsCollection {
                                updateUIFromStatistics(statisticsCollection)
                            }
                        }
                    }
                }
            }
        }
        .onDisappear() {
            self.presentClipboardView.toggle()
        }
    }
}

struct Step: Identifiable {
    let id = UUID()
    let count: Int?
    let date: Date
    let wc: Double
}

class HealthStore {
    var healthStore: HKHealthStore?
    var query: HKStatisticsCollectionQuery?
    init() {
        if HKHealthStore.isHealthDataAvailable() {
            healthStore = HKHealthStore()
        }
    }
    func calculateSteps(completion: @escaping (HKStatisticsCollection?) -> Void ) {
        let stepType = HKQuantityType.quantityType(forIdentifier: HKQuantityTypeIdentifier.stepCount)!
        let now = Date()
        let startOfDay = Calendar.current.startOfDay(for: now)
        let daily = DateComponents(day:1)
        let predicate = HKQuery.predicateForSamples(withStart: startOfDay, end: Date(), options: .strictStartDate)
        query = HKStatisticsCollectionQuery(quantityType: stepType, quantitySamplePredicate: predicate, options: .cumulativeSum, anchorDate: startOfDay, intervalComponents: daily)
        query!.initialResultsHandler = { query, statisticCollection, error in
            completion(statisticCollection)
        }
        if let healthStore = healthStore, let query = self.query {
            healthStore.execute(query)
        }
    }
    
    func requestAuthorization(completion: @escaping (Bool) -> Void) {
        let stepType = HKQuantityType.quantityType(forIdentifier: HKQuantityTypeIdentifier.stepCount)!
        guard let healthStore = self.healthStore else { return completion (false) }
        healthStore.requestAuthorization(toShare: [], read: [stepType]) { (success, error) in
            completion(success)
        }
    }
}

    struct StepView: View {
        private var healthStore: HealthStore?
        @State private var presentClipboardView = true
        @State private var steps: [Step] = [Step]()
        init() {
            healthStore = HealthStore()
        }
        private func updateUIFromStatistics(_ statisticsCollection: HKStatisticsCollection) {
            let now = Date()
            let startOfDay = Calendar.current.startOfDay(for: now)
            statisticsCollection.enumerateStatistics(from: startOfDay, to: now) { (statistics, stop) in
                let count = statistics.sumQuantity()?.doubleValue(for: .count())
                let step = Step(count: Int(count ?? 0), date: statistics.startDate, wc: Double(count ?? 0 / 1000 ))
                steps.append(step)
            }
        }
        var body: some View {  
            VStack {
                ForEach(steps, id: \.id) { step in
                    VStack {
                            HStack{
                                Text("WC")
                                Text("\(step.wc)")
                            }
                            HStack {
                                Text("\(step.count ?? 0)")
                                Text("Total Steps")
                            }
                            Text(step.date, style: .date)
                                .opacity(0.5)
                        CircularProgress(steps: step.count) //ERROR
                            Spacer()
                    }
                }
                .navigationBarBackButtonHidden(true)
                
            }
            
            .onAppear() {
                if let healthStore = healthStore {
                    healthStore.requestAuthorization { (success) in
                        if success {
                            healthStore.calculateSteps { (statisticsCollection) in
                                if let statisticsCollection = statisticsCollection {
                                    updateUIFromStatistics(statisticsCollection)
                                }
                            }
                        }
                    }
                }
            }
            .onDisappear() {
                self.presentClipboardView.toggle()
            }
        }
    }

    struct CircularProgress: View {
    var steps: Binding<Int>
    var body: some View {
        ZStack {
            Color.progressBarColor
                .edgesIgnoringSafeArea(.all)
            VStack {
                ZStack {
                    Label()
                    Outline(steps: steps)
                }
            }
        }
    }
}

struct Label: View {
    var percentage: CGFloat = 20
    var body : some View {
        ZStack {
            Text(String(format: "%.0f", percentage))
                .font(Font.custom("SFCompactDisplay-Bold", size: 56))
        }
    }
}

struct Outline: View {
    var steps: Binding<Int>
    var percentage: CGFloat = 20
    var colors : [Color] = [Color.trackProgressBarColor]
    var body: some View {
        ZStack {
            Circle()
                .fill(Color.clear)
                .frame(width: 250, height: 250)
                .overlay(
                    Circle()
                        .trim(from: 0, to: percentage * 0.01)
                        .stroke(style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .round))
                        .fill(AngularGradient(gradient: .init(colors: colors), center: .center, startAngle: .zero, endAngle: .init(degrees: 360)))
                ).animation(.spring(response: 2.0, dampingFraction: 1.0, blendDuration: 1.0))
        }
    }
}