遥控器老是乱丢,使用SwiftUI搭建一个遥控器App吧~

8,272

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第15天,点击查看活动详情

在本章中,你将学会使用SwiftUI搭建一个小米遥控器页面。

项目背景

每次在看电视的时候把遥控器随意丢在沙发上,过一会儿总是莫名其妙地找不到了。

打开米家App,里面的遥控器太简约了,无法复原实体遥控器的美观。

于是乎,就想着仿造遥控器外形自己做一个遥控器页面。

说干就干。

项目搭建

首先,创建一个新的SwiftUI项目,命名为RemoteControl

1.png

页面样式

我们来看看小米遥控器的样式,示例:

2.png

复用视图

我们发现存在很多相同外观样式的按钮,这里我们可以抽离出相同的结构,以便于简化代码。示例:

// 按钮复用视图
struct imageBtnView: View {
    var image: String
    var imageColor: Color

    var body: some View {
        Button(action: {
        }) {
            Image(systemName: image)
                .foregroundColor(imageColor)
                .font(.system(size: 17))
                .frame(width: 40, height: 40)
                .background(Color(red: 66 / 255, green: 66 / 255, blue: 66 / 255))
                .clipShape(Circle())
                .overlay(Circle().stroke(Color.black, lineWidth: 4))
        }
    }
}

上述代码中,我们创建了一个新的视图imageBtnView

我们声明了2个变量image图片,imageColor图片颜色。然后在body中构建视图样式,我们给Image图片内容引用我们声明好的变量image,图标填充颜色引用我们声明好的变量imageColor

然后完善了按钮样式,大小17,背景颜色为浅灰色,背景为圆形,最后再覆盖一个圆形的边框

基础按钮

我们在ContentView视图中使用我们构建的imageBtnView结构体完成样式,示例:

struct ContentView: View {
    var body: some View {
        VStack(spacing: 32) {
            imageBtnView(image: "power", imageColor: .red)
            imageBtnView(image: "mic", imageColor: .white)

            HStack(spacing: 32) {
                imageBtnView(image: "house", imageColor: .white)
                imageBtnView(image: "arrow.uturn.backward", imageColor: .white)
                imageBtnView(image: "slider.horizontal.3", imageColor: .white)
            }
            Spacer()
        }
        .padding()
        .padding(.top, 40)
        .frame(maxHeight: .infinity)
        .background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
        .cornerRadius(16)
    }
}

3.png

上述代码中,我们使用之前构建好的结构体imageBtnView很容易地构建了除了遥控器的样式。

我们只需要注意好排列,最后给整个排布好的视图加一个背景颜色圆角,一个基本的遥控器样式就完成了。

我们看看还少了什么,是的,少了上下左右按钮,以及音量调节按钮

控制按钮

我们先来构建上下左右控制按钮,示例:

// 上下左右按钮
func mainBtnView() -> some View {
    Circle()
        .fill(Color(red: 66 / 255, green: 66 / 255, blue: 66 / 255))
        .frame(width: 190, height: 190)
        .overlay(Circle().stroke(Color.black, lineWidth: 6))
        .overlay {
            Button(action: {
            }) {
                Circle()
                    .fill(Color(red: 66 / 255, green: 66 / 255, blue: 66 / 255))
                    .frame(width: 100, height: 100)
                    .overlay(Circle().stroke(Color.black, lineWidth: 6))
            }
        }
}

4.png

上述代码中,我们创建了一个新视图mainBtnView

我们使用Circle圆形,再使用overlay修饰符叠加了一个小一点的Circle圆形,这样我们就完成了上下左右操作按钮。

音量按钮

最后是我们的音量调节按钮,示例:

// 音量按钮
func volumeBtnView() -> some View {
    VStack(spacing: 100) {
        Button(action: {
        }) {
            Image(systemName: "plus")
                .font(.system(size: 17))
                .foregroundColor(.white)
        }
        Button(action: {
        }) {
            Image(systemName: "minus")
                .font(.system(size: 17))
                .foregroundColor(.white)
        }
    }
    .padding()
    .background(Color(red: 66 / 255, green: 66 / 255, blue: 66 / 255))
    .cornerRadius(32)
    .overlay(RoundedRectangle(cornerRadius: 32).stroke(Color.black, lineWidth: 4))
}

5.png

上述代码中,我们创建了一个新视图volumeBtnView

我们使用2个Image图片利用VStack纵向排布,最后使用overlay覆盖一个边框。

这样我们就完成了遥控器的所有样式内容。

项目预览

6.gif

恭喜你,完成了整个项目的全部内容!

快来动手试试吧。

如果本专栏对你有帮助,不妨点赞、评论、关注~