当前位置: 首页 > 编程日记 > 正文

一劳永逸,iOS 自定义 ActionSheet 封装流程

原文链接:http://www.jianshu.com/p/cfb87a7db7b1
本文为 iOS 自定义视图封装《一劳永逸》系列的第四期,旨在提供封装思路,结果固然重要,但理解过程才最好。授人以鱼不如授人以渔。 —— 由卖报的小画家Sure分享
前言

本文为iOS自定义视图封装《一劳永逸》系列的第四期,旨在提供封装思路,结果固然重要,但理解过程才最好。授人以鱼不如授人以渔。⚠️文章旨在帮助封装程度较低的朋友们,大神可无视勿喷。

历史文章链接列表:
  • 一劳永逸,iOS引导蒙版封装流程
  • 一劳永逸,iOS网页视图控制器封装流程
  • 一劳永逸,iOS多选弹窗封装流程
正文

最近更新项目需求,需要重构导航选取模块,故将封装流程进行分享,效果图如下:


导航选取弹窗

根据效果图情况,可知标题栏位置需自定义,且选项位置等文字样式可调节,因此无法利用系统的UIActionSheetUIAlertController进行实现,需自定义视图,并考虑到适用场景,该ActionSheet后续会用于其他功能模块中,所以要封装成通用类。

继续分析需求,用什么控件作为主体会更好呢?没错,UITableView是在适合不过了,见刨析图:


刨析图

如上设计的优势在于可将自定义View传入做为TableView的表头视图tableHeaderView。对于选项位置若需定制其它样式可自定义Cell进行设置。因此可满足自定义ActionSheet的多种场景。

根据刨析图,首先我们分别创建maskView与主体TableView。这里需注意的是为了实现效果我们需要将TableView的颜色置为透明。

_tableView.backgroundColor = [UIColor clearColor];

并且我们要将TableView分为两组,即主体选项与取消按钮分离,因此设置代理方法:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {return 2;
}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {return (section == 0)?_optionsArr.count:1;
}

接下来进行处理视图的圆角效果。TableView主体做圆角效果这个不用多说,需要注意的是如何处理好TableViewCell的圆角形式,若仍然简单设置layer.cornerRadius会出现如下情况:


效果图

显然很难看,设计看到估计会崩溃,因此我们需要做的处理为仅为选项中的最后一项做圆角处理,即图中的高德地图选项,并且为了美观效果,要达到只为其左下角与右下角做处理。

这里我们需要借助UIBezierPathCAShapeLayer进行实现。判断是否为最后选项,然后进行如下设置。

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:cell.contentView.bounds byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight cornerRadii:CGSizeMake(10, 10)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];
maskLayer.frame = cell.contentView.bounds;
maskLayer.path = maskPath.CGPath;
cell.layer.mask = maskLayer;

其中byRoundingCorners即为设置所需处理边角参数。有如下枚举克进行选择:

typedef NS_OPTIONS(NSUInteger, UIRectCorner) {UIRectCornerTopLeft     = 1 << 0,UIRectCornerTopRight    = 1 << 1,UIRectCornerBottomLeft  = 1 << 2,UIRectCornerBottomRight = 1 << 3,UIRectCornerAllCorners  = ~0UL
};

比如将byRoundingCorners设置为UIRectCornerTopLeft| UIRectCornerBottomRight,即左上与右下设置,View的效果为:


效果图

经过上述调整,视图的圆角效果完成,最后设置组尾透明视图即可:

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {return SPACE;
}- (UIView*)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, SPACE)];footerView.backgroundColor = [UIColor clearColor];return footerView;
}

做好如上处理后基本的UI效果即已完成。

接下来我们考虑外漏方法问题,简单模拟UIActionSheet的创建形式,公开方法:

- (instancetype)initWithTitleView:(UIView*)titleViewoptionsArr:(NSArray*)optionsArrcancelTitle:(NSString*)cancelTitleselectedBlock:(void(^)(NSInteger))selectedBlockcancelBlock:(void(^)())cancelBlock;

调用如下:

SureCustomActionSheet *optionsView = [[SureCustomActionSheet alloc]initWithTitleView:self.headView optionsArr:self.dataArr cancelTitle:@"取消" selectedBlock:^(NSInteger index) {} cancelBlock:^{}];
[self.view addSubview:optionsView];

