[iOS开发]常用弹窗总结

news/2023/12/4 22:21:25

最近写项目 对各种各样的弹窗搞的有点头疼,于是决定总结一下常用的弹窗

文章目录

  • 弹窗是什么?
  • 弹窗都有哪些分类?
    • 模态弹窗
      • 一、对话框
      • 二、操作列表
      • 三、浮出层
    • 非模态弹窗
      • 一、透明指示层
      • 二、app的通知

弹窗是什么?

弹框是人机交互中常见的方式,常常出现于询问、警示以及完成某个插入任务,常见于网页端及移动端。弹框能使用户有效聚焦于当前最紧急的信息,也可以在不用离开当前页面的前提下,完成一些轻量的任务。

弹窗都有哪些分类?

在这里插入图片描述

模态弹窗

关于模态,官方文档中说明:模态视图突出焦点,因为用户只有在完成当前的任务或关闭一个信息或视图之后才能去做其它事情。 当屏幕上出现一个模态视图时,用户必须采取一个决定(点击按钮或是其它)才能退出模态化体验。一个模态视图可以占据整个屏幕、整个父视图(比如浮出层)或者屏幕的一部分。一个模态视图一般都含有“完成”和“取消”按钮来退出视图。

简单来说,模态视图,就是在原始视图上,叠加一层蒙版(我理解的模版就是一层透明的UIView),用以隔离原始视图中的所有操作,然后在蒙版上展示一层新视图,让用户更专注于完成新视图中的任务。
在这里插入图片描述

一、对话框

对话框承载与当前状态有关的重要信息,常需要用户进行响应。对话框由标题、信息内容(可选)、一个或多个按钮、文本输入框(可选)四部分组成。就是我们最常见的弹框,除了上述可选元素以外,对话框的外观是固定的不可修改的。
常见例如:
常用于手机app中的信息提示操作二次确认、邀请评分、授权等场景

正常的一个提示弹窗 代码如下:

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"" message:@"收藏成功!" preferredStyle:UIAlertControllerStyleAlert];//先创建一个弹窗控制器 然后里面有title和message来提示需要的东西
UIAlertAction *sureAction = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:nil];//添加一个弹窗的action 活动可以是取消 可以是确认
[alert addAction:sureAction];
[self presentViewController:alert animated:NO completion:nil];

注意:

关于UIAlertActionStyle有三种样式
UIAlertActionStyleDefault  , 默认样式         UIAlertActionStyleCancel,      取消
UIAlertActionStyleDestructive, 有毁灭性的操作是使用, 呈现红色

如果想要通过弹窗的action进行一些操作,我们可以把handler后面的nil改成需要进行的操作即可
例如下面这样

   UIAlertAction *picture = [UIAlertAction actionWithTitle:@"相册" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {[self selectImageFromAlbum];}];

想要实现下图这样的文本输入框:
在这里插入图片描述

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:@"请输入新密码" preferredStyle:UIAlertControllerStyleAlert];[alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {textField.placeholder = @"请输入修改后的密码";}];//原本的addAction改成addTextFieldWithConfigurationHandler就行了 同样是在后面写出textfield的一些限制条件

标题:简短能说明问题的标题。

信息内容:根据需要可不填写。

按钮:
可通过选择不同style等方式,使用户清楚明白选什么

文案要具体精准,让用户明白选择之后会发生什么。而不要使用“是”“否”等语意不明的词。

符合用户预期的按钮放在右侧,【取消】按钮固定在左侧。

当有破坏性的操作的时候,一方面要突出显示具有潜在破坏性的操作按钮,另一方面要确保有【取消】按钮,保证用户能够安全地取消破坏性操作。(例如删除等。)

操作方式:由于必须要获取用户明确的响应,因此只有选择按钮才能关闭弹窗。(也就是点击蒙板无法关闭弹窗)

二、操作列表

操作列表是一种特殊的对话框,是对操作动作的响应,显示当前操作场景下相关联的多个选项。用于让用户开始任务,或者在执行潜在的破坏性操作前,进行二次确认。
操作列表常被用于单选操作,以及删除操作的二次确认。(单一操作)

