阿里云开发者社区

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

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

2024-05-21107
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：小气泡功能在中的两种实现方案

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


相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程，理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上，理解并学会运用各个服务组件，了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求& nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准，准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
目录
相关文章
|
前端开发JavaScriptAPI
vue3-ts-storybook：理解storybook、实践 / 前端组件库
vue3-ts-storybook：理解storybook、实践 / 前端组件库
70300
|
5月前
|
云安全人工智能安全
《大模型安全研究报告（2024年）》正式发布
《大模型安全研究报告（2024年）》正式发布
|
10月前
|
前端开发
前端base64转Blob，Blob转文件下载
前端将base64字符串转换为Blob对象，再将Blob对象转换为文件并实现下载。包括处理数据URL和纯base64字符串的情况，并提供了一个辅助函数用于转换。
22822
|
监控NoSQL算法
宕机后，Redis如何实现快速恢复
宕机后，Redis如何实现快速恢复
18922
|
9月前
|
Web App开发JavaScript数据可视化
vue3扩展echart封装为组件库-快速复用
vue3扩展echart封装为组件库-快速复用
37677
|
9月前
|
存储NoSQLMongoDB
MongoDB 创建集合
10月更文挑战第13天
13411
|
11月前
|
SQL负载均衡关系型数据库
*配置MySQL集群
【8月更文挑战第16天】*配置MySQL集群
38622
HTML+CSS 星空闪烁登录页面（记得收藏）
HTML+CSS 星空闪烁登录页面（记得收藏）
|
12月前
|
机器学习/深度学习数据采集TensorFlow
深度学习与传统模型的桥梁：Sklearn与Keras的集成应用
【7月更文第24天】在机器学习领域，Scikit-learn（Sklearn）作为经典的传统机器学习库，以其丰富的预处理工具、模型选择和评估方法而闻名；而Keras作为深度学习领域的明星框架，以其简洁易用的API，支持快速构建和实验复杂的神经网络模型。将这两者结合起来，可以实现从传统机器学习到深度学习的无缝过渡，充分发挥各自的优势，打造更强大、更灵活的解决方案。本文将探讨Sklearn与Keras的集成应用，通过实例展示如何在Sklearn的生态系统中嵌入Keras模型，实现模型的训练、评估与优化。
30000
|
12月前
|
存储开发框架JavaScript
在Vue3项目中使用pinia代替Vuex进行数据存储
在Vue3项目中使用pinia代替Vuex进行数据存储