iOS tableviewcell裡點選文字展開與收起功能

明似水發表於2020-10-11

做專案遇到動態列表中需要做文字展開與收起功能，有空單獨抽出一個demo給大家參考。
1、效果圖如下：
在這裡插入圖片描述

2、建立tableview與新增資料

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    self.title = @"在tablecell中文字的展開與收起";
    self.allData = [NSMutableArray array];
    //新增子檢視
    [self addSubViewUI];
    //請求資料
    [self requestMessageListData];
    //增加重新整理
    [self addRefresh];
}

模擬請求資料

#pragma mark ==========請求資料==========
-(void)requestMessageListData{
    NSArray *arr = @[ ];
    for (int i = 0; i<10; i++) {
        HBTextChangeModel *model = [HBTextChangeModel new];
        model.content = arr[arc4random_uniform(10)];
        [self.allData addObject:model];
    }
    [self endRefresh];
    [self.tableView reloadData];
}

設定上拉載入，下拉重新整理

- (void)endRefresh{
    if (self.tableView.mj_header.refreshing) {
        [self.tableView.mj_header endRefreshing];
    }
    if (self.tableView.mj_footer.refreshing) {
        [self.tableView.mj_footer endRefreshing];
    }
}
- (void)addRefresh{
    WEAKSELF;
    self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        //請求資料
       // weakSelf.pageNo = 1;
        [weakSelf.allData removeAllObjects];
        [weakSelf requestMessageListData];
    }];
    self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{
        //請求資料
        //weakSelf.pageNo++;
        [weakSelf requestMessageListData];
    }];
}

新增子檢視

#pragma mark ==========新增子檢視==========
-(void)addSubViewUI{
    [self.view addSubview:self.backBtn];
    [self.backBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).offset(20);
        make.left.equalTo(self.view).offset(15);
        make.size.mas_equalTo(CGSizeMake(100, 25));
    }];
    
    [self.view addSubview:self.tableView];
    [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.backBtn.mas_bottom);
        make.bottom.equalTo(self.view);
        make.left.right.equalTo(self.view);
    }];
}
#pragma mark ==========tableViewDelegate==========
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return self.allData.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return 1;
}

#pragma mark ==========tableview代理方法==========
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    HBTextChangeTabCell *cell = [tableView dequeueReusableCellWithIdentifier:@"HBTextChangeTabCell"];
    if (cell == nil) {
        cell = [[HBTextChangeTabCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"HBTextChangeTabCell"];
    }
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    cell.backgroundColor = [UIColor clearColor];
    HBTextChangeModel *model = self.allData[indexPath.section];
    cell.model = model;
    WEAKSELF;
    cell.updateMessageCellBlock = ^(NSString * _Nonnull str) {
        [weakSelf.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
    };
    [cell layoutIfNeeded];
    return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return UITableViewAutomaticDimension;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 15;
}
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    //全部商品
    UIView *headerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 15)];
    headerView.backgroundColor = [UIColor grayColor];
    return headerView;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    return 0.01;
}
-(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{
    //全部商品
    UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 0.01)];
    footerView.backgroundColor = [UIColor clearColor];
    return footerView;
}


-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
 
}

