collectionview with the horizontal scroll with mulitple section
15,333
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:
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
Author by
ios developer
Updated on July 28, 2022Comments
-
ios developer almost 2 years
I want to develop the screen(objective C) like this :
In this there are section names :
- New Games we Love
- 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:
- 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) - 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.
-
9to5ios almost 6 yearscheck complete objective-c tutorial with Code 9to5ios.com/…
-
nOOb iOS over 3 yearsThis answer is very helpful. But how do I get the correct selected item in didSelectItemAtIndexPath: if a particular collectionViewCell is clicked.
-
Adeel Miraj over 3 years@nOObiOS You may use delegate protocol for that.
-
nOOb iOS over 3 yearsI have different sections in tableview instead of one section and each section has collectionview cells. How do I get tableview section in cellForItemAtIndexPath delegate of collectionView to populate cells depending upon the tableview section.
-
Adeel Miraj over 3 years@nOObiOS you may use the responder chain (nextResponder) for that matter.