2
votes

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

  1. the first content which is the banner image may not be in all categories (it may be in JSon response or may not be)
  2. The Explore more label is static lable
  3. The third thing “ Clothing, Bags belts and Wallets “ are the tableviewView Cells (cell count may be differ based on categories)
  4. the forth is a Uiview which has the filter and sorting buttons and its a static one
  5. 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….!

1
You do not need to use scroll view, just use table view and inside table view, you can use two types of cells, one for list line cloths and so on and use another type of cell which will contain collection view inside that cell, ohh and for image on header you have several options among which view for section would be best. - dip
Thanks for your Suggestion.. Could you please share some sample to contain a uicollectionview inside a tableviewcell - Abirami Bala
ashfurrow.com/blog/… Here is a link Go exactly on same way. - dip
This is an Objective C Example, but its ok let me search for some other links... thanks - Abirami Bala
@dip in my case i should have the collectionview which has to be scroll vertically, So that how can i set the height for row at indexpath for tableview - Abirami Bala

1 Answers

4
votes

Finally I found an idea,

I kept all within a TableView,

  1. The first two (the banner image and the explore lable are the first cell of my tableview)

  2. The second PrototypeCell is the category Titles(where the cloths, bags and belts)

  3. The Third Prototype cell is a what with the filter and sort buttons and I used this cell as section Header View

  4. 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