iOS开发之如何做一个可上下左右滑动的页面

本文详细介绍了如何使用collectionCellinCell方案实现一个具备上下滑动页面和内部左右滑动分区的展示类app。通过定义外层cell和内层cell的结构,实现了灵活的数据展示和页面导航功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

现在许多展示类的app一个页面有许多分区,页面可上下滑动,每一个分区的内容可以左右滑动。如果用一个通常的TableView并不能达到类似效果,现在提供一个collection Cell in Cell 的方案:
1.首先是最外层的cell:主要对展示的图片或文字进行设定

#import <UIKit/UIKit.h>
#import "Radio.h"
@interface RadioCollectionViewCell : UICollectionViewCell

@property(nonatomic,strong)UIImageView * imgView;
@property(nonatomic,strong)UILabel * label;
@end

#import "RadioCollectionViewCell.h"
@interface RadioCollectionViewCell()

@end


@implementation RadioCollectionViewCell

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0,self.frame.size.width, 100)];

        [self.contentView addSubview:_imgView];


        self.label = [[UILabel alloc]initWithFrame:CGRectMake(0, 100, self.frame.size.width, 20)];
        _label.textAlignment = NSTextAlignmentCenter;
        [self.contentView addSubview:_label];


        self.backgroundColor =[UIColor redColor];

    }
    return self;
}


2.第二层Cell,很关键,能否传值和推送页面皆在此,此页面定义父视图ViewController的一个属性

#import <UIKit/UIKit.h>
#import "RadioViewController.h"

@interface TempCollectionViewCell : UICollectionViewCell<UICollectionViewDataSource,UICollectionViewDelegate>
@property(nonatomic,strong)UIImageView * imgView;

@property(nonatomic,strong)UILabel * label;

@property(nonatomic,strong)NSString * newsId;

@property(nonatomic,strong)NSString * title;

@property(nonatomic,strong)RadioViewController * viewControllers;
//定义一个ViewController,才能将页面推送出去
@property(nonatomic,strong)UICollectionView * collecitonviews;;

@property(nonatomic,strong)NSMutableArray * allCollectionArray;

@end

#import "TempCollectionViewCell.h"
#import "RadioCollectionViewCell.h"
#import "RadioListTableViewController.h"
#import "UIImageView+WebCache.h"

static NSString *const reusecell = @"reusecell";


@implementation TempCollectionViewCell
//内层Cell item的大小正好等于外层cell图片和Label的和
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor cyanColor];
        UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
        flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        flowLayout.itemSize = CGSizeMake(120,120);
        self.collecitonviews = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:flowLayout];
        [self.collecitonviews registerClass:[RadioCollectionViewCell class] forCellWithReuseIdentifier:reusecell];
        self.collecitonviews.delegate = self;
        self.collecitonviews.dataSource = self;
        [self addSubview:self.collecitonviews];
    }
    return self;
}


- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.allCollectionArray.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    RadioCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reusecell forIndexPath:indexPath];

    Radio * radio = self.allCollectionArray[indexPath.item];

    cell.label.text = radio.catname;

    [cell.imgView sd_setImageWithURL:[NSURL URLWithString:radio.lmpic]];


    return cell;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    UIStoryboard * storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
    RadioListTableViewController * radioTVC = (RadioListTableViewController *)[storyboard instantiateViewControllerWithIdentifier:@"radioList"]; 
    radioTVC.newsId =(NSInteger)[self.allCollectionArray objectAtIndex:indexPath.item];
    [self.viewControllers showViewController:radioTVC sender:nil];
}

@end

3.
`#import “RadioViewController.h”
static NSString *const reuse = @”reuse”;

@interface RadioViewController ()

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值