#pragma mark ==========tableViewGetter==========
-(UITableView *)tableView{
    if (!_tableView) {
        _tableView = ({
            UITableView *tableView = [[UITableView alloc]initWithFrame:CGRectZero style:UITableViewStylePlain];
            tableView.dataSource = self;
            tableView.delegate = self;
            tableView.backgroundColor = [UIColor clearColor];
            //設定分割線樣式
            tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
            //cell的分割線距檢視距離
            tableView.separatorInset=UIEdgeInsetsMake(0, 0, 0, 0);
            //隱藏底部多餘分割線
            tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];
            //iOS11預設開啟Self-Sizing，需關閉才能設定Header,Footer高度
            tableView.estimatedRowHeight = 66;
            tableView.estimatedSectionHeaderHeight = 0;
            tableView.estimatedSectionFooterHeight = 0;
            tableView.rowHeight = 50 ;
            tableView.tableHeaderView = [[UIView alloc] initWithFrame:CGRectZero];;
            tableView ;
        }) ;
    }
    return _tableView;
}
-(UIButton *)backBtn{
    if (!_backBtn) {
        _backBtn = ({
            //建立按鈕
            UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
            //設定標題
            [button setTitle:@"返回" forState:UIControlStateNormal];
            //設定字型大小
            button.titleLabel.font = [UIFont systemFontOfSize:14];
            //設定title顏色
            [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
            //新增點選事件
            [button addTarget:self action:@selector(clickBackButton:) forControlEvents:UIControlEventTouchUpInside];
            
            button;
        });
    }
    return _backBtn;
}
#pragma mark ==========點選返回==========
-(void)clickBackButton:(UIButton *)button{
    [self dismissViewControllerAnimated:YES completion:nil];
}

3、cell中的核心程式碼:

-(void)setModel:(HBTextChangeModel *)model{
    _model = model;
    NSString *desc = model.content;
    if (desc) {
        //計算文字高度
        CGFloat height = [desc heightWithStrAttri:@{NSFontAttributeName:FONT(15), NSForegroundColorAttributeName: Color_label_DataTitle,NSParagraphStyleAttributeName:[self paragraphStyle]} withLabelWidth:SCREEN_WIDTH];
        if (height > 67) { //超過3行
            if (model.showAll) {
                //拼接再算高度
                height = [[NSString stringWithFormat:@"%@...收起",desc] heightWithStrAttri:@{NSFontAttributeName:FONT(15), NSForegroundColorAttributeName: Color_label_DataTitle,NSParagraphStyleAttributeName:[self paragraphStyle]} withLabelWidth:SCREEN_WIDTH];
                
                [self.contentBaseView mas_updateConstraints:^(MASConstraintMaker *make) {
                    make.height.mas_equalTo(height+5);
                }];
                self.contentLabel.truncationToken = nil;
                [self setShowTextWithDesc:desc];
            } else {
                
                [self.contentBaseView mas_updateConstraints:^(MASConstraintMaker *make) {
                    make.height.mas_equalTo(67);
                }];
                [self setAdjustableTextWithDesc:desc];
            }
        } else {
            [self.contentBaseView mas_updateConstraints:^(MASConstraintMaker *make) {
                make.height.mas_equalTo(height+10);
            }];
            NSMutableAttributedString *text = [[NSMutableAttributedString alloc] initWithString:desc attributes:@{ NSFontAttributeName:FONT(15), NSParagraphStyleAttributeName : [self paragraphStyle]}];
            self.contentLabel.attributedText = text;
        }
    }
}
- (void)setShowTextWithDesc:(NSString *)desc
{
    NSMutableAttributedString *text = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@...收起",desc] attributes:@{ NSFontAttributeName:FONT(15), NSParagraphStyleAttributeName : [self paragraphStyle]}];
    
    WEAKSELF;
    //設定高亮色和點選事件
    [text setTextHighlightRange:[[text string] rangeOfString:@"收起"] color:[UIColor colorWithHexString:@"#0099FF"] backgroundColor:[UIColor clearColor] tapAction:^(UIView * _Nonnull containerView, NSAttributedString * _Nonnull text, NSRange range, CGRect rect) {
        weakSelf.model.showAll = NO;
        if (self.updateMessageCellBlock) {
            self.updateMessageCellBlock(@"");
        }

    }];
    self.contentLabel.attributedText = text;
}

- (NSMutableParagraphStyle *)paragraphStyle {
    NSMutableParagraphStyle *para = [NSMutableParagraphStyle new];
    para.lineSpacing = 5.f;
    return para;
}

- (void)setAdjustableTextWithDesc:(NSString *)desc
{
    NSMutableAttributedString *text = [[NSMutableAttributedString alloc] initWithString:desc attributes:@{ NSFontAttributeName:FONT(15), NSParagraphStyleAttributeName : [self paragraphStyle]}];
    self.contentLabel.attributedText = text;
    
    WEAKSELF;
    NSMutableAttributedString *showAll = [[NSMutableAttributedString alloc] initWithString:@"...展開" attributes:nil];
    YYTextHighlight *hi = [YYTextHighlight new];
    [hi setColor:[UIColor colorWithHexString:@"#009900"]];
    hi.tapAction = ^(UIView *containerView,NSAttributedString *text,NSRange range, CGRect rect) {
        weakSelf.model.showAll = YES;
        if (self.updateMessageCellBlock) {
            self.updateMessageCellBlock(@"");
        }
    };
    
    NSRange range = [showAll.string rangeOfString:@"展開"];
    [showAll setColor:[UIColor colorWithHexString:@"#0099FF"] range:range];
    [showAll setTextHighlight:hi range:range];
    showAll.font = FONT(15);
    YYLabel *seeMore = [YYLabel new];
    seeMore.attributedText = showAll;
    [seeMore sizeToFit];
    seeMore.height += 2.f;
    NSAttributedString *truncationToken = [NSAttributedString attachmentStringWithContent:seeMore contentMode:UIViewContentModeCenter attachmentSize:seeMore.frame.size alignToFont:FONT(15) alignment:YYTextVerticalAlignmentTop];
    self.contentLabel.truncationToken = truncationToken;
}

最後附上demo連線

END.

文字超長，實現展開收起功能...
2018-08-20
文章點選展開和收起詳解
2018-12-20
安卓開發點選空白處收起鍵盤
2021-09-09
安卓
JavaScript段落展開收起效果
2018-05-22
JavaScript
vue實現展開全部，收起全部
2018-05-28
Vue
JS如何實現點選複製功能，JS點選複製文字
2024-04-06
JS
css3多行文字多行文字縮略點選更多展開顯示全部
2024-04-21
CSSS3
FairyGui--實現點選按鈕使UI欄開啟和收起
2020-11-04
AIGUI
突發奇想！藉助CSS自定義彩色字型來實現多行文字展開收起
2023-03-27
CSS
基於JQuery的自定義樹形選單表格，實現展開、收起效果
2020-11-27
jQuery
js控制文字內容過多時候點選展開方式顯示全部內容demo
2019-05-11
JS
Hack 蘋果系統 Api 實現 iOS TableViewCell 側滑方案
2019-03-04
蘋果APIiOSView
iOS開發基礎136-防暴力點選
2024-07-23
iOS
jquery 設定百度商橋預設收起不展開
2019-05-11
jQuery
ios 最新系統bug與解決——微信公眾號中彈出鍵盤再收起時，原虛擬鍵盤位點選事件無效
2019-03-04
iOS事件
vue3下拉選單點選之後緩慢展開與緩慢關閉
2024-08-30
Vue
Flutter 與 iOS 功能比較
2020-05-11
FlutteriOS
小程式迴圈列表點選展開收縮
2018-06-25
mui 點選長按複製文字
2018-10-22
UI
iOS textField鍵盤彈出/收起自動上下移
2018-07-12
iOS
APPIUM+IOS 點選介面元素
2021-01-12
APPiOS
iOS 不規則Button點選
2019-04-08
iOS
點選平滑下拉展開摺疊樹形導航選單
2018-05-28
iOS開發之TabBar再次點選實現重新整理
2018-03-27
iOStabBar
短視訊系統原始碼，點選螢幕空白處鍵盤不自動收起
2022-07-04
原始碼
點選文字選中或取消選中checkbox核取方塊
2020-03-12
iOS 不規則Button點選（二）
2019-04-10
iOS
iOS 點贊功能高併發的思考
2018-08-02
iOS
iOS呼叫系統相機、相簿裡面的文字顯示英文
2019-01-17
iOS
JavaScript 點選複製選中文字程式碼例項
2019-05-14
JavaScript
影片直播APP原始碼，透過css控制div內容展開更多/收起效果
2023-01-12
APP原始碼CSS
HTML5：給漢字加拼音？收起展開元件？讓我秀給你看
2020-04-07
HTML元件
KgCaptcha文字點選驗證碼【建議收藏】
2023-04-20
GCAPT
點選搜尋框清空搜尋提示文字
2018-03-16
IOS setOnclick - 點選事件完美擴充套件
2021-09-09
iOS事件套件
影片直播原始碼，Flutter 富文字部分文字可以觸發點選
2023-10-09
原始碼Flutter
Android與iOS測試注意點
2019-04-10
AndroidiOS
傢俱小程式開發優勢與功能特點
2021-05-25

iOS tableviewcell裡點選文字展開與收起功能

相關文章