iOS QQ抽屉式导航的实现

QQ个人中心的侧滑功能(通常称为"抽屉式导航")可以通过以下几种方式在iOS中实现:

主要实现方案

  1. 使用第三方库

最快速的方式是使用成熟的第三方库:

  • SWRevealViewController:最流行的侧滑菜单库
  • MMDrawerController:另一个功能丰富的抽屉式导航库
  • KYDrawerController:轻量级的实现

示例代码(SWRevealViewController):

// 初始化
let revealViewController = SWRevealViewController(rearViewController: MenuViewController(), frontViewController: MainViewController())// 设置为主窗口根视图 
window?.rootViewController = revealViewController// 添加手势 
revealViewController?.tapGestureRecognizer()
revealViewController?.panGestureRecognizer()
  1. 自定义实现

如果需要完全自定义,可以自己实现:

class DrawerController: UIViewController {private var mainViewController: UIViewController!private var menuViewController: UIViewController!private var isMenuOpen = false private let menuWidth: CGFloat = 300init(mainViewController: UIViewController, menuViewController: UIViewController) {self.mainViewController = mainViewController self.menuViewController = menuViewControllersuper.init(nibName: nil, bundle: nil)}override func viewDidLoad() {super.viewDidLoad()addChild(mainViewController)view.addSubview(mainViewController.view)mainViewController.didMove(toParent: self)addChild(menuViewController)view.insertSubview(menuViewController.view, at: 0)menuViewController.didMove(toParent: self)menuViewController.view.frame = CGRect(x: -menuWidth, y: 0, width: menuWidth, height: view.bounds.height)let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:)))view.addGestureRecognizer(panGesture)}@objc private func handlePanGesture(_ recognizer: UIPanGestureRecognizer) {let translation = recognizer.translation(in: view)switch recognizer.state {case .changed:let newX = mainViewController.view.frame.origin.x + translation.x if newX >= 0 && newX <= menuWidth {mainViewController.view.frame.origin.x = newX menuViewController.view.frame.origin.x = newX - menuWidth }recognizer.setTranslation(.zero, in: view)case .ended:let velocity = recognizer.velocity(in: view)if velocity.x > 0 {openMenu()} else {closeMenu()}default: break}}func openMenu() {UIView.animate(withDuration: 0.3) {self.mainViewController.view.frame.origin.x = self.menuWidthself.menuViewController.view.frame.origin.x = 0}isMenuOpen = true }func closeMenu() {UIView.animate(withDuration: 0.3) {self.mainViewController.view.frame.origin.x = 0self.menuViewController.view.frame.origin.x = -self.menuWidth }isMenuOpen = false}
}

实现要点

  1. 视图层级:主视图在上,菜单视图在下
  2. 手势处理:需要处理滑动手势(UIPanGestureRecognizer)
  3. 动画效果:使用UIView.animate实现平滑过渡
  4. 边缘手势:可以添加UIScreenEdgePanGestureRecognizer实现从边缘滑出的效果
  5. 遮罩效果:QQ通常会在主视图上添加半透明黑色遮罩

高级优化

  1. 性能优化:使用UIViewPropertyAnimator实现更流畅的交互
  2. 阴影效果:为主视图添加阴影增加层次感
  3. 状态保存:记住菜单的打开/关闭状态
  4. 交互阻断:菜单打开时阻断主视图的交互

SwiftUI实现

如果你使用SwiftUI,可以这样实现:

struct ContentView: View {@State private var offset: CGFloat = 0 @State private var lastOffset: CGFloat = 0@GestureState private var dragOffset: CGFloat = 0var body: some View {let drag = DragGesture().updating($dragOffset) { value, state, _ instate = value.translation.width}.onEnded { value in withAnimation {if value.translation.width > 100 {offset = 300} else if value.translation.width < -100 {offset = 0 } else {offset = lastOffset }}lastOffset = offset }return ZStack(alignment: .leading) {MenuView().frame(width: 300)MainView().offset(x: max(0, offset + dragOffset)).gesture(drag)}}
}

