带有多个部分的水平滚动的collectionview

问题描述

我想像这样开发屏幕(目标 C):

I want to develop the screen(objective C) like this :

这里有部分名称:

1. 我们喜爱的新游戏
2. 我们喜爱的新应用

两者都有水平滚动并且相互独立.

Both have horizontal scroll and independent to each other.

我的问题是我应该使用以下两个选项来实现这一点的可能方式是什么.请提供任何参考样本(如果有):

My question is what is the possible way i should use to implement this from below two option. Please provide me any reference sample if available:

1. 我可以使用单个 UICollectionView 并具有不同的部分(动态)来实现相同的行为吗?但是不同部分的滚动应该是独立的.因为第 1 部分可能有不同数量的项目(行)，而第 2 部分可能有不同数量的项目(行)
2. 我是否必须以编程方式获取多个 collectionview然后插入uiscrollview(垂直滚动视图).abd 然后定义水平滚动并通过标记 collectionview 在单元格中添加项目.

1. Can i achieve the same behaviour withe single UICollectionView and having different section (dynamic). But the scroll for different section should be independent. Because it may possible that section 1 may have different number of items(rows) and section 2 may have different number of items (rows)
2. Do i have to take multiple collectionview programmaticallyand insert then in the uiscrollview (vertical scrollview).abd then define the horizontal scroll and add the items in the cell by taging the collectionview.

我目前已经通过以下代码完成了带有水平滚动的collectionview:

I had done the collectionview with the horizontal scrolling by below code at present :

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
    _collectionView=[[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
    [_collectionView setDataSource:self];
    [_collectionView setDelegate:self];

    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
    [_collectionView setBackgroundColor:[UIColor redColor]];

    [self.view addSubview:_collectionView];

    // Do any additional setup after loading the view, typically from a nib.
}

#pragma mark Collection View Methods

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 15;
}

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    cell.backgroundColor=[UIColor greenColor];
    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(50, 50);
}

请帮忙.

推荐答案

你想做的事情并不难.我已经创建了您正在查看的原型.这就是您的 storyboard 的视图控制器 及其文档大纲的样子:

What you are trying to do is not that difficult. I have created a prototype of what you are looking at. This is how your storyboard's view controller and its document outline look like:

这是每个组件的代码

class TableViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

@IBOutlet weak var tableView: UITableView!

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func numberOfSections(in tableView: UITableView) -> Int {
    return 5
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 1
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "tableCell", for: indexPath) as! MyTableViewCell

    return cell
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 160
}

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return (section%2 == 0) ? "Games we love" : "Apps we love"
}
}

MyTableViewCell

class MyTableViewCell: UITableViewCell, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

@IBOutlet weak var collectionView: UICollectionView!

let imageNames = ["candy_crush", "cut_the_ropes", "game_1", "little_pet_shop", "zuba"]
let gameNames  = ["Candy Crush", "Cut the Ropes", "Arbitrary Game 1", "Littlest Pet Shop", "Zuba"]

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // Configure the view for the selected state
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return imageNames.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionCell", for: indexPath) as! MyCollectionViewCell
    cell.imageView.image  = UIImage.init(named: imageNames[indexPath.row])
    cell.titleLabel.text  = gameNames[indexPath.row]
    cell.detailLabel.text = "Games"

    return cell
}
}

我的CollectionViewCell

class MyCollectionViewCell: UICollectionViewCell {

@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var detailLabel: UILabel!
}

这是模拟器上的样子

这篇关于带有多个部分的水平滚动的collectionview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！