小气泡功能在app中的两种实现方案
来源：互联网 发布：赖建诚 知乎 编辑：程序博客网 时间：2024/04/29 17:52
看到别人的app有小气泡感觉很好玩，并且他们的宽高都不超过所在单元格的宽高，其实它也没有什么神奇我们可以用两种方案来实现：控件方案和多视图方案。
第一种方案：控件法。已经实现一个页面有一个气泡的情况。可以抽象出一个类，调用它就可以了，理论上也可以实现多气泡的情况。可以通过申请一个小气泡对象，制定小黑条的宽度，预置显示的内容。通过self.buttonH5.buttonPressed = ^(NSInteger tag)来实现点击小黑框内容的页面跳转。
实际页面：
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ UITableViewCell *cell = nil; if (indexPath.section == 1) { . . . if (![[self.dictData valueForKey:@"consigneeTel"] isEqualToString:@""])// if (2 == [[self.dictData valueForKey:@"quickType"] longValue]) { //普通发单// if (1 == [[self.dictData valueForKey:@"quickType"] longValue]) { UIButton* buttonDetail =[UIButton buttonWithType:UIButtonTypeCustom]; buttonDetail.frame = CGRectMake(0, 0, 40 , 40); UIImage *image1 = [UIImage imageNamed:@"prompt_fare_card"]; [buttonDetail setImage:image1 forState:UIControlStateNormal]; [buttonDetail.imageView sizeToFit]; [buttonDetail addTarget:self action:@selector(buttonDetail) forControlEvents:UIControlEventTouchUpInside]; [buttonDetail setCenter:CGPointMake(WINDOW_WIDTH-18, labelSuceessed.center.y)]; [contentCell addSubview:buttonDetail]; long lEstimated = [[self.dictData valueForKey:@"estimated"] longValue]; if(1 == lEstimated) { self.buttonH5 = [[ButtonDetailH5 alloc]initWithFrame:CGRectMake(0, 0, 257, 44)]; self.buttonH5.center = CGPointMake(WINDOW_WIDTH-15-self.buttonH5.bounds.size.width/2, buttonDetail.center.y-25);// float lDistance = [[self.dictData valueForKey:@"walkingDistance"] longValue];// lDistance = lDistance/1000; _fFreight = [[self.dictData valueForKey:@"freight"] longValue]; _fFreight = _fFreight/100; if(_distance >= 1000) { dDistance = dDistance/1000; self.buttonH5.labelBut.text = [NSString stringWithFormat:@"实际配送%.2f公里，应付运费%.2f元", dDistance, _fFreight]; } else if(_distance >= 0) { self.buttonH5.labelBut.text = [NSString stringWithFormat:@"实际配送%ld米，应付运费%.2f元", (long)dDistance, _fFreight]; } else { self.buttonH5.labelBut.text = [NSString stringWithFormat:@"实际配送--公里，应付运费%.2f元", _fFreight]; }// self.buttonH5.labelBut.text = [NSString stringWithFormat:@"实际配送%.2f公里，应付运费%.2f元", lDistance, fFreight]; } else { self.buttonH5 = [[ButtonDetailH5 alloc]initWithFrame:CGRectMake(0, 0, 230, 44)]; self.buttonH5.center = CGPointMake(WINDOW_WIDTH-15-self.buttonH5.bounds.size.width/2, buttonDetail.center.y-25); self.buttonH5.labelBut.text = @"具体运费最终由实际配送里程决定"; } self.buttonH5.hidden = YES; __weak __typeof(self)safeSelf = self; self.buttonH5.buttonPressed = ^(NSInteger tag){ //加载H5的位置 FeeWebViewController *feeWebViewController = [[FeeWebViewController alloc] init]; if(safeSelf.strWayBillld.length > 0) { feeWebViewController.waybillId = safeSelf.strWayBillld; feeWebViewController.title = @"配送运费"; [safeSelf.navigationController pushViewController:feeWebViewController animated:YES]; safeSelf.buttonH5.hidden = YES; } }; [contentCell addSubview:self.buttonH5]; } } . . . }} -(void)buttonDetail{ if (self.buttonH5.hidden==NO) { self.buttonH5.hidden = YES; }else{ self.buttonH5.hidden = NO; }}下面是抽象出来的小气泡类。
ButtonDetailH5.h
#import <UIKit/UIKit.h>@interface ButtonDetailH5 : UIButton@property (strong, nonatomic) UIImageView *imageViewbut;@property (strong, nonatomic) UIImageView *imageViewbutIcon;@property (strong, nonatomic) UILabel *labelBut;@property (strong, nonatomic) UIButton* buttonBut;@property (copy, nonatomic) void(^buttonPressed)(NSInteger tag);-(instancetype)initWithFrame:(CGRect)frame;@endButtonDetailH5.m
#import "ButtonDetailH5.h"@implementation ButtonDetailH5-(instancetype)initWithFrame:(CGRect)frame{ if (self = [super initWithFrame:frame]) { self.imageViewbut = [[UIImageView alloc]initWithFrame:CGRectMake(12, -2, frame.size.width, frame.size.height-5)]; UIImage *image = [UIImage imageNamed:@"prompt_fare_box_card"]; //UIEdgeInsets insets = UIEdgeInsetsMake(5.0f, 5.0f, 5.0f, 5.0f); NSInteger leftCapWidth = image.size.width * 0.5f; // 顶端盖高度 NSInteger topCapHeight = image.size.height * 0.5f; // 重新赋值 image = [image stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:topCapHeight]; self.imageViewbut.image = image; [self addSubview:self.imageViewbut]; self.imageViewbutIcon = [[UIImageView alloc]initWithFrame:CGRectMake(frame.size.width-7, frame.size.height-5 - 2, 8, 4)]; self.imageViewbutIcon.image = [UIImage imageNamed:@"prompt_fare_arrow_card.png"]; [self addSubview:self.imageViewbutIcon]; self.labelBut = [[UILabel alloc]initWithFrame:self.imageViewbut.frame]; self.labelBut.text = @" 实际配送125.565公里，应付运费134.34元"; self.labelBut.font = [UIFont systemFontOfSize:12]; self.labelBut.center = CGPointMake(self.labelBut.center.x+10, self.labelBut.center.y); self.labelBut.textColor = [UIColor whiteColor]; self.labelBut.textAlignment = NSTextAlignmentLeft; [self addSubview:self.labelBut]; self.buttonBut = [UIButton buttonWithType:UIButtonTypeCustom]; [self.buttonBut setTitle:@"详情" forState:UIControlStateNormal]; self.buttonBut.frame = CGRectMake(frame.size.width-40 + 15, -4, 44, 44); self.buttonBut.titleLabel.font = [UIFont systemFontOfSize:12]; [self.buttonBut setTitleColor:[UIColor colorWithHex:0x007aff] forState:UIControlStateNormal]; [self.buttonBut addTarget:self action:@selector(button:) forControlEvents:UIControlEventTouchUpInside]; self.buttonBut.tag = 2; [self addSubview:self.buttonBut]; self.tag = 1; [self addTarget:self action:@selector(button:) forControlEvents:UIControlEventTouchUpInside]; } return self;}-(void)button:(UIButton* )sender{ if (self.buttonPressed) { self.buttonPressed(sender.tag); }}@end第二种方案：多视图方案，对不同单元格斗加入2个uiview(一个显示长内容信息，另一个显示短内容信息)，通过数据源控制uiview的显示和隐藏。又称多气泡法，有无气泡不确定。具体是一张表有很多记录，每个单元格都有可能有小气泡，也可能没有（本质是有只是把它隐藏了），点击小气泡会显示小黑条，每个小黑条显示的内容不长度不同，点击小黑条进入不同的h5页面,点击其它非气泡按钮，滚动表格，选择表格的行事件小黑条隐藏，点击气泡若以前有小黑条显示就隐藏小黑条并显示本气泡的小黑条，若没有只显示本气泡的小黑条。这种气泡我采用的是对每个cell建立一个带xib对象，增加相关控件。有气泡按钮过小增加透明按钮的处理，分解小黑条的按钮图片文字3个button。在表格加载函数中处理小气泡和小黑条的显示和指针记录。点击气泡时我记录了当前数据的行数，和显示UIVIEW。我定义两个UIVIEW为显示不同长度的小黑条。
实际页面：多个小气泡。
实际页面：多个小气泡之间的互斥，只能显示一个小黑条，并且滑动表格，小黑条消失，点击小黑条跳到html5页面。 
实际页面：多个小气泡之间的互斥，只能显示一个小黑条，并且滑动表格，小黑条消失，点击小黑条由于没有计费策略所以跳到html5页面又跳回来。
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ if((self.arratData.count <= indexPath.section) || (0== self.arratData.count)) { return nil; } UITableViewCell* cell = nil; UITableViewCell* cell = nil;// NSString *consigneeAddressStr = nil; long lEstimated = 0; double lDistance = 1001.0; long lQuickType = 2; float fFreight = 0.0;// NSString * fFreightStr = nil; double consigneeLogitude = 0.0; double consigneeLatitude = 0.0; if ([self.strType isEqualToString:@"lanshou"]) { static NSString *cellIdentifier = @"OrderWaitLanLanTableViewCell"; OrderWaitLanLanTableViewCell *cellLanShou =(OrderWaitLanLanTableViewCell*)[tableView dequeueReusableCellWithIdentifier:cellIdentifier]; if (!cellLanShou) { UINib* nib =[UINib nibWithNibName:@"OrderWaitLanLanTableViewCell" bundle:nil]; [tableView registerNib:nib forCellReuseIdentifier:cellIdentifier]; cellLanShou = (OrderWaitLanLanTableViewCell*)[tableView dequeueReusableCellWithIdentifier:cellIdentifier]; } lQuickType = [[[self.arratData objectAtIndex:indexPath.section]valueForKey:@"quickType"] longValue]; lEstimated = [[[self.arratData objectAtIndex:indexPath.section]valueForKey:@"estimated"] longValue]; consigneeLogitude = [[[self.arratData objectAtIndex:indexPath.section]valueForKey:@"consigneeLongitude"] doubleValue]; consigneeLatitude = [[[self.arratData objectAtIndex:indexPath.section]valueForKey:@"consigneeLatitude"] doubleValue]; if((0 == consigneeLogitude) || (0 == consigneeLatitude)) { cellLanShou.labelPeiSongFei.text =[NSString stringWithFormat:@"运 费: %.2f元 (预估)", [[[self.arratData objectAtIndex:indexPath.section]valueForKey:@"freight"] floatValue]/100]; } else { cellLanShou.labelPeiSongFei.text = [NSString stringWithFormat:@"运 费: %.2f元", [[[self.arratData objectAtIndex:indexPath.section]valueForKey:@"freight"] floatValue]/100]; } UIImage *image = [UIImage imageNamed:@"prompt_fare_box_card"]; NSInteger leftCapWidth = image.size.width * 0.5f; // 顶端盖高度 NSInteger topCapHeight = image.size.height * 0.5f; // 重新赋值 image = [image stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:topCapHeight]; if((1 == lQuickType) && (1 == lEstimated) && (consigneeLatitude > 0) && (consigneeLogitude > 0)) { fFreight = [[[self.arratData objectAtIndex:indexPath.section]valueForKey:@"freight"] longValue]; fFreight = fFreight/100; lDistance = [[[self.arratData objectAtIndex:indexPath.section]valueForKey:@"walkingDistance"] integerValue]; if(lDistance >= 0) { fFreight = [[[self.arratData objectAtIndex:indexPath.section]valueForKey:@"freight"] longValue]; fFreight = fFreight/100; if(lDistance >= 1000) { lDistance = lDistance/1000; [cellLanShou.contentDisplayBtn setTitle:[NSString stringWithFormat:@" 实际配送%.2f公里，应付运费%.2f元", lDistance, fFreight] forState:UIControlStateNormal]; } else { [cellLanShou.contentDisplayBtn setTitle:[NSString stringWithFormat:@" 实际配送%ld米，应付运费%.2f元", (long)lDistance, fFreight] forState:UIControlStateNormal]; } } else { [cellLanShou.contentDisplayBtn setTitle:[NSString stringWithFormat:@" 实际配送--公里，应付运费%.2f元", fFreight] forState:UIControlStateNormal]; }// [[self.arratData objectAtIndex:indexPath.section] setValue:@"" forKey:@"walkingRouteDistance"]; [cellLanShou.contentDisplayBtn setBackgroundImage:image forState:UIControlStateNormal]; cellLanShou.contentBtn.row = indexPath.section; cellLanShou.contentBtn.contentUIView = cellLanShou.contentDetailView; cellLanShou.contentBtn.contentDisplayButton = cellLanShou.contentDisplayBtn; [cellLanShou.contentBtn addTarget:self action:@selector(buttonPressedContent:) forControlEvents:UIControlEventTouchUpInside]; cellLanShou.detailBackgroundBtn.contentUIView = cellLanShou.contentDetailView; cellLanShou.detailBackgroundBtn.isShortBtn = NO; } else { cellLanShou.contentShortBtn.contentDisplayButton = nil; [cellLanShou.contentDisplayShortBtn setBackgroundImage:image forState:UIControlStateNormal]; cellLanShou.contentShortBtn.contentUIView = cellLanShou.contentShortDetailView; cellLanShou.contentShortBtn.row = indexPath.section; [cellLanShou.contentShortBtn addTarget:self action:@selector(buttonPressedContent:) forControlEvents:UIControlEventTouchUpInside]; cellLanShou.detailBackgroundBtn.contentUIView = cellLanShou.contentShortDetailView; [cellLanShou.contentDisplayShortBtn setTitle:@" 具体运费最终由实际配送里程决定" forState:UIControlStateNormal]; cellLanShou.detailBackgroundBtn.isShortBtn = YES; } cellLanShou.detailBackgroundBtn.row = indexPath.section; [cellLanShou.detailBackgroundBtn addTarget:self action:@selector(buttonPressedDetail:) forControlEvents:UIControlEventTouchUpInside]; if(2 == lQuickType) { cellLanShou.contentDetailView.hidden = YES; cellLanShou.contentShortDetailView.hidden = YES; cellLanShou.detailBackgroundBtn.hidden = YES; cellLanShou.detailBtn.hidden = YES; } else { cellLanShou.detailBackgroundBtn.hidden = NO; cellLanShou.detailBtn.hidden = NO; if((_iRow >= 0) && !_bHidden && (_iRow == indexPath.section)) { if(cellLanShou.detailBackgroundBtn.isShortBtn) { cellLanShou.contentShortDetailView.hidden = NO; cellLanShou.contentDetailView.hidden = YES; } else { cellLanShou.contentShortDetailView.hidden = YES; cellLanShou.contentDetailView.hidden = NO; } } else { cellLanShou.contentShortDetailView.hidden = YES; cellLanShou.contentDetailView.hidden = YES; } } NSString *quickTypeIconUrl = [[[self.arratData objectAtIndex:indexPath.section]valueForKey:@"courierRankIconUrl"] toString]; [self loadIcon:cellLanShou.imageViewPeiSongDengJi withWayQuickTypeIconUrl:quickTypeIconUrl withTableViewcell:cellLanShou]; quickTypeIconUrl = [[[self.arratData objectAtIndex:indexPath.section]valueForKey:@"quickTypeIconUrl"] toString]; [self loadOrderTypeIcon:cellLanShou.imageViewOrderType withWayQuickTypeIconUrl:quickTypeIconUrl withTableViewcell:cellLanShou]; cell = cellLanShou; }...}-(void)hiddenDetail{ if((nil == _contentHVView) || (_iRow < 0)) { return; } if(!(_contentHVView.hidden)) { _contentHVView.hidden = YES; _iRow = -1; _bHidden = YES; }}- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ [self hiddenDetail]; . . .}-(void)viewWillDisappear:(BOOL)animated{ [super viewWillDisappear:YES]; self.imageViewIconIcon.hidden = YES; self.labelTitle.hidden = YES; self.buttonRightItem.hidden = YES; self.imageViewNavView.hidden = YES; _viewImageControlBG = nil; [self.remindLabel removeFromSuperview]; [self hiddenDetail];}// 滚动时，触发该函数- (void)scrollViewDidScroll:(UIScrollView *)scrollView { [self hiddenDetail];}-(void)buttonPressedDetail:(UIButtonValue*)sender{ if((nil == sender) || (nil == sender.contentUIView)) { return; } sender.contentUIView.hidden = !(sender.contentUIView.hidden); if(!(sender.contentUIView.hidden)) { if((nil != self.tableView) && (self.arratData.count > 0 ) && (sender.row < self.arratData.count) && (_iRow < self.arratData.count)) { if((_iRow != sender.row) && (_iRow >= 0)) { _contentSecondHVView = _contentHVView; _contentSecondHVView.hidden = YES; _contentHVView = sender.contentUIView; _contentHVView.hidden = NO; _iRow = sender.row; _bHidden = NO; } else { _iRow = sender.row; _contentHVView = sender.contentUIView; _contentHVView.hidden = NO; _bHidden = NO;// [self.tableView reloadRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:0 inSection:sender.row]] withRowAnimation:UITableViewRowAnimationNone]; } } else { _iRow = sender.row; _contentHVView = sender.contentUIView; _contentHVView.hidden = NO; _bHidden = NO; } } else { _contentHVView.hidden = YES; _iRow = -1; _bHidden = YES; }}-(void)buttonPressedContent:(UIButtonValue*)sender{ if((nil == sender) || (nil == sender.contentUIView)) { return; } if(!(sender.contentUIView.hidden)) {// sender.contentUIView.hidden = YES; _contentHVView = sender.contentUIView;// [self.tableView reloadData]; //跳转到运费模版页面 FeeWebViewController *feeWebViewController = [[FeeWebViewController alloc] init]; NSString *waybillIdStr = [[[self.arratData objectAtIndex:sender.row]valueForKey:@"waybillId"] toString]; if(waybillIdStr.length > 0) { feeWebViewController.waybillId = waybillIdStr; // webViewController.type = WebViewTypePolicy; feeWebViewController.title = @"配送运费"; [self.navigationController pushViewController:feeWebViewController animated:YES]; } } else { sender.contentUIView.hidden = NO; }} 0 0
- 小气泡功能在app中的两种实现方案
- 支付功能在app中的实现
- CSS气泡框的两种实现
- Java气泡提示功能实现
- 两种判断APP是否在运行中的比较
- 自适应的对话气泡皮肤实现方案
- Python:桌面气泡提示功能实现
- APP中的“去好评”功能的实现
- Android中的几种简单小功能实现
- 【C++基本功补习】查找三个数据中的最大值、最小值、中间值，两种实现方案比较
- 密码等级：至少包含字母、大小写数字、字符中的两种 JS实现方案
- 密码等级：至少包含字母、大小写数字、字符中的两种 JS实现方案
- 实现Apache虚拟主机的两种方案
- Javascript Callback的两种实现方案
- bootstrap 下拉菜单两种实现方案
- 两种分布式锁实现方案
- 离散傅里叶变换的两种实现方案
- 两种分布式锁实现方案(一)
- python基本语法
- What Is An iPhone UDID?
- listview记住上次滑动的位置
- centos7.1 安装chrome浏览器
- 路由、NAT与代理的区别
- 小气泡功能在app中的两种实现方案
- CSS派生选择器
- cocos2dx3.3+cocostudio1.6屏幕适配笔记
- dbn_svr代码遇到的问题及解决办法
- BloomFilter——大规模数据处理利器
- 同一个tomcat添加多个项目的报webAppRootKey错问题
- 【启发式搜索】[POJ 1077]Eight
- URL的井号
- hdu 1863 畅通工程-----------最小生成树模板题
