As previously explained in my earlier post, we had to make a radio streaming app and for that we had to decide between a tableview or a collectionview. We chose for the later. As it made more sense to make a collectionview for this particular app . As we wanted the user to be able to see the name and image of the given streams.
It had a better look and feel to have a collectioview integrated into our app and specially if you have more then one station so the user has a nice overview of the available streams. So we had to make a class that had the information regarding the stations.
For the streams you need to create a swift file that gives the information such as what streams are available and how the cells should look like when the app opens to that particular view. In order to do this you need to create a separate file. Then name the file to the appropriate name which in our case is the StationsViewController. You need to create a class which is then also named StationsViewController.
The Stationsviewcontrolelr class has properties. A class is able to have stored properties, which can consist out of a constant or a variable.
When creating a class you need to define what kind of class it is and it looks something like this
When creating a class you need to define what kind of class it is and it looks something like this
Class stationsViewController: UICollectionViewController, {
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell= collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as! StationCollectionViewCell
let image = images[indexPath.row]
cell.imageView.image = image
return cell
}
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell= collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as! StationCollectionViewCell
let image = images[indexPath.row]
cell.imageView.image = image
return cell
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
return CGSizeMake(CGRectGetWidth(collectionView.frame)/2 - 20.0, CGRectGetWidth(collectionView.frame)/2 - 20.0)
}
return CGSizeMake(CGRectGetWidth(collectionView.frame)/2 - 20.0, CGRectGetWidth(collectionView.frame)/2 - 20.0)
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 10.0, left: 5.0, bottom: 0.0, right: 5.0)
}
}
return UIEdgeInsets(top: 10.0, left: 5.0, bottom: 0.0, right: 5.0)
}
}
The functions above are used to define how the collection view should handle certain things such as the cell or the layout of the collection view . The cell needs to have ID that can be called to in this case its called “cell” .
The layout is also defined by the function which has the UIcollectionViewLayout which you then determine how big the cell should be and if you want the cells to be next to each other or under each other.
For the layout we opted to use the cells next to each other as we thought that would be something that the client would want.
After having written all the necessary code and are happy with how the layout is it should look something like this
The layout is also defined by the function which has the UIcollectionViewLayout which you then determine how big the cell should be and if you want the cells to be next to each other or under each other.
For the layout we opted to use the cells next to each other as we thought that would be something that the client would want.
After having written all the necessary code and are happy with how the layout is it should look something like this