How To Implement Card Drawing In Swift

In this tutorial of our SwiftUI Tip series, we are going to implement a common mobile UI blueprint usually known equally Bill of fare UI. The SwiftUI framework has fabricated edifice app UI a breeze. After, you volition encounter that by using stacks, image, and text views, you should exist able to create a card view like the one shown below.

Please note that this tutorial requires you to accept Xcode 11 running on macOS Catalina (v10.15).

Creating a New Project for Building the Card UI

If you oasis't opened Xcode, fire it up and create a new project using theSingle View Application template. In the next screen, gear up the product name toCardUI (or whatever proper name you lot similar) and make full in all the required values. Just brand sure you selectSwiftUI for theUser Interface option.

If you're new to SwiftUI, you probably code the user interface in theContentView.swift file. That's completely fine, but I want to bear witness yous a amend way to organize your code. For the implementation of the card view, let's create a separate file for it. In the project navigator, right clickSwiftUIScrollView and chooseNew File….

In theUser Interface section, choose theSwiftUI View template and clickNext to create the file. Name the fileCardView and salvage it in the project binder.

The code inCardView.swift looks very like to that ofContentView.swift. Similarly, y'all tin can preview the UI in the canvas.

Preparing the Image Files

At present we're prepare to code the card view. But first, you need to fix the image files and import them in the asset catalog. If you don't want to prepare your own images, you tin can download the sample images from https://www.appcoda.com/resource/swiftui/SwiftUIScrollViewImages.zip. In one case you unzip the paradigm archive, select Assets.xcassets and drag all the images to the nugget catalog.

Implementing the Card View

Now switch dorsum to the CardView.swift file. If you lot look at card view UI again, the carte du jour view is composed of two parts: the upper part is the epitome and the lower part is the text clarification.

Let's starting time with the image. I'll brand the image resizable and scale it to fit the screen only retain the aspect ratio. You tin can write the code like this:

