IOS开发UI篇--一个支持图文混排的ActionSheet

原创 2015年07月06日 19:52:00

一、简介

UIActionSheet是IOS提供给我们开发者的底部弹出菜单控件,一般用于菜单选择、操作确认、删除确认等功能。
IOS官方提供的以下方式对UIActionView进行实例化:

- (instancetype)initWithTitle:(NSString *)title delegate:(id<UIActionSheetDelegate>)delegate cancelButtonTitle:(NSString *)cancelButtonTitle destructiveButtonTitle:(NSString *)destructiveButtonTitle otherButtonTitles:(NSString *)otherButtonTitles, ... );

从这个api我们可以看出,我们只能设置文本标题,包括destructiveButtonTitle、cancelButtonTitle和otherButtonTitles,官方提供的该控件并不支持图文混排。但有的时候,交互提给我们的需求又需要我们的ActionSheet具有图文混排的效果,那就需要我们自己仿造系统自带的ActionSheet,完成该需求。
项目演示如下:

演示图片

二、使用说明

第一步、构建数据模型

@interface Item : NSObject
@property (nonatomic , strong) NSString *icon;//图片地址
@property (nonatomic , strong) NSString *title;//标题
@end

第二步、根据数据模型构建数据

Item *item1 = [[Item alloc] init];
item1.icon = @"journey_phone";
item1.title = @"15195905888";
Item *item2 = [[Item alloc] init];
item2.icon = @"journey_phone";
item2.title = @"15195905777";
Item *item3 = [[Item alloc] init];
item3.icon = @"journey_phone";
item3.title = @"15195905777";
NSArray *listData = [NSArray arrayWithObjects:item1,item2,item3, nil];

第三步、使用以上数据将控件初始化

PicAndTextActionSheet *sheet = [[PicAndTextActionSheet alloc] initWithList:listData title:@"拨打电话"];
sheet.delegate = self;//该控件使用的代理模式
[sheet showInView:self];

因为该控件使用了代理模式,所以在当前Controller需要实现以下代理方法:

-(void) didSelectIndex:(NSInteger)index{
}

该代理方法,主要是在Controller中能够实现在自定义ActionSheet中的点击事件。

三、实现原理

因为ActionSheet不能支持图片的显示,所以我们就放弃使用扩展UIActionSheet控件的方法。我在本项目中使用的是UITableView+动画,高仿ActionSheet的方法。UTableView可以制作列表选项,动画可以实现系统自带ActionSheet的自底向上和渐变效果。

注意点:

如果tableview处于uiview上面,uiview整个背景有点击事件,但是我们需要如果我们点击tableview的时候,处理tableview的点击事件,而不是uiview的事件。在这里,我们需要判断我们点击事件是否在uiview上还是在uitableview上。

解决方案如下:

1、实现代理:

<UIGestureRecognizerDelegate>

2、让gesture设置为代理

UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tappedCancel)];
tapGesture.delegate = self;

3、实现代理方法,判断点击的是否是uiview还是tableview

-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch{
    if([touch.view isKindOfClass:[self class]]){
        return YES;
    }
    return NO;
}

四、总结

任何一个复杂控件,基本上都是有基础控件组合实现而成。该扩展的ActionSheet也可以用于以下场景:
场景1



场景2

五、下载地址

github下载地址:https://github.com/yixiangboy/ActionSheetExtension

如果觉得对你还有些用,给一颗star吧。你的支持是我继续的动力。

blog地址:http://blog.csdn.net/yixiangboy/article/details/46778417

博主的话

以前看过很多别人的博客,学到不少东西。现在准备自己也开始写写博客,希望能够帮到一些人。
我的联系方式:
微博:新浪微博
博客:http://blog.csdn.net/yixiangboy
github:https://github.com/yixiangboy

版权声明:本文为博主原创文章,未经博主允许不得转载。

微信小程序把玩(二十二)action-sheet组件

action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-sheet-item为每个选项,action-sheet-ca...
  • u014360817
  • u014360817
  • 2016年09月26日 15:48
  • 8094

Android开发技巧——实现可复用的ActionSheet菜单

在上一篇《Android开发技巧——使用Dialog实现仿QQ的ActionSheet菜单》中,讲了这种菜单的实现过程,接下来将把它改成一个可复用的控件库。本文原创,转载请注明出处:对于要实现的可复用...
  • maosidiaoxian
  • maosidiaoxian
  • 2015年06月02日 10:25
  • 5783

ActionSheet 使用

acts.add(@"SINA").connect(kSignalButtonClicked, _action(MainController::act_post_sina), this); acts....
  • huangbaoyu1840
  • huangbaoyu1840
  • 2012年06月10日 09:21
  • 227

微信小程序例子——使用action-sheet弹出小程序底部菜单

微信小程序例子——使用action-sheet弹出小程序底部菜单
  • FutrueJet
  • FutrueJet
  • 2016年10月26日 19:56
  • 6849

Android 使用自定义Dialog打造ActionSheet菜单

这几天用到了github上的一个仿IOS的ActionSheet(ActionSheetForAndroid)控件,它是使用Fragment实现的,由于我的主界面也是由几个Fragment来做,所以这...
  • BBLD_
  • BBLD_
  • 2014年09月07日 23:13
  • 7964

ActionSheet

  • 2014年08月22日 16:55
  • 1.29MB
  • 下载

iOS学习之UIActionSheet的使用

UIActionSheet是在iOS弹出的选择按钮项,可以添加多项,并为每项添加点击事件。为了快速完成这例子,我们打开Xcode 4.3.2, 先建立一个single view application...
  • totogo2010
  • totogo2010
  • 2012年05月31日 19:38
  • 137300

iOS:AlerView、ActionSheet和AlertController的简单使用

AlertView的使用: AlerView的样式: //alertView代理方法 监听确定按钮的点击 - (void)alertView:(UIAlertView *)alertView cl...
  • Dr_Enhart
  • Dr_Enhart
  • 2016年09月03日 22:29
  • 4298

iOS中UIActionSheet的使用

相信都见过这个控件吧,不过它的中文名到底叫啥来着... 要做这个特备简单,这里直接贴代码吧,我的注释里应该讲的很清楚了,我是点击更换头像的Button来弹出这个选择界面的,所以关于UIActionS...
  • st646889325
  • st646889325
  • 2016年11月12日 08:52
  • 2755

iOS封装浅谈-一句代码弹出actionSheet,如何优雅的设计一个ActionSheetManager

一:总想着写一些封装相关的文章,但是如果没有实例空讲的话也没意思。现在就开发中自己封装的一些小东西,拿出来说一说,希望能帮助到他人。     前言:有很多人会说,这有啥好封装的。若一个控制器出现一个a...
  • horisea
  • horisea
  • 2017年07月04日 14:24
  • 557
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IOS开发UI篇--一个支持图文混排的ActionSheet
举报原因:
原因补充:

(最多只允许输入30个字)