扬庆の博客

SwiftUI - 交互式侧边栏

iOS SwiftUI
字数统计: 228阅读时长: 1 min
2024/04/01 Share

SwiftUI -交互式侧边栏

Interactive Side Menu

效果

review_gif.gif

UI 设计

页面架构

SideMenu 部分

sideMenu页面内容

Tab 枚举配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
enum Tab: String, CaseIterable {
    case home = "house.fill"
    case bookmark = "book.fill"
    case favourites = "heart.fill"
    case profile = "person.crop.circle"
    case logout = "rectangle.portrait.and.arrow.forward.fill"

    var title: String {
        switch self {
            case .home: return "Home"
            case .bookmark: return "Bookmark"
            case .favourites: return "Favourites"
            case .profile: return "Profile"
            case .logout: return "Logout"
        }
    }
}

头部声明

SideBar所需头部声明

主体部分

SIdeBar主体部分

内容部分多一个蒙层可点击(收起sideMenu)

显示侧边栏的时候多一个蒙层

3d旋转动画

3d旋转动画

内容部分左上角按钮动画效果

内容部分左上角按钮动画

  • ==到这里==, 预览时能够看到内容部分, 在通过 dragGesture 拖拽的时候, 随之而来有一个 3D 旋转动画.

内容部分, 多一些设置

  1. 有圆角；
  2. 层提供展开点击可收回 sideMenu；
  3. showMenu按钮的动画。

sideBar展开收起逻辑

sideBar展开收起逻辑

多处手势添加

手势

状态设置

状态部分设置

原文作者：杨庆

原文链接：http://www.yqblog.cn/2024/04/01/%E4%BA%A4%E4%BA%92%E5%BC%8F%E4%BE%A7%E8%BE%B9%E6%A0%8F/

发表日期：April 1st 2024, 12:37:14 pm

更新日期：April 2nd 2024, 1:13:35 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. SwiftUI -交互式侧边栏
    1. 1.0.1. 效果
    2. 1.0.2. UI 设计
      1. 1.0.2.1. SideMenu 部分
  2. 1.1. SideBar 部分
    1. 1.1.1. 头部声明
    2. 1.1.2. 主体部分
      1. 1.1.2.1. 内容部分多一个蒙层可点击(收起sideMenu)
      2. 1.1.2.2. 3d旋转动画
      3. 1.1.2.3. 内容部分左上角按钮动画效果
    3. 1.1.3. sideBar展开收起逻辑
      1. 1.1.3.1. 多处手势添加
    4. 1.1.4. 状态设置
Total : 62
2024
2023
2022
2021
Hexo iOS Charles cocoapods 系统 iOS高级知识点 Moya RxSwift Swift语法 Swift iOS原理 xib iOS15 软件 rxSwift iOS高级控件 消息推送 gitHub SwiftUI Flutter brew Others
Hexo iOS Swift语法 iOS原理 iOS开发 Flutter