选择哪种实现方式取决于你的项目需求和技术栈。第三方库可以快速实现,自定义实现则更加灵活可控。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/bicheng/82741.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Pandas】pandas DataFrame drop

Pandas2.2 DataFrame Reindexing selection label manipulation 方法描述DataFrame.add_prefix(prefix[, axis])用于在 DataFrame 的行标签或列标签前添加指定前缀的方法DataFrame.add_suffix(suffix[, axis])用于在 DataFrame 的行标签或列标签后添加指定后缀的方法DataFram…

长短期记忆网络 (LSTM) 详解:从原理到应用

一、引言&#xff1a;序列数据处理的挑战​ 在自然语言处理、语音识别、时间序列分析等领域&#xff0c;数据通常以序列形式存在&#xff0c;前后数据点之间存在依赖关系。传统循环神经网络 (RNN) 虽然能捕捉序列依赖&#xff0c;但存在严重的梯度消失 / 爆炸问题&#xff0c;…

三天掌握PyTorch精髓:从感知机到ResNet的快速进阶方法论

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 一、分析式AI基础与深度学习核心概念 1.1 深度学习三要素 数学基础&#xff1a; f(x;W,b)σ(Wxb)(单层感知机) 1.2 PyTorch核心组件 张量操作示例…

Linux操作系统概述

一、操作系统的作用 1、五大基本功能 &#xff08;1&#xff09;进程和线程的管理&#xff1a;进程线程的状态、控制、同步互斥、通信调度等 (2&#xff09;存储管理&#xff1a;分配/回收、地址转换、存储保护等 (3&#xff09;文件管理&#xff1a;文件目录、文件操作、磁盘…

Python爬虫第22节- 结合Selenium识别滑动验证码实战

目录 一、引言 二、滑动验证码原理与反爬机制 2.1 验证码原理 2.2 反爬机制 三、工程实战&#xff1a;滑动验证码识别全流程 3.1 工程准备 3.1.1 环境依赖 3.1.2 目标网站与验证码识别案例 3.2 核心破解流程 3.2.1 自动化打开网页与登录 3.2.2 获取验证码图片&#…

NSSCTF-[NISACTF 2022]huaji?

下载附件得到文件 放到kali里面看看 发现是一张图片 用binwalk命令对其进行分离 发现需要密码 用010打开图片进行查看 对其进行解密 分别得到 ctf_NISA_2022 nisa_2022 发现ctf_NISA_2022是密码 得到flag NSSCTF{Nls_FumYEnnOjy}

nt!CcGetVacbMiss函数分析之设置好nt!_VACB然后调用函数nt!SetVacb

第一部分&#xff1a;MmMapViewInSystemCache函数返回 Status MmMapViewInSystemCache (SharedCacheMap->Section, &Vacb->BaseAddress, &NormalOffset, …

Uniapp+UView+Uni-star打包小程序极简方案

一、减少主包体积 主包污染源&#xff08;全局文件依赖&#xff09;劲量独立导入 componentsstaticmain.jsApp.vueuni.css 分包配置缺陷&#xff0c;未配置manifest.json中mp-weixin节点 "usingComponents" : true,"lazyCodeLoading" : "requiredC…

Teigha应用——解析CAD文件(DWG格式)Teigha在CAD C#二次开发中的基本应用

Teigha是一款专为开发者设计的工具&#xff0c;其核心技术在于强大的API和丰富的功能集&#xff0c;提供了一系列工具和方法&#xff0c;使开发者能够轻松地读取、解析和操作DWG文件。它支持多种操作系统&#xff0c;能在处理大型DWG文件时保持高效性能&#xff0c;还可用于构建…

JavaWeb:SpringBoot Bean管理

获取Bean Bean作用域 解决循环依赖方式 1.粗暴删除依赖 2.打破依赖配置 3.使用lazy注解 引入第三方Bean

Lua 脚本在 Redis 中的运用-23(Lua 脚本语法教程)

在 Redis 中编写和执行 Lua 脚本 Lua 脚本是在 Redis 中执行自定义逻辑的强大功能&#xff0c;可以直接在 Redis 服务器上执行。这减少了延迟&#xff0c;提高了性能&#xff0c;并能够实现客户端脚本难以或不可能实现的原子操作。通过在 Redis 中嵌入 Lua 脚本&#xff0c;您…

