SwiftUI Minimalist Tutorial 39: Build a ColourAtla Color Card App

In this chapter, you will learn to use URLSessionand ContextMenubuild a ColourAtlacolor card App.

Background of the project

For a long time, there has been a special favor for traditional Chinese colors .

While browsing some information, I saw some color matching content released by bloggers, which talked about the concept of color card . After some understanding and learning, I wanted to create a color matching app .

Although it Apphas not been fully developed yet, I will share some of the completed functional construction methods here, hoping to help SwiftUIdevelopers.

So, without further ado, let's get started.

Project construction

First, create a new SwiftUIproject named ColourAtla.

page build

Let's briefly analyze the composition of the page. It consists of a Titletitle and a color card Listlist. Then, in the color card list, long-press a single color card to get the floating window effect.

After understanding the basic components, let's build the content piece by piece.

Title construction

The first is the header section, which we OpaqueTypesbuild using the opaque type method View. Example:

//MARK: 标题

private var CardTitleView: some View {
    Text("世界最高级的颜色")
        .font(.system(size: 17))
        .fontWeight(.bold)
}

In the above code, we declare a private view CardTitleView, then construct the title we need in it Text, and use some modifiers to make the content look harmonious.

color extension

After the title is created, let's build the color card list. Before building the color card, in order to use the hexadecimal color value, let's extend the existing Colorcolor construction method . ExtensionExample:

我们创建一个新的Swift文件，命名为ColorHexString。

import SwiftUI

extension Color {
    static func rgb(_ red: CGFloat, green: CGFloat, blue: CGFloat) -> Color {
        return Color(red: red / 255, green: green / 255, blue: blue / 255)
    }
    static func Hex(_ hex: UInt) -> Color {
        let r: CGFloat = CGFloat((hex & 0xFF0000) >> 16)
        let g: CGFloat = CGFloat((hex & 0x00FF00) >> 8)
        let b: CGFloat = CGFloat(hex & 0x0000FF)
        return rgb(r, green: g, blue: b)
    }
}

上述代码中，我们给Color进行了Extension扩展。

我们通过接收一个UInt十六进制颜色值，然后把它转换成RGB颜色值，这样我们只需要输入十六进制颜色值，Color就可以转换为可以使用的RGB颜色值了。

单张色卡

接下来，我们回到ContentView文件，先来构建单张色卡。示例：

// MARK: 卡片视图

struct CardViewExamples: View {

    var body: some View {
        ZStack(alignment: Alignment(horizontal: .center, vertical: .center), content: {

            // 背景卡片
            Rectangle()
                .fill(Color.Hex(0xFF0000))
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 110)
                .cornerRadius(8)

            HStack {
                VStack(alignment: .leading, spacing: 10) {

                    //颜色名称
                    Text("中国红")
                        .fontWeight(.bold)
                        .foregroundColor(Color.white)
                        .font(.system(size: 17))
                    // 颜色值
                    Text("#FF0000")
                        .fontWeight(.bold)
                        .foregroundColor(Color.white)
                        .font(.system(size: 14))
                }
                Spacer()
            }.padding()
        })
    }
}

上述代码中，我们使用Struct构造体创建视图的方式构建了单张色卡的内容。

在单张色卡，我们构建了一个Rectangle矩形作为背景，然后填充了一个“中国红”，顺便调整了它的大小和圆角。

依此再构建了两个Text，作为颜色名称和颜色值，最后使用ZStack将三个元素组成一个整体。

为什么需要使用Struct构造体的方式，而不使用OpaqueTypes不透明类型的方法，这是因为我们构建的色卡之后需要提取参数出来，然后在ContentView视图中遍历多张色卡，因此使用Struct构造体的方式创建视图。

参数抽离

接下拉，为了更加方便地遍历出多张色卡，我们将相同的参数进行抽离替换。

在色卡列表中，我们抽离色卡背景色、色卡颜色名称、色卡颜色值3个参数，示例：

var cardBGColor: Color
var cardColorName: String
var cardColorRBG: String

抽离出参数后，由于我们没有给CardViewExamples构造体中的参数赋值，因此我们在ContentView视图调用时需要补充参数对应的参数值。

CardViewExamples(cardBGColor: Color.Hex(0xFF0000), cardColorName: "中国红", cardColorRBG: "#FF0000")

悬浮窗口

单张色卡完成后，我们来尝试完成长按色卡唤起悬浮窗口并实现复制颜色值。

在之前的章节中，我们学习过ContextMenu上下文菜单的使用，在这里我们依旧使用的是ContextMenu上下文菜单构建悬浮窗口。示例：

// 长按复制颜色值
    .contextMenu {
        Button(action: {
            UIPasteboard.general.string = cardColorName
            }, label: {
                Text("复制颜色值")
                })
            }
            .padding(.horizontal)

