带有多个部分的水平滚动的集合视图 [英] collectionview with the horizontal scroll with mulitple section

问题描述

我想像这样开发屏幕（目标C）：

此处有部分名称：

1. 我们喜爱的新游戏


2. 我们喜爱的新应用

两者都有水平滚动并且彼此独立。

我的问题是我应该使用的可能方式是什么从下面两个选项实现这一点。如果可以的话，请提供任何参考样本：

1. 我可以用单个 UICollectionView 并有不同的部分（动态）。但是不同部分的滚动应该是独立的。因为第1部分可能有不同数量的项目（行），第2部分可能有不同数量的项目（行）


2. 我是否必须以编程方式获取多个collectionview
   然后插入uiscrollview（垂直scrollview）。
   abd然后定义水平滚动并通过分页收集视图添加单元格中的项目。

我已经完成了集合视图目前水平滚动以下代码：

   - （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]; 
 
 //加载视图后进行任何其他设置，通常是从笔尖。 
} 
 
 #pragma mark集合查看方法
 
  - （NSInteger）collectionView：（UICollectionView *）collectionView numberOfItemsInSection：（NSInteger）section 
 {
返回15; 
} 
 
 //必须从对-dequeueReusableCellWithReuseIdentifier的调用中检索返回的单元格：forIndexPath：
  - （UICollectionViewCell *）collectionView：（UICollectionView *）collectionView cellForItemAtIndexPath： （NSIndexPath *）indexPath 
 {
 UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier：@cellIdentifierforIndexPath：indexPath]; 
 
 cell.backgroundColor = [UIColor greenColor]; 
返回单元格; 
} 
 
  - （CGSize）collectionView：（UICollectionView *）collectionView布局：（UICollectionViewLayout *）collectionViewLayout sizeForItemAtIndexPath：（NSIndexPath *）indexPath 
 {
 return CGSizeMake（ 50,50）; 
} 
  

请帮忙。

解决方案

你要做的并不是那么困难。我已经创建了你所看到的原型。这是你的故事板的视图控制器及其文档大纲如何：

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

In this there are section names :

1. New Games we Love
2. New Apps We Love

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. 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 programmatically and insert then in the uiscrollview (vertical scrollview). abd then define the horizontal scroll and add the items in the cell by taging the 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);
}

Please help.

解决方案

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

Here's the code for each component

TableViewController

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
}
}

MyCollectionViewCell

class MyCollectionViewCell: UICollectionViewCell {

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

This is how it looks like on the simulator

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