操作视图常被用于分享操作。

操作列表正常代码如下:

 UIAlertController *alertViewController = [UIAlertController alertControllerWithTitle:@"请选择方式" message:nil preferredStyle:UIAlertControllerStyleActionSheet];// style 为 sheetUIAlertAction *cancle = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil];UIAlertAction *picture = [UIAlertAction actionWithTitle:@"相册" style:UIAlertActionStyleDefault handler:nil];//handler里可以写需要的函数UIAlertAction *photo = [UIAlertAction actionWithTitle:@"相机" style:UIAlertActionStyleDefault handler:nil];//同理[alertViewController addAction:cancle];[alertViewController addAction:photo];[alertViewController addAction:picture];[self presentViewController:alertViewController animated:YES completion:nil];

在这里插入图片描述
当然也可以自定义底部弹框

  1. 实现一个有遮罩效果的半透明 view,然后添加一个可设置展示内容高度的 contentView
  2. 我们实现的底部弹框实质上是一个可滑动的表单(tableView),在 contentView 上添加一个 tableView
  3. 通过设置UIView 动画,实现遮罩 menuView 的展示和消失效果
  4. 实现选项和头部的定制化 通过编写自己的代理方法,让开发人员根据自己项目的实际需要设置各个选项,并且可以定制固定的头部以及底部

三、浮出层

一种iOS浮层视图的简单封装
这个作者 基于装饰者模式对这种弹出浮层做了一个简单的封装,把项目里的浮层视图都统一了起来 减少了耦合度

什么又是装饰者模式呢?
情况:我们使用的类,有些不方便,想加一个函数(给类做扩展)正常情况下我们想到的就是继承的方法,把这个类继承,然后字类增加一些行为。我们就可以保证字类有父类的方法,也有自己的方法,缺点是:这个字类是静态的,我们无法控制什么时间使用这个方法,无法增加方法、属性什么的。装饰模式是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能。它是通过创建一个包装对象,也就是装饰来包裹真实的对象.
官方文档这样解释:动态的给一个对象增加一些职责,使生成的子类更加灵活。
这个作者将移除浮层的代码被封装了起来,自动执行。这样就达到了减少和调用端代码耦合以及复用的目的。

第一步先新建一个继承自UIView的类 然后给改类添加协议 添加方法 同时在创建一个内容视图(继承或创建自该类)内容视图添加一个可点击的背景 点击背景视图可以隐藏

  1. 只需要展示内容的简单浮层,直接创建KKPopupView对象,并在它上面添加内容子视图,然后传给KKPopupViewWrapper封装对象显示。
    在这里插入图片描述

  2. 复杂一些或有交互的浮层,可以继承自KKPopupView在这里插入图片描述

  3. 有弹出和移除动画的浮层,动画代码需要添加在重写的show和hide方法里。
    在这里插入图片描述

iOS这里与传统的c++装饰模式不太一样,一般的装饰者模式,decorator 会保有一份被装饰的对象,这里被装饰的对象可以是其父类,但是在iOS中“被保有”的对象就是delegate,这个delegate一般是vc。
说白一点,就是给vc灵活添加一些功能(装饰)–比如原始网络数据的处理,而又不用继承vc。

总结:为了让被装饰者的一个方法在执行前或者执行后进行一些预处理或者后处理。起到装饰执行者的一个方法的目的。

非模态弹窗

与模态相反 并不是用户只有在完成当前的任务或关闭一个信息或视图之后才能去做其它事情 其会自动关闭 或者 因为点击屏幕而消失

一、透明指示层

最好理解的就是iOS系统中自带的音量键
在这里插入图片描述

就我们的项目而言 知乎日报的收藏功能最终如果仅仅提示一个收藏成功 并且 可以通过afterDelay进行操作 从而保证定时的消失

 [self performSelector:@selector(disAlert:) withObject:alert afterDelay:1];-(void)disAlert : (UIAlertController *) alert {[alert dismissViewControllerAnimated:YES completion:nil];
}