上述代码中，我们使用ContextMenu上下文菜单创建了悬浮窗口。

当我们长按单张色卡时，我们就把cardColorName卡片颜色值的内容复制到剪切板中，这样我们就实现了通过长按复制色卡颜色值的交互。

数据模型

模型创建

完成单张色卡创建后，我们需要根据单张色卡的内容遍历多张色卡，通用的方式是创建模型数组，再根据模型数组结合网络请求，获得放在服务端的Json数据，然后再在本地渲染。

我们创建一个Swift文件，命名为Model.swift。

import SwiftUI

struct CardModel:Decodable {
    var cardBGColor: UIn
    var cardColorName: String
    var cardColorRBG: String
}

上述代码中，我们创建了一个结构体CardModel，遵循Decodable协议。

Decodable协议，用于将JSON对象解析为结构体或类，这样我们就可以通过网络请求获得JSON对象，然后通过Decodable协议解析在本地。

由于我们的色卡背景颜色是十六进制的颜色值，因此cardBGColor参数需要声明为UInt类型，其他cardColorName、cardColorRBG都是String字符串类型。

我们回到ContentView文件中，首先我们先获得定义好的CardModel结构体。

@State var cardItems: [CardModel] = []

然后，我们使用OpaqueTypes不透明类型的方法创建一个卡片视图，我们将CardListView视图展示在ContentView中展示。

// MARK: 色卡列表视图

private var CardListView: some View {
    ScrollView(.vertical, showsIndicators: false, content: {
        ForEach(cardItems, id: \.cardColorRBG) { item in
            VStack(spacing: 20) {
                CardViewExamples(cardBGColor: Color.Hex(item.cardBGColor), cardColorName: item.cardColorName, cardColorRBG: item.cardColorRBG)
            }
        }
    })
}

这样，色卡列表视图的框架就创建好了。

但是我们在预览时没有看到色卡，这是因为我们的色卡列表视图只是搭建了框架，但是没有数据，下面我们来完成数据部分。

Json数据

色卡框架搭建好后，我们在云端创建好Json数据。

[
{"cardBGColor":16711680,"cardColorRBG":"#FF0000","cardColorName":"中国红"},
{"cardBGColor":15226919,"cardColorRBG":"#E85827","cardColorName":"爱马仕橙"},
{"cardBGColor":16439902,"cardColorRBG":"#FADA5E","cardColorName":"拿破里黄"},
{"cardBGColor":35980,"cardColorRBG":"#008C8C","cardColorName":"马尔斯绿"},
{"cardBGColor":3175035,"cardColorRBG":"#30727B","cardColorName":"不来梅蓝"},
{"cardBGColor":6901074,"cardColorRBG":"#694D52","cardColorName":"莫兰迪色"},
{"cardBGColor":5338771,"cardColorRBG":"#517693","cardColorName":"马耳他蓝"},
{"cardBGColor":12199,"cardColorRBG":"#002FA7","cardColorName":"克菜因蓝"}
]

上述代码中，我们在某平台创建了Json数据，并且获得了可以访问Json数据的API接口。

我们将API接口地址复制，并在ContentView中声明一个常量存储它。

let JsonURL = "https://api.npoint.io/dc5a1718e0e958613ade"

网络请求

With the API interface , the local color card list view framework is also established, and the next step is to complete the network request part.

// MARK: 网络请求

func getColors() {
    let session = URLSession(configuration: .default)
    session.dataTask(with: URL(string: JsonURL)!) { data, _, _ in
        guard let jsonData = data else { return }
        do {
            let colors = try JSONDecoder().decode([CardModel].self, from: jsonData)
            self.cardItems = colors
        } catch {
            print(error)
        }
    }
    .resume()
}

In the above code, we create a network request method getColors. We use the official URLSessionnetwork request framework, and then obtain the data of the URLaddress , and match the data with the parameters in the array JsonURLby JSONDecoderparsing the data. After matching, store the data in .jsonCardModelcardItems

We call the method ContentViewwhen the view is displayed .getColors

.onAppear(perform: {
    getColors()
})

We click the run operation on the simulator to preview the effect.

Loading

Since the network request takes time , in order to make our ColourAtlacolor card experience better , we can add a view as the default display when Appthe color card list view has not been loaded . Example:Loading

if cardItems.isEmpty {
    Spacer()
    ProgressView()
    Spacer()
} else {
    CardListView
}

We finally preview the overall effect .

That's all for this chapter.

Come and try it!

If this column is helpful to you, please like, comment, and follow~

I am participating in the recruitment of the creator signing program of the Nuggets Technology Community, click the link to register and submit .