Creating a chart Page-View navigation
Next, we are going to create a Page View navigation controller. Just as you would expect on a phone, you will be able to swipe from the right to left and see different content on each page. You will also see some dots at the bottom of the page, which shows which page is being displayed currently.
Open ChartsView
and let's get started. Inside the body
variable, replace Text('Charts View')
with the following:
TabView { // Step 1 BarChartView() // Step 2 WedgeChartView() RingView() }.tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic)) // Step 3
We just added all of the code for ChartsView
, so let's look at what we did:
- We wrap all of our views inside a
TabView
. - Next, we set up each page by just listing them inside the
TabView
. - We set the
.tabViewStyle()
modifier toPageTabViewStyle(indexDisplayMode...