struct CardView : View {

var body : some View {

Paradigm ( "swiftui-push button" )

. resizable ( )

. aspectRatio ( contentMode : . fit )

}

If you forgot what these 2 modifiers are nearly, go back and read the chapter virtually the Image object. Next, let'southward implement the text description. Yous may write the code like this:

VStack ( alignment : . leading ) {

Text ( "SwiftUI" )

. font ( . headline )

. foregroundColor ( . secondary )

Text ( "Drawing a Border with Rounded Corners" )

. font ( . title )

. fontWeight ( . black )

. foregroundColor ( . chief )

. lineLimit ( 3 )

Text ( "Written by Simon Ng" . uppercased ( ) )

. font ( . explanation )

. foregroundColor ( . secondary )

}

Obviously, you demand to use Text to create the text view. Since we actually accept iii text views in the description, that are vertically aligned, we employ a VStack to embed them. For the VStack, we specify the alignment as .leading. This will align the text view to the left of the stack view.

The modifiers of Text take been discussed in our first SwiftUI tutorial and this tutorial. Y'all tin refer to it if you find any of the modifiers are confusing. But one thing about the .primary and .secondary colors should be highlighted.

While you lot can specify a standard color like .black and .purple in the foregroundColor modifier, iOS thirteen introduces a set of arrangement color that contains primary, secondary, and tertiary variants. By using this color variants, your app tin easily support both calorie-free and dark modes. For case, the main color of the text view is set to black in calorie-free mode past default. When the app is switched over to dark way, the primary colour will be adjusted to white. This is automatically arranged by iOS, and then y'all don't have to write extra lawmaking to support the night mode.

To accommodate the image and these text views vertically, we use a VStack to embed them. The current layout is shown in the effigy below.

It'south not done still. At that place are notwithstanding a couple of things we need to implement. First, if the text description cake should be left aligned to the edge of the image.

How do you do that?

Base on what we've learned, nosotros can embed the VStack of the text views in a HStack. And and then, we will use a Spacer to push button the VStack to the left. Permit's see if this works.

If you've inverse the code to the one shown in the figure below, the VStack of the text views are aligned to the left of the screen. However, the heading is truncated.

Adjusting the Layout Priority

By default, both the text stack and the spacer occupy half of the parent view. This is why the heading couldn't exist fully displayed. To fix the outcome, you will need to suit the layout priority of the text stack using the layoutPriority modifier. The larger the value the higher is the priority. This means if we set the layout priority of the VStack of the text views to a larger value, iOS will offering more than space to fully return the text views before allocating the space to the Spacer. The figure below shows you lot the upshot.

Information technology would be meliorate to add some paddings effectually the HStack. Insert the padding modifier like this:

HStack {

VStack ( alignment : . leading ) {

}

. layoutPriority ( 100 )

Spacer ( )

}

. padding ( )

Lastly, information technology's the border. Nosotros have discussed how to draw a border with rounded corners in the earlier chapter. We tin can use the overlay modifier and draw the edge using the RoundedRectangle. Here is the complete code:

ane

half dozen

xiii

xiv

xviii

struct CardView : View {

var body : some View {

VStack {

Image ( "swiftui-push button" )

. resizable ( )

. aspectRatio ( contentMode : . fit )

HStack {

VStack ( alignment : . leading ) {

Text ( "SwiftUI" )

. font ( . headline )

. foregroundColor ( . secondary )

Text ( "Drawing a Border with Rounded Corners" )

. font ( . title )

. fontWeight ( . blackness )

. foregroundColor ( . main )

. lineLimit ( 3 )

Text ( "Written by Simon Ng" . uppercased ( ) )

. font ( . caption )

. foregroundColor ( . secondary )

}

. layoutPriority ( 100 )

Spacer ( )

}

. padding ( )

}

. cornerRadius ( x )

. overlay (

RoundedRectangle ( cornerRadius : 10 )

. stroke ( Colour ( . sRGB , scarlet : 150/255 , green : 150/255 , blue : 150/255 , opacity : 0.ane ) , lineWidth : i )

)

. padding ( [ . top , . horizontal ] )

}

In addition to the border, nosotros also add some paddings for the top, left, and right sides. At present you should take built the carte du jour view layout.

Make the Card View more Flexible

While the card view works, nosotros've hard-coded the image and text. To make it more flexible, allow's refactor the code. Outset, declare these variables for the image, category, heading, and author in CardView:

var epitome : Cord

var category : Cord

var heading : String

var author : String

Next, replace the values of the Image and Text views with these variables like this:

one

four

half dozen

viii

nine

eleven

VStack {

Prototype ( image )

. resizable ( )

. aspectRatio ( contentMode : . fit )

HStack {

VStack ( alignment : . leading ) {

Text ( category )

. font ( . headline )

. foregroundColor ( . secondary )

Text ( heading )

. font ( . championship )

. fontWeight ( . black )

. foregroundColor ( . chief )

. lineLimit ( iii )

Text ( author . uppercased ( ) )

. font ( . caption )

. foregroundColor ( . secondary )

}

. layoutPriority ( 100 )

Spacer ( )

}

. padding ( )

}

Once you made the changes, y'all will see an error in the CardView_Previews struct. This is because we've introduced some variables in CardView. We have to specify the parameters when using it.

So replace the code like this:

struct CardView_Previews : PreviewProvider {

static var previews : some View {

CardView ( prototype : "swiftui-button" , category : "SwiftUI" , heading : "Cartoon a Edge with Rounded Corners" , writer : "Simon Ng" )

}

This will set up the error. You now have built a flexible CardView which accepts different images and text. Base of operations on what yous've built, you lot tin farther employ this card view to build a slick list UI.

What exercise y'all think about this SwiftUI Tip series? If you lot savour reading the tutorial and find it helpful, please leave me a comment and allow me know. Likewise, if you take any suggestions for our next tip, drop us a annotate too.

Editor'due south notation: If yous desire to dive deeper and larn more about SwiftUI, you can check out our Mastering SwiftUI book.

Founder of AppCoda. Author of multiple iOS programming books including Beginning iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Follow me at Facebook, Twitter and Google+.