在这里插入图片描述

二、app的通知

在这里插入图片描述


http://www.ppmy.cn/news/842780.html

相关文章

ios 集成html5 sdk,iOS SDK 快速集成

iOS SDK 快速集成 在您阅读此文档时,我们假定您已经具备了基础的 iOS 应用开发经验,并能够理解相关基础概念,最新版本的SDK 只支持 iOS9 及以上 iOS 系统版本。 注:此文档对之前的文档进行了优化,结构更清晰&#xff0…

ios共享账号公众号_家人公众号和共享相册

大家好,这里是家里种草公众号,我是乐乐,欢迎各位吃瓜群众订阅,一同分享更多资源。 很早就希望能找一个家庭共享照片的解决方案,之前我建过QQ相册,但是现在大家都很少使用QQ,而且大家手机平台各不…

iOS12加密相册、保险箱、加密相册Pro、保险箱Pro打开就闪退的,不要删除app,关闭4g和WiFi即可正常使用。

iOS12加密相册、保险箱、加密相册Pro、保险箱Pro打开就闪退的,去iPhone/iPad桌面找到"设置",点击设置后下滑出现搜索栏,搜索闪退的app名字(比如加密相册),找到无线数据(如果没有此项,只有4g蜂窝移…

iOS学习00

Mac 快捷键 对应关系: ctrl>Control win>Command alt>Option快捷键含义CommandOptionesc强行退出死机程序CommandShift3截图当前屏幕CommandShift4截图自由Command+delete移到废纸篓Command+tab切换当前工作任务CommandW当前窗口关…

iOS的各种开源项目集合

AFNetworking- ASI不升级以后&#xff0c;最多人用的网络连接开源库&#xff0c;iOS网络编程之AFNetworking使用,iOS开发下载文件速度计算,AFNetworking 3.0迁移指南,AFNetworking2.0源码解析<一>。 Alamofire- Alamofire是AFNetworking的作者mattt新写的网络请求的swif…

SwiftUI iOS 基础组件之照片相册选择器(教程含源码)

实战需求 SwiftUI iOS照片相册选择器(教程含源码) 本文价值与收获 看完本文后,您将能够作出下面的界面 看完本文您将掌握的技能 从相册获取图片@State var image: UIImage? ImagePickerView(sourceType: .photoLibrary) { image inself.image = image }弹出视图sheet组件…

iOS应用开发之权限说明

在iOS应用开发的过程中&#xff0c;需要配置info.plist文件给应用添加权限&#xff0c;该文件是键值对的形式。下面对info.plist文件中的部分权限进行说明&#xff0c;详细内容请以苹果开发者官网为准&#xff1a;https://developer.apple.com/documentation/bundleresources/i…

iOS12加密相册、保险箱打开就闪退的,关闭4g和WiFi即可正常使用

iOS12加密相册、保险箱打开就闪退的&#xff0c;关闭所有网络就不闪退了。具体步骤&#xff1a;去iPhone/iPad桌面找到"设置"&#xff0c;点击设置后下滑出现搜索栏&#xff0c;搜索闪退的app名字(比如加密相册)&#xff0c;找到无线数据&#xff08;如果没有此项&am…

iOS开源加密相册Agony的实现(六)

简介 虽然目前市面上有一些不错的加密相册App&#xff0c;但不是内置广告&#xff0c;就是对上传的张数有所限制。本文介绍了一个加密相册的制作过程&#xff0c;该加密相册将包括多密码&#xff08;输入不同的密码即可访问不同的空间&#xff0c;可掩人耳目&#xff09;、WiF…

iOS开源加密相册Agony的实现(一)

简介 虽然目前市面上有一些不错的加密相册App&#xff0c;但不是内置广告&#xff0c;就是对上传的张数有所限制。本文介绍了一个加密相册的制作过程&#xff0c;该加密相册将包括多密码&#xff08;输入不同的密码即可访问不同的空间&#xff0c;可掩人耳目&#xff09;、WiF…

iOS开源加密相册Agony的实现(四)

简介 虽然目前市面上有一些不错的加密相册App&#xff0c;但不是内置广告&#xff0c;就是对上传的张数有所限制。本文介绍了一个加密相册的制作过程&#xff0c;该加密相册将包括多密码&#xff08;输入不同的密码即可访问不同的空间&#xff0c;可掩人耳目&#xff09;、WiF…

iOS开源加密相册Agony的实现(五)

简介 虽然目前市面上有一些不错的加密相册App&#xff0c;但不是内置广告&#xff0c;就是对上传的张数有所限制。本文介绍了一个加密相册的制作过程&#xff0c;该加密相册将包括多密码&#xff08;输入不同的密码即可访问不同的空间&#xff0c;可掩人耳目&#xff09;、WiF…

iOS开源加密相册Agony的实现(二)

简介 虽然目前市面上有一些不错的加密相册App&#xff0c;但不是内置广告&#xff0c;就是对上传的张数有所限制。本文介绍了一个加密相册的制作过程&#xff0c;该加密相册将包括多密码&#xff08;输入不同的密码即可访问不同的空间&#xff0c;可掩人耳目&#xff09;、WiF…

iOS开源加密相册Agony的实现(三)

简介 虽然目前市面上有一些不错的加密相册App&#xff0c;但不是内置广告&#xff0c;就是对上传的张数有所限制。本文介绍了一个加密相册的制作过程&#xff0c;该加密相册将包括多密码&#xff08;输入不同的密码即可访问不同的空间&#xff0c;可掩人耳目&#xff09;、WiF…

iOS开源加密相册Agony的实现(七)

简介 虽然目前市面上有一些不错的加密相册App&#xff0c;但不是内置广告&#xff0c;就是对上传的张数有所限制。本文介绍了一个加密相册的制作过程&#xff0c;该加密相册将包括多密码&#xff08;输入不同的密码即可访问不同的空间&#xff0c;可掩人耳目&#xff09;、WiF…

k8s 中的卷

前面的文章我们分享了 pod &#xff0c;RC&#xff0c;RS&#xff0c;DaemonSet&#xff0c;CJ&#xff0c;Service 等各种资源 今天我们来分享一波如何将磁盘挂载到容器中&#xff0c;在 docker 里面这种技术叫做 数据卷&#xff0c;感兴趣的小伙伴可以查看一下文章&#xff…

【工具类】Java 加减乘除算法工具类

import org.springframework.stereotype.Component; import java.math.BigDecimal;/*** 类描述&#xff1a; 一个工具类&#xff0c;为了保证计算准确性&#xff0c;将double之间的运算转换为BigDecimal之间的运算*/ Component public class Mutil {/*** * 描述: 加法* * 方法名…

怎么快速学计算机,怎样快速学会电脑 学电脑的5种方法推荐

怎样快速学会电脑一&#xff1a;学习电脑前需确定一个目标 有关电脑的知识有许多方面&#xff0c;都有其特点&#xff0c;比如硬件维修、电脑编程、电脑办公、电脑制图、网页制作等。对一般用户来讲&#xff0c;学好其中的一种就可以使你成为电脑高手&#xff0c;但是却完全没有…

计算机制图怎么学,新手学电脑学习画图的方法

新手学电脑学习画图的方法 大家知道怎样在电脑中画出一幅美丽的图画来呢&#xff1f;在开始菜单的附件中有一个画图用它就可以画画了。下面是小编为大家搜集整理出来的有关于新手学电脑学习画图的方法希望可以帮助到大家&#xff01; 1、启动画图程序 1)启动 单击“开始”&…

MySQL索引汇总

一、索引 1. MySQL如何实现的索引&#xff1f; 三种&#xff1a; B树索引&#xff1a;主要&#xff0c;重点hash索引&#xff1a;配合b树索引使用&#xff0c;没法手动创建全文索引&#xff1a;对于整个数据做全文的摘要索引 2. innodb和Myisam索引的区别&#xff1f; inn…
最新文章