iOS简单实现查看更多/收起的效果[最新]

首先看效果:

控件层次关系:
1. 类似于按钮的控件在UICollectionViewCell上; UICollectionView在UITableViewCell上;
2. 查看更多/收起按钮放置在UITableView的区尾上.

上代码:
1.ViewController.m中:

#import "ViewController.h"#import "TheCollectionTableViewCell.h"@interface ViewController ()<UITableViewDataSource, UITableViewDelegate>@property (weak, nonatomic) IBOutlet UITableView *tableView;@property (assign, nonatomic) BOOL isOpen;@property (assign, nonatomic) NSInteger showButtonNumber;@property (copy, nonatomic) NSArray *titleArr;@property (strong, nonatomic) UIButton *theButton;@end@implementation ViewController- (UIButton *)theButton{    if (!_theButton) {        _theButton = [UIButton buttonWithType:(UIButtonTypeCustom)];        _theButton.frame = CGRectMake(0, 0, [UIApplication sharedApplication].keyWindow.frame.size.width, 30);        [_theButton setTitle:@"查看更多" forState:(UIControlStateNormal)];        [_theButton addTarget:self action:@selector(handleAction:) forControlEvents:(UIControlEventTouchUpInside)];        [_theButton setTitleColor:[UIColor blueColor] forState:(UIControlStateNormal)];        [_theButton setBackgroundColor:[UIColor whiteColor]];        _theButton.layer.cornerRadius = 5;        _theButton.layer.masksToBounds = YES;        _theButton.layer.borderWidth = 1;        _theButton.layer.borderColor = [UIColor greenColor].CGColor;    }    return _theButton;}- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.    self.navigationItem.title = @"查看更多/收起demo";    self.tableView.delegate = self;    self.tableView.dataSource = self;    [self.tableView registerNib:[UINib nibWithNibName:@"TheCollectionTableViewCell" bundle:nil] forCellReuseIdentifier:@"TheCollectionTableViewCell"];    _showButtonNumber = 8;    _titleArr = @[@"标题1", @"标题2", @"标题3", @"标题4",                  @"标题5", @"标题6", @"标题7", @"标题8",                  @"标题9", @"标题10", @"标题11", @"标题12",                  @"标题13", @"标题14", @"标题15"];}// 记录按钮点击事件, 设定_isOpen- (void)handleAction:(UIButton *)sender{    _isOpen = !_isOpen;    if (_isOpen) {        _showButtonNumber = _titleArr.count;        [sender setTitle:@"收起" forState:(UIControlStateNormal)];    }else{        _showButtonNumber = 8;        [sender setTitle:@"查看更多" forState:(UIControlStateNormal)];    }    [self.tableView reloadSections:[NSIndexSet indexSetWithIndex:0] withRowAnimation:(UITableViewRowAnimationAutomatic)];}#pragma mark - UITableViewDataSource, UITableViewDelegate -- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{    return 1;}- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{    // 根据是否打开的标识 _isOpen返回不同row高度.    if (_isOpen) {        // 按照整数/整数丢失精度仍为整数的思想(例如 9/5=1), 显示按钮的行数 = 显示按钮的个数/(每行显示的按钮个数+1) 行数为_titleArr.count / (4+1)        CGFloat height = (_titleArr.count / (4+1) + 1) * 30;        return height;    }else{        return 60;    }}- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{    return 0.05;}- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{    return 30;}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{    TheCollectionTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"TheCollectionTableViewCell" forIndexPath:indexPath];    [cell setupCellWithNumber:_showButtonNumber andButtonNameArr:_titleArr];    cell.buttonClicked = ^(NSInteger index){        NSLog(@"点击的按钮下标为: %ld", index);    };    return cell;}- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{    UIView *firstFooter = [[UIView alloc] initWithFrame:self.theButton.frame];    [firstFooter addSubview:self.theButton];    return firstFooter;}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

2.TheCollectionTableViewCell.h中

#import <UIKit/UIKit.h>@interface TheCollectionTableViewCell : UITableViewCell// 用于回调按钮被点击的block@property (copy, nonatomic) void(^buttonClicked)(NSInteger index);- (void)setupCellWithNumber:(NSInteger)buttonCount andButtonNameArr:(NSArray *)buttonNameArr;@end

3.TheCollectionTableViewCell.m中

#import "TheCollectionTableViewCell.h"#import "TheItemCell.h"@interface TheCollectionTableViewCell ()<UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;@property (assign, nonatomic) NSInteger cellNumber;@property (copy, nonatomic) NSArray *buttonTitleArr;@end@implementation TheCollectionTableViewCell- (void)awakeFromNib {    self.collectionView.dataSource = self;    self.collectionView.delegate = self;    // 布局对象    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];    // 配置布局对象    flowLayout.itemSize = CGSizeMake(([UIApplication sharedApplication].keyWindow.frame.size.width - 3)/4, 29);    flowLayout.minimumInteritemSpacing = 1;    flowLayout.minimumLineSpacing = 1;    // 分区中布局缩进量: 逆时针 上 左 下 右    flowLayout.sectionInset =UIEdgeInsetsMake(0, 0, 0, 0);    self.collectionView.collectionViewLayout = flowLayout;    [self.collectionView registerNib:[UINib nibWithNibName:@"TheItemCell" bundle:nil] forCellWithReuseIdentifier:@"TheItemCell"];    self.collectionView.scrollEnabled = NO;    self.collectionView.backgroundColor = [UIColor whiteColor];}- (void)setupCellWithNumber:(NSInteger)buttonCount andButtonNameArr:(NSArray *)buttonNameArr{    _cellNumber = buttonCount;    _buttonTitleArr = [NSArray arrayWithArray:buttonNameArr];    [self.collectionView reloadData];}#pragma mark - UICollectionViewDataSource, UICollectionViewDelegateFlowLayout -- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return _cellNumber;}- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{    return 1;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    TheItemCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"TheItemCell" forIndexPath:indexPath];    cell.contentView.backgroundColor = [UIColor cyanColor];    if (indexPath.row < _buttonTitleArr.count) {        cell.theTitleLabel.text = _buttonTitleArr[indexPath.row];    }else{        cell.theTitleLabel.text = @"占位";    }    return cell;}- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{    self.buttonClicked(indexPath.row);}- (void)setSelected:(BOOL)selected animated:(BOOL)animated {    [super setSelected:selected animated:animated];    // Configure the view for the selected state}@end

4.TheCollectionTableViewCell.xib中
只有一个collectionView布满这个tableViewCell.

5.TheItemCell.h中

#import <UIKit/UIKit.h>@interface TheItemCell : UICollectionViewCell@property (weak, nonatomic) IBOutlet UILabel *theTitleLabel;@end

6.TheItemCell.m中

#import "TheItemCell.h"@implementation TheItemCell- (void)awakeFromNib {    // Initialization code}@end

7.TheItemCell.xib
只有一个label在cell正中间.

github地址