4 用第3方库CWLateralSlide实现首页侧滑菜单功能

2023-03-23  本文已影响0人  flyfishcxy

不知到大家在开发时候是否遇到这样的产品需求:

手机首页左边导航按钮点击展示侧滑菜单列表,算是进入其它业务功能界面(登录+我的+系统设置....)的一种快捷交互方式,这样就不用点击底部功能按钮访问相应的功能界面。

那么话不多说,我们开始来详细描述侧滑菜单的实现过程:

1 引入第3方库CWLateralSlide到项目的Vender目录,并添加侧滑菜单需要资源文字和图片

CWLateralSlide(OC版本) 图片资源和文字

2 在桥接文件MyCloudMusic-Bridging-Header.h引入侧滑库的头文件UIViewController+CWLateralSlide.h

引入引入侧滑库的头文件

3 BaseMainController添加侧滑菜单交互的测试函数

重写导航栏leftClick函数,添加跳转侧滑DrawVC代码,并增加打开侧滑和关闭侧滑菜单函数

leftClick+openDrawer+closeDrawer

重写initListener函数监听点击屏幕左侧响应侧滑菜单显示效果行为

direction == .fromLeft 

4 创建侧滑DrawerController控制器

引入TangramKit布局库和DynamicColor颜色库

在BaseLogicControllerVC上添加scrollview容器

    创建1个四边安全区的容器

四边安全区的容器

     在BaseLogicControllerVC上添加scrollview容器,为了让控件超出屏幕可以滑动显示

添加scrollview容器让控件超出屏幕可以滑动显示

在DrawVC里面调用BaseLogicVC封装initScrollViewSafeArea

initScrollViewSafeArea

在contentContainer里面添加用户信息view组件---UserView

创建1个相对布局和在布局上添加头像 + 昵称 + 更多箭头 + 扫码按钮

ui展示效果 initUserView 创建用户控件  懒加载用户UI控件(头像+昵称+箭头+扫码图标)

实现vip功能效果黑胶唱片

黑胶唱片截图效果展示 initRecordView 创建控件 黑胶唱片

封装通用侧滑菜单列表Item

通用item(图标+标题+开关+文字+箭头) SuperSettingView封装通用item(图标+标题+开关+文字+箭头)

我的消息view效果展示和代码实现

ui展示效果 我的消息代码实现

创建商城控件效果展示和代码实现

ui展示效果 商城代码实现

创建其他控件效果展示和代码实现

ui展示效果 其他控件代码实现1 其他控件代码实现2

5 运行模拟器或手机测试验证效果

效果展示

总结:

以上就是CWLateralSlide实现首页侧滑菜单功能实现过程

1 这个是原生App最早的iPad版本的交互行为。

2  属于模态对话框展示效果,强制用户在此刻必须操作一个行为,才能接着做其它的事情。

3 CWLateralSlide第三方库对UIVIewController的扩展的行为里面封装了VC的动画交互效果。

上一篇 下一篇

猜你喜欢

热点阅读