阿里云开发者社区

电脑版
提示:原网页已由神马搜索转码, 内容由developer.aliyun.com提供.

小气泡功能在中的两种实现方案

2024-05-2143
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
可视分析地图（DataV-Atlas），3 个项目，100M 存储空间
数据可视化DataV，5个大屏 1个月
简介：小气泡功能在中的两种实现方案

看到别人的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;@end

ButtonDetailH5.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;    }
}


相关实践学习
Github实时数据分析与可视化
基于Github Archive公开数据集，将项目、行为等20+种事件类型数据实时采集至Hologres进行分析，并搭建可视化大屏。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程，理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上，理解并学会运用各个服务组件，了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求& nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准，准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
目录
相关文章
|
3月前
|
消息中间件物联网数据处理
TDengine 数据接入功能支持 Wonderware 了，不需一行代码完成迁移工作
TDengine 3.2.3.0 引入了 Wonderware Historian (AVEVA Historian) 连接器，简化了数据迁移至 TDengine 的过程，增强时序数据管理与分析。此连接器解决了传统实时数据库扩展性问题，提供成本效益高、国产化的替代方案。TDengine 已支持多种数据源集成，如 OPC、Kafka、MQTT等，打造统一数据平台，助力企业数字化转型。作为高性能时序数据库，TDengine 提供云原生解决方案，减少系统复杂度，加速业务创新。
4366
|
11月前
|
Kubernetes网络虚拟化Perl
k8s常用的网络插件优化方案|干货
k8s常用的网络插件优化方案|干货
|
4月前
|
消息中间件缓存监控
项目接口性能优化方案
项目接口性能优化方案
7111
|
存储缓存JSON
聊聊方案中心性能优化中做的缓存设计
总结国际站方案中心物流运费计算性能优化过程中面临问题、问题分析、解决思路以及整体解决方案
聊聊方案中心性能优化中做的缓存设计
|
SQL存储缓存
18种接口实用优化方案总结
18种接口实用优化方案总结
|
SQL消息中间件缓存
接口优化的常见方案实战总结
接口优化的常见方案实战总结
|
安全BI
OKCC系统都有哪些功能及搭建方案
随着企业对服务逐渐重视，开始意识到呼叫中心作为客户服务水平和沟通效率的基本平台，并且有越来越多的企业开始利用呼叫中心外呼方式销售自己的产品。在此背景下，很多企业，无论规模大小，都有建立自己呼叫中心的想法。
|
SQL前端开发JavaScript
6款 Retool 最佳替代方案
本篇文章的目的通过低代码平台使用者的视角引出细节，了解他们为什么使用低代码平台以及会选择哪个低代码平台来加速内部系统的开发。
6款 Retool 最佳替代方案
typescripet92-添加任务功能优化
typescripet92-添加任务功能优化
10300
typescripet92-添加任务功能优化
|
Prometheus监控数据可视化

热门文章

最新文章

相关课程

更多

相关电子书

更多

相关实验场景

更多