UITableview and UICollectionView inside UIScrollView - Swift - swift

Question

Can Anyone Suggest me an idea to create a UI like the below screenshot
https://drive.google.com/open?id=0B2JNfyRRcL0Gb2huQ3ZTV2N6Q1E
I used
ScrollView
imageView
Lable
TableView
Lable
Button
UiView
CollectionView
ImageView
Button
labels…
with this when I’m trying to scroll to down, only the UIScrollView is Scrolling not the UICollectionView.
I Also try to give the UiCollectionView height to its content height and made the scrollview height to fit that. Once i did this the collection view’s datasource and delegate methods are not calling when i use to scroll (means the first time when viewDidLoad - it loads the collection view cell) with the below below scene example the datasource and delegate methods are called only for the first two cells, since it is visible on the screen without scrolling whereas the others are not.
Im thinking to try it with tableview but i don’t know how…. because
the first content which is the banner image may not be in all categories (it may be in JSon response or may not be)
The Explore more label is static lable
The third thing “ Clothing, Bags belts and Wallets “ are the tableviewView Cells (cell count may be differ based on categories)
the forth is a Uiview which has the filter and sorting buttons and its a static one
the last is a collectionView cells (cell count may be differ based on categories)
So, Please Suggest me an Idea or an example or a sample code are highly welcomed….. thanks in Advance….!

Answer 1

Finally I found an idea,
I kept all within a TableView,
The first two (the banner image and the explore lable are the first cell of my tableview)
The second PrototypeCell is the category Titles(where the cloths, bags and belts)
The Third Prototype cell is a what with the filter and sort buttons and I used this cell as section Header View
And finally the last prototype cell is a one which have the collection View and its cell (I just design it and add it into a cell)
And sample code is as follows,
My CollectionViewCell
import UIKit
class CollectionViewCell: UICollectionViewCell {
#IBOutlet weak var imgFav: UIImageView!
#IBOutlet weak var title: UILabel!
#IBOutlet weak var pinImage: UIImageView!
#IBOutlet weak var priceLbl: UILabel!
#IBOutlet var splPriceLbl: UILabel!
#IBOutlet weak var addToFav: UIButton!
override func awakeFromNib()
{
super.awakeFromNib()
self.contentView.autoresizingMask = [UIViewAutoresizing.flexibleRightMargin, UIViewAutoresizing.flexibleLeftMargin, UIViewAutoresizing.flexibleBottomMargin, UIViewAutoresizing.flexibleTopMargin]
self.contentView.translatesAutoresizingMaskIntoConstraints = true
}
}
My TableViewCell
import UIKit
class SubCategoryTableViewCell: UITableViewCell {
#IBOutlet weak var productListCollectVw: UICollectionView!
#IBOutlet weak var btnSort: UIButton!
#IBOutlet weak var btnFilter: UIButton!
#IBOutlet weak var subCategryTitle: UILabel!
#IBOutlet weak var lblExplore: UILabel!
#IBOutlet weak var imgBanner: UIImageView!
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
}
}
And Finally My ViewController
#IBOutlet weak var mainTableView: UITableView!
var subCategoryAry2 = NSMutableArray()
var imageUrl:URL!
var imageUrlStr:String = ""
var productListAry:NSMutableArray = []
func numberOfSections(in tableView: UITableView) -> Int
{
return 2
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
{
if section == 0
{
return subCategoryAry2.count + 1
}
else
{
return 1
}
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?
{
if section == 0
{
return nil
}
else
{
let CellIdentifier: String = "section2Cell"
let headerView: SubCategoryTableViewCell? = tableView.dequeueReusableCell(withIdentifier: CellIdentifier) as! SubCategoryTableViewCell?
headerView?.btnFilter.addTarget(self, action: #selector(self.filterAction(_:)), for: .touchUpInside)
headerView?.btnSort.addTarget(self, action: #selector(self.sortAction(_:)), for: .touchUpInside)
if headerView == nil
{
print("No cells with matching CellIdentifier loaded from your storyboard")
}
return headerView!
}
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
{
if indexPath.section == 0
{
if indexPath.row == 0
{
let cell:SubCategoryTableViewCell = self.mainTableView.dequeueReusableCell(withIdentifier: "bannerCell") as! SubCategoryTableViewCell!
if self.imageUrlStr == "no_image.png" || self.imageUrlStr == ""
{
cell.imgBanner.isHidden = true
cell.imgBanner.frame.size.height = 0
cell.lblExplore.frame.origin.y = 0
}
else
{
cell.imgBanner.isHidden = false
let imageUrl1 = "\(self.imageUrl!)"
let trimmedUrl = imageUrl1.trimmingCharacters(in: CharacterSet(charactersIn: "")).replacingOccurrences(of: " ", with: "%20") as String
cell.imgBanner.sd_setImage(with: URL(string: trimmedUrl), completed: { (image, error, imageCacheType, imageUrl) in
if image != nil
{
}
else
{
cell.imgBanner.isHidden = true
cell.imgBanner.frame.size.height = 0
cell.lblExplore.frame.origin.y = 0
}
})
}
return cell
}
else //if indexPath.row == 1
{
let cell:SubCategoryTableViewCell = self.mainTableView.dequeueReusableCell(withIdentifier: "listCell") as! SubCategoryTableViewCell!
cell.subCategryTitle.text = (subCategoryAry2.object(at: (indexPath as NSIndexPath).row - 1) as AnyObject).value(forKey: "name") as? String
return cell
}
}
else
{
let cell:SubCategoryTableViewCell = (self.mainTableView.dequeueReusableCell(withIdentifier: "collectionCell") as? SubCategoryTableViewCell!)!
// Load Your CollectionView
cell.productListCollectVw.dataSource = self
cell.productListCollectVw.delegate = self
cell.productListCollectVw.reloadData()
return cell
}
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
{
if indexPath.section == 0
{
if indexPath.row != 0
{
//***************** Do whatever you need to do if user did selected the row but remain the indexpath.row or indexpath.row - 1 *****************//
subCategoryID = ((subCategoryAry2.object(at: (indexPath as NSIndexPath).row - 1) as! NSObject).value(forKey: "category_id") as? String)! as NSString
print("tableView - didSelectRowAt \(indexPath.row)")
}
}
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
{
if indexPath.section == 0
{
var height = CGFloat()
if indexPath.row == 0
{
if self.imageUrlStr == "no_image.png" || self.imageUrlStr == ""
{
//***************** Reduce banner image height if it is nil *****************//
height = 38
}
else
{
height = 175 + 38
}
}
else
{
height = 44
}
return height
}
else
{
let height = (255 * self.productListAry.count/2) + (2 * (self.productListAry.count) + 4)
//***************** increase height as per your need *****************//
return CGFloat(height)
}
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat
{
if section == 0
{
return 0
}
else
{
return 44
}
}
func collectionView(_ collectionView: UICollectionView,
numberOfItemsInSection section: Int) -> Int
{
return self.productListAry.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
{
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: self.reuseIdentifier, for: indexPath) as! CollectionViewCell
cell.title.text = (self.productListAry.object(at: (indexPath as NSIndexPath).row) as! NSDictionary).value(forKey: "name") as? String
//***************** Load your cell as per your need *****************//
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
{
print("didSelectItemAt \(indexPath.row)")
}
My Storyboard will look like the screenshot added
https://drive.google.com/file/d/0B2JNfyRRcL0GYjJsckpyaGpoMkE/view?usp=sharing