这样即可将所需头视图、取消文字传入,并处理选项事件等。

最后简单给予视图显示与隐藏的效果,并在欠当的时机调用即可,且这里我们需要调节TableView的高度,使其适应所包含内容高度。

- (void)show {_tableView.frame = CGRectMake(SPACE, Screen_height, Screen_Width - (SPACE * 2), _tableView.rowHeight * (_optionsArr.count + 1) + _headView.bounds.size.height + (SPACE * 2));[UIView animateWithDuration:.5 animations:^{CGRect rect = _tableView.frame;rect.origin.y -= _tableView.bounds.size.height;
        _tableView.frame = rect;}];
}- (void)dismiss {[UIView animateWithDuration:.5 animations:^{CGRect rect = _tableView.frame;rect.origin.y += _tableView.bounds.size.height;
        _tableView.frame = rect;} completion:^(BOOL finished) {[self removeFromSuperview];}];
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {[self dismiss];
}
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {[self dismiss];
}

至此,该需求效果已基本完成,如上摘取部分代码,demo已上传github,需要可自行下载。
一劳永逸,iOS自定义ActionSheet封装流程demo

相关文章:

cocoapods更新

使用sudo gem install cocoapods更新提示&#xff1a; ERROR: While executing gem ... (Errno::EPERM) Operation not permitted 改为&#xff1a;sudo gem install -n /usr/local/bin cocoapods --pre刷刷刷完成更新。但是马上发下更新后使用pod install又发现一个问题 The …

创建对象_工厂方法(Factory Method)模式 与 静态工厂方法

工厂方法模式&#xff1a; 定义&#xff1a;为创建对象定义一个接口&#xff0c;让子类决定实例化哪个类。工厂方法让一个类的实例化延迟至子类。应用场景&#xff1a;客户类不关心使用哪个具体类&#xff0c;只关心该接口所提供的功能&#xff1b;创建过程比较复杂&#xff0c…

数据通信技术(一:IP划分)

一、某公司生产部有50人&#xff0c;销售部有100人&#xff0c;财务部有25人&#xff0c;客服部有12人&#xff0c;没个员工配置一台主机&#xff0c;该公司有192.168.100.1/24的网段可用&#xff0c;应该如何划分子网。 销售部&#xff08;100&#xff09;台&#xff1a;/25 …

团队作业—第二阶段06

站立会议&#xff1a; 继续数据库的连接编程。 任务进度&#xff1a; 实现数据的输出。 站立会议照片&#xff1a; 任务看板&#xff1a; 燃尽图&#xff1a; 转载于:https://www.cnblogs.com/cpljlgs/p/5546157.html

Fade 数字切换动效

原文链接&#xff1a;http://www.jianshu.com/p/983674e6f4ef根据原型高度还原的一个动效作品。希望可以通过审核。谢谢。 —— 由Bear1494735376123分享欢迎同样喜爱动效的你加入 iOS动效特攻队–>QQ群&#xff1a;547897182 iOS动效特攻队–>熊熊&#xff1a;64807025…

fieldset 使用小案例

有初学者问到如何做出如下页面: 对应的代码如下: <fieldset><legend>★审核状态</legend><input name"state" type"radio" class"input1" value"1" />已审核<input name"state" type"radio…

数据通信技术(二:交换机配置管理)

交换机配置与管理&#xff08;思科模拟器&#xff09; 1.从用户模式进入特权模式,并进入配置模式设置进入特权模式的密码; 2.进入交换机的端口模式并进行端口状态的设置; 用新密码登录并查看接口状态信息,重启交换机;4.硬件和软件版本查询: 5.设备CPU的利用率: 6.检查设备的MA…

iOS之各种区别

作者 APP叫我取个帅气的昵称 关注 2017.05.15 10:47* 字数 140 阅读 1273评论 7喜欢 51写在前面&#xff1a;本文持续更新&#xff0c;也欢迎简友提供更多的关于iOS&#xff08;包括swift&#xff09;中的区别 1. _ _block和 _ _weak修饰符的区别的&#xff1a; (1). _ _block不…

lightoj 1014

lightoj 1014 Ifter Party 链接&#xff1a;http://www.lightoj.com/volume_showproblem.php?problem1014 题意&#xff1a;给你两个数 p, l&#xff0c;求 cha&#xff08;cha p-l&#xff09;的约数&#xff0c;当约数大于 l 时&#xff0c;按从小到大输出 思路&#xff1a…

poj 2681 字符串

http://poj.org/problem?id2681 给你任意长度的字符串&#xff0c;找出两串字符中不相同的字符个数&#xff08;总数&#xff09; #include<string> #include<cstring> #include<iostream> #include<cstdio> using namespace std; int main() {int n;…

数据通信技术(三:VLAN划分)

VLAN划分 1.配置环境 &#xff1a;创建4台PC机&#xff0c;并为PC机配置IP PC0&#xff1a;192.168.1.1/24 PC1&#xff1a;192.168.1.2/24 PC2&#xff1a;192.168.1.3/24 PC3&#xff1a;192.168.1.4/24 2.修改交换机名称&#xff1a; 创建VLAN1和VLAN2&#xff1a;…

CSS(2 )-- CSS样式大全

常用css样式大全Author&#xff1a;xu_shuyi201504039.CSS颜色代码大全http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html1.CSS文字属性color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/font-style:itelic; /…

java io读书笔记(6) Writing Arrays of Bytes

显而易见&#xff0c;一次性写出一堆数据&#xff0c;要比一个byte一个byte的写&#xff0c;快多了&#xff0c;因此&#xff0c;outputstream&#xff0c;给出了2个增强型的write&#xff1a; public void write(byte[] data) throws IOException public void write(byte[] da…

iOS 自定义双向滑块Slider

ZPSlider 一个双向滑块的Slider 前提 这个是在一次和朋友吃饭的时候&#xff0c;我们唠嗑的时候他说的一个需求。因为系统的Slider是只有一个滑块的&#xff0c;而且没有分段滑动的效果。 这不最近都在研究这么个需求。 How to use it -(instancetype)initWithFrame:(CGRec…

数据通信技术(四:链路聚合)

1、修改交换机名称 2、配置A交换机数据 3、配置B交换机数据 4、创建VLAN 5、互拼验证 6、去掉一条链路再进行验证 数据通信技术&#xff08;一&#xff1a;IP划分&#xff09; https://blog.csdn.net/qq_37823605/article/details/90345408 数据通信技术&#xff08;二&#xf…

iOS图片,视频上传视频内容旋转

#前言 我最近在接手一个智能盒子的iOS应用&#xff0c;上面有一个功能是这样的。把你本地的照片和视频可以甩屏到你绑定的盒子上。 我的上一位前辈做的时候必须要求再同一个局域网&#xff0c;但是当我做的时候要求不同的局域网也要实现这样的一个功能&#xff0c;优化用户的使…

jackson 解析json问题

1、json串中有key为A&#xff0c;但指定转换的mybean中未定义属性A&#xff0c;会抛异常。处理&#xff1a;mapper.configure(Feature.FAIL_ON_UNKNOWN_PROPERTIES, false)&#xff0c;加上这一条&#xff0c;就没问题了&#xff0c;正常转换。 2、 默认的json串&#xff0c;如…

【转】UIColor对颜色的自定义

原文网址&#xff1a;http://blog.sina.com.cn/s/blog_5f19ccb10101bhqh.html 在iOS开发中&#xff0c;我们使用UIColor来对我们的界面进行颜色设置&#xff0c;一般我们通过以下两种方法使用UIColor&#xff1a;1,label.textColor [UIColor blueColor];2,label.textColor [U…

数据通信技术(八:OSPF单区域配置实验)

OSPF单区域配置实验(Cisco) 一&#xff0e;知识准备 1.掌握了OSPF动态路由协议的定义和功能&#xff1b; 2.掌握了OSPF动态路由协议的特征和工作原理。 二&#xff0e;实验目的 掌握OSPF动态路由单区域的基本配置方法和结果验证。 掌握OSPF单区域配置的作用 三&#xff…

redis在php中的使用介绍

redis介绍 redis是一个key-value存储系统。和Memcached类似&#xff0c;它支持存储的value类型相对更多&#xff0c;包括string(字符串)、list(链表)、set(集合)、zset(sorted set --有序集合)和hashs&#xff08;哈希类型&#xff09;。这些数据类型都 支持push/pop、add/remo…

控制发光二极管

一 LED驱动的实现原理 尽管Linux驱动直接与硬件打交道&#xff0c;但并不是Linux驱动直接向硬件中的内存写数据&#xff0c;而是与本机的I/O内存进行交互。每一个连接Linux的硬件在I/O内存中都会有映射首地址&#xff0c;开发板上的LED也有其映射首地址。 二 编写LED驱动 第一…

iOS 跑马灯之 TXScrollLabelView

前言 前段时间在开发一个广播的功能&#xff0c;网上也自己找了一些库&#xff0c;没有发现非常好用的&#xff0c;于是自己抽时间写了一个&#xff0c;在 Github 上发布一天收获六十多个 star&#xff0c;这里首先感谢大家在微博上的转发&#xff0c;使得 TXScrollLabelView 被…

数据通信技术(六:静态路由实验)

数据通信静态路由实验 1、R1路由的端口配置 2、R2路由的端口配置 3、R3路由器端口配置 4、互通性验证 5、拓扑结构 数据通信技术&#xff08;一&#xff1a;IP划分&#xff09; https://blog.csdn.net/qq_37823605/article/details/90345408 数据通信技术&#xff08;二&#…

172. Factorial Trailing Zeroes

/**172. Factorial Trailing Zeroes *2016-6-4 by Mingyang* 首先别忘了什么是factorial&#xff0c;就是阶乘。那么很容易想到需要统计* (2,5)对的个数&#xff0c;因为2510。但是这个条件放松一下就会发现其实只要数5的个数就好了&#xff0c;* 因为2实在是比5要多的多。那么…

MarkdownView:Markdown 文档预览视图组件

原文链接&#xff1a;https://github.com/keitaoouchi/MarkdownViewMarkdownView&#xff1a;Markdown 文档预览视图组件。# 为开源点赞# —— 由SwiftLanguage分享MarkdownView is a WKWebView based UI element, and internally use bootstrap, highlight.js, markdown-it. H…

项目管理过程中,如何编制初步工作说明书

最近在做一个项目的时候&#xff0c;客户特别苛刻&#xff0c;在制定工作说明书的时候&#xff0c;费了很多周折&#xff0c;把很多以前做项目的时候都不怎么会专门考虑的细枝末节和例外情况都进行了详细说明和约定&#xff0c;但是在项目实施过程中&#xff0c;却发现这样的说…

数据通信技术(七:RIP路由水平分割配置)

RIP路由水平分割配置实验报告 一、知识准备 掌握RIP动态路由的定义和特征。掌握RIP路由环路的危害和解决技术。掌握水平分割的工作原理。二、实验目的 掌握路由器中RIP动态路由水平分割功能的配置方法和结果验证&#xff0c;并通过实验结果更好的理解水平分割的作用和原理。…

android蓝牙4.0(BLE)开发之ibeacon初步

一个april beacon里携带的信息如下 ?1<code class" hljs ">0201061AFF4C0002159069BDB88C11416BAC3F33468C2788A3044B0378C60C09417072696C426561636F6E051250002003020A0000000000000000000000</code>具体是什么意思呢 ?1234567891011121314151617181…

APP程序内部打开某个APP的AppStore页面

作者 呀咪9527 关注 2017.03.21 16:44* 字数 222 阅读 154评论 0喜欢 9最近在做内购用到了StoreKit.framework库&#xff0c;偶然间发现中SKStoreProductViewController这个类&#xff0c;查看文档后发现一个妙用&#xff0c;解决了我一个痛点&#xff1a;APP每次更新或者跳转至…

sql server 2014预览版发布

MSDN发布sql server2014预览版&#xff0c;如下图&#xff1a; SQL Server 2014新特性&#xff1a; 微软SQL Server部门主管Eron Kelly介绍&#xff0c;通过将交易处理放到内存中进行&#xff0c;新的SQL Server 2014在测试中能够将性能提升50倍以上。在新版本中&#xff0c;DB…