无人问津的设置页面,如何做到小而精美?

·  阅读 13218
无人问津的设置页面,如何做到小而精美?

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

项目背景

使用掘金App以来,对于掘金App端的设计风格和交互都是比较满意的。但某一天当我无聊点开“设置”页面的时候,一股浓浓的“不协调感”扑面而来。

啊这……这也太原始了吧,一点都不优雅。我不能让这种不优雅一直存在,于是就动手尝试做一个新的“设置”页面。

项目搭建

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

1.png

页面样式

我们先来看下修改后最终的效果,示例:

2.png

在绘制整个页面之前,我们需要先行分析整个页面的结构,它包括顶部导航个人信息栏设置功能栏退出登录按钮组成。

因此,在我们最开始写代码时,需要梳理好页面结构部分。

顶部导航

对于顶部导航栏来说,我们可以使用NavigationView构建标准的顶部导航。示例:

NavigationView {
    ZStack {
        Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255).edgesIgnoringSafeArea(.all)

    }
    .navigationBarTitle("设置", displayMode: .inline)
}
复制代码

3.png

上述代码中,我们除了使用navigationBarTitle修饰符创建标题外,还使用ZStack叠加视图和edgesIgnoringSafeArea修饰符,给整个页面填充了一个背景颜色。

对于左侧返回按钮,我们可以单独构建样式,示例:

// 返回上一页
private var backToMineView: some View {
    Button(action: {
    }) {
        Image(systemName: "arrow.backward")
            .foregroundColor(.black)
    }
}
复制代码

再使用navigationBarItems修饰符创建导航栏按钮,示例:

.navigationBarItems(leading: backToMineView)
复制代码

4.png

个人信息栏

个人信息栏目需要突出个人的基础的账号信息,这里考虑的是使用用户头像用户昵称用户职务作为主要展示信息。示例:

// 个人信息
private var mineMessageView: some View {
    Button(action: {
    }) {
        HStack(spacing: 15) {
            Image("me")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 60)
                .clipShape(Circle())
                .overlay(Circle().stroke(Color(.systemGray5), lineWidth: 1))

            VStack(alignment: .leading, spacing: 5) {
                Text("文如秋雨")
                    .font(.system(size: 17))
                    .foregroundColor(.black)
                Text("高级产品经理")
                    .font(.system(size: 14))
                    .foregroundColor(.gray)
            }
        }
        .padding(.vertical, 10)
    }
}
复制代码

上述代码中,我们使用ImageText构建样式部分,文字部分使用VStack纵向排布,整个文字部分和Image图片采用HStack横向排布,至于样式修饰符这里就不展开说了。

而在我们将视图展示前,我们还做需要做一件事情,由于个人信息栏设置功能栏退出按钮都是呈现分段式卡片效果,我们可以使用Form表单和Section段落来构建样式,示例:

Form {
    Section {
        mineMessageView
    }
}
复制代码

5.png

我们发现了存在2个问题,一是整个App背景颜色由于Form表单的样式影响被覆盖了,二是整个个人信息栏缺少了右边的“向右”按钮。

关于表单样式部分被覆盖的情况,我们可以在渲染页面时去掉背景颜色,这个我们之前做过,示例:

init() {
    UITableView.appearance().backgroundColor = .clear
}
复制代码

6.png

而缺少“向右”的指示按钮,是因为我们要使用到基于NavigationView顶部导航的跳转,当我们使用NavigationLink作为跳转方法时,系统会自带指示按钮,所以在这里我们没有自己绘制按钮样式。

我们继续完成下面的内容。

设置功能栏

下一部分是设置功能栏,我们发现这样式之间有共通的地方,左侧图标加设置功能文字,右侧次要说明文字加跳转指示。

跳转指示我们依旧放在一边,我们面对具有相同样式式,常用的方式是抽离出来,这样可以减少代码量。示例:

// MARK: 栏目结构
struct listItemView: View {
    var itemImage: String
    var itemName: String
    var itemContent: String
    var body: some View {
        Button(action: {
        }) {
            HStack {
                Image(systemName: itemImage)
                    .font(.system(size: 17))
                    .foregroundColor(.black)
                Text(itemName)
                    .foregroundColor(.black)
                    .font(.system(size: 17))
                Spacer()
                Text(itemContent)
                    .font(.system(size: 14))
                    .foregroundColor(.gray)
            }.padding(.vertical, 15)
        }
    }
}
复制代码

我们构建一个新的视图listItemView,声明一个必要变量:itemImage图标、itemName功能名称、itemContent功能次要文字。

然后构建基础的样式框架,使用HStack构建横向视图,放置1个Image图片、2个Text文本。

构建好后,我们在新的的Section段落中构建样式。示例:

Section {
    listItemView(itemImage: "lock", itemName: "账号绑定", itemContent: "已绑定")
    listItemView(itemImage: "gear.circle", itemName: "通用设置", itemContent: "")
    listItemView(itemImage: "briefcase", itemName: "简历管理", itemContent: "未上传")
    listItemView(itemImage: "icloud.and.arrow.down", itemName: "版本更新", itemContent: "Version 6.2.8")
    listItemView(itemImage: "leaf", itemName: "清理缓存", itemContent: "0.00MB")
    listItemView(itemImage: "person", itemName: "关于掘金", itemContent: "")
}
复制代码

7.png

退出登录按钮

最后是退出登录按钮,我们构建一个新的视图,示例:

// 退出登录
private var signOutView: some View {
    Button(action: {
    }) {
        Text("退出登录")
            .font(.system(size: 17))
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 30, maxHeight: 30)
            .foregroundColor(.red)
            .cornerRadius(8)
            .padding(.vertical, 5)
    }
}
复制代码

我们也在新的段落中构建样式,示例:

var body: some View {
    NavigationView {
        ZStack {
            Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255).edgesIgnoringSafeArea(.all)

            Form {
                Section {
                    mineMessageView
                }
                Section {
                    listItemView(itemImage: "lock", itemName: "账号绑定", itemContent: "已绑定")
                    listItemView(itemImage: "gear.circle", itemName: "通用设置", itemContent: "")
                    listItemView(itemImage: "briefcase", itemName: "简历管理", itemContent: "未上传")
                    listItemView(itemImage: "icloud.and.arrow.down", itemName: "版本更新", itemContent: "Version 6.2.8")
                    listItemView(itemImage: "leaf", itemName: "清理缓存", itemContent: "0.00MB")
                    listItemView(itemImage: "person", itemName: "关于掘金", itemContent: "")
                }
                Section {
                    signOutView
                }
            }
        }
        .navigationBarTitle("设置", displayMode: .inline)
        .navigationBarItems(leading: backToMineView)
    }
}
复制代码

项目展示

8.png

恭喜你,完成了本章的全部内容!

接下里的章节,我们将继续完成掘金App设置页面的功能详情页,敬请期待!

快来动手试试吧。

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

分类:
iOS
标签:
收藏成功!
已添加到「」, 点击更改