从零实现本地语音识别(FunASR)

FunASR 是达摩院开源的综合性语音处理工具包&#xff0c;提供语音识别&#xff08;ASR&#xff09;、语音活动检测&#xff08;VAD&#xff09;、标点恢复&#xff08;PUNC&#xff09;等全流程功能&#xff0c;支持多种主流模型&#xff08;如 Paraformer、Whisper、SenseVoic…

deepseek开源资料汇总

参考&#xff1a;DeepSeek“开源周”收官&#xff0c;连续五天到底都发布了什么? 目录 一、首日开源-FlashMLA 二、Day2 DeepEP 三、Day3 DeepGEMM 四、Day4 DualPipe & EPLB 五、Day5 3FS & Smallpond 总结 一、首日开源-FlashMLA 多头部潜在注意力机制&#x…

【C++ Qt】认识Qt、Qt 项目搭建流程(图文并茂、通俗易懂)

每日激励&#xff1a;“不设限和自我肯定的心态&#xff1a;I can do all things。 — Stephen Curry” 绪论​&#xff1a; 本章将开启Qt的学习&#xff0c;Qt是一个较为古老但仍然在GUI图形化界面设计中有着举足轻重的地位&#xff0c;因为它适合嵌入式和多种平台而被广泛使用…

AI应用 Markdown 渲染对比与原生实现方案

DeepSeek、豆包、腾讯元宝、ChatGPT 渲染实现对比表 产品解析方式渲染引擎/库UI 组件架构Markdown支持范围流程图/导图支持扩展架构及裁剪流式解析渲染DeepSeek原生解析&#xff08;非WebView&#xff09;采用 CommonMark 标准解析器&#xff08;推测使用 Markwon 库&#xff…

Ubuntu20.04系统安装,使用系统盘安装

1、系统安装 Ubuntu20.04系统安装&#xff0c;使用系统盘安装 查看ubuntu系统版本 lsb_release -a&#xff1a;显示发行版名称、版本号及代号 (base) rootai-System-Product-Name:/media/ai/wh/clash-for-linux-master# lsb_release -a No LSB modules are available. Distri…

(自用)Java学习-5.19(地址管理,三级联动,预支付)

1. 地址管理模块 地址展示 前端&#xff1a;通过 showAddress() 发起 Ajax GET 请求&#xff0c;动态渲染地址列表表格&#xff0c;使用 #{tag}、#{name} 等占位符替换真实数据。 后端&#xff1a; 控制器层调用 AddressService&#xff0c;通过 AddressMapper 查询用户地址数…

Spring 循环依赖:从原理到解决方案的全面解析

Spring 循环依赖&#xff1a;从原理到解决方案的全面解析 一、循环依赖的定义与分类 1. 什么是循环依赖&#xff1f; 在 Spring 框架中&#xff0c;循环依赖指的是多个 Bean 之间形成了依赖闭环。例如&#xff1a; Bean A 依赖 Bean BBean B 依赖 Bean CBean C 又依赖 Bean…

n 阶矩阵 A 可逆的充分必要条件是 ∣ A ∣ ≠ 0

n 阶矩阵 A 可逆的充分必要条件是 ∣ A ∣ ≠ 0 |A| \neq 0 ∣A∣0 的几何意义 1. 行列式的几何意义回顾 行列式 ∣ A ∣ |A| ∣A∣&#xff08;或 det ⁡ ( A ) \det(A) det(A)&#xff09;表示矩阵 A A A 所对应的线性变换对空间的体积缩放因子&#xff1a; ∣ A ∣ &…

Rockey Linux 安装ffmpeg

1.环境准备 Rockey linux 9.2 ffmpeg 静态资源包 这个是我自己的&#xff1a; https://download.csdn.net/download/liudongyang123/90920340https://download.csdn.net/download/liudongyang123/90920340 这个是官网的 Releases BtbN/FFmpeg-Builds GitHub 以上两个资…