iOS简单实现查看更多/收起的效果

此博客模板出现问题, 代码已移植到：另一篇博客

 

首先看效果:

控件层次关系: 

I 类似于按钮的控件在UICollectionViewCell上; UICollectionView在UITableViewCell上;

II 查看更多/收起按钮放置在UITableView的区尾上.

 

Github地址

此博客模板出现问题, 代码已移植到：另一篇博客

 

上代码: 
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;
}

@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);
}

@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地址