Building Apps with SwiftUI

Creating Cryptocoin Listview

Your browser needs to be JavaScript capable to view this video

Try reloading this page, or reviewing your browser settings

In this video segment, we will create a list view in SwiftUI to display initial mock data.

Keywords

  • listview
  • swiftui views
  • scrollable lists
  • xcode 11
  • ios 13
  • swift

About this video

Author(s)
Mehul Mohan
First online
22 August 2019
DOI
https://doi.org/10.1007/978-1-4842-5310-6_2
Online ISBN
978-1-4842-5310-6
Publisher
Apress
Copyright information
© Mehul Mohan 2019

Video Transcript

It’s crypto time. Now, in this list, what you want to do is we need to have our own balances as well as the cryptocurrencies we have on the application. So what I’m going to do here is, first of all, I’m going to create a new struct. Struct. And I’m going to say this is a coin and it would be a simple struct. So I’m going to say that this is, let’s say– have an ID, a name, a price, and an icon. So these are the four properties a particular coin would hold in our application.

And what I’m going to do is I’m going to create an array, first of all, and, let’s say I name it rates. This is a array of coins and we’re going to get some coins right here. So what I’m going to do is I’m going to say that this is a coin having an ID of, let’s say, bitcoin– name is bitcoin. Obviously, price– let’s say the current price right now in the market, as I record this video, is 9,733.95 US dollars and an icon of bitcoin.

So we need another coin right here. Let’s just add another coin saying LDC, that is Litecoin. And its price is 78 US dollars and the icon is Litecoin. Similarly, I’m going to add one, two, three more coins right here saying the third one is a Ripple. It’s very less– that is 0.30 US dollars. The fourth one is Tron, which is even less. That is 0.02. And, finally, the fifth one would be Ethereum– Ethereum, which would be $200.45 as of now. And this would be Ethereum. This would be Tron. This would be Ripple. This would be Litecoin. And there we go.

All right, so once we have that in place, what we could do is– next, we need to have this particular thing inside our list. So what I’m going to do is I’m going to actually create a section here, and how do we do that? Well, in a list, you can pretty much go ahead and see a section and we can see it’s header is text– “wow, this looks good.” And there we go. So everything is as simple as that in SwiftUI.

So, now, if you just go ahead and then obviously resume this, what we’re going to see is on the right we’re going to get a section now with a header saying, “wow, this looks good,” but only if it would build the scheme. All right, so here we go. And on the right, as we can see, it says, “wow, this looks good” as the section header.

So what do we want to do instead is we want to say, let’s say, current prices. And instead of statically adding the elements, we want to add elements dynamically using forEach in SwiftUI. So how do we do that? Well, to do that, what we’re going to do is we’re going to make use of forEach and what it would expect you to pass in is an array. So I’m going to say this is my rates and how do we want– or rather let me just create this, first of all. So here’s our array.

And in this array, obviously, we have each element as– and I’m– just– I trading over each element as a coin. So what we want to do is– first of all, let me just go ahead and display the coin.name only. So once we do that, and hit save, and let it build, we’re going to see that inside our list right here we’re going to have the names of the coin. And we actually would see that it does not really build the content Swift file because you need to specify a unique identifier on this particular array– that is rates. So what we can do is we can just pass in and identified by– that allows us to have a manual property, which we could pass in right here.

I’m going to save this as self dot ID. And the reason for that is you can see that ID of every coin would be different, obviously. So we are identifying all the items in this rate using the ID they contain. And whenever we get that every coin, we just– I trade over that and we just pass in coin.name. And as you can see, on the right, we have our coins listed in the list view.