2017-06-12 40 views
1

任何人都可以推薦我一個想法,以創建像下面的截圖的UITableView和UICollectionView裏面的UIScrollView - 斯威夫特

https://drive.google.com/open?id=0B2JNfyRRcL0Gb2huQ3ZTV2N6Q1E

我用

滾動型

一個UI
  • ImageView的
  • 標籤
  • TableView中
    • 拉布勒
    • 按鈕
  • 的UIView
  • 的CollectionView
    • ImageView的
    • 按鈕
    • 標籤...

與此當我試圖向下滾動,只有UIScrollView滾動不是UICollectionView。 我也嘗試將UiCollectionView高度設置爲其內容高度,並使scrollview高度適合該高度。一旦我這樣做了集合視圖的數據源和委託方法不會調用當我用於滾動(意味着第一次當viewDidLoad - 它加載集合視圖單元格)與下面的場景示例數據源和委託方法被調用只爲前兩個單元格,因爲它在屏幕上可見而不滾動,而其他單元格不是。

我想用tableview嘗試它,但我不知道如何...。因爲

  1. 第一內容是標題圖像可能無法在所有類別中(也可能是JSON響應或可能不會)
  2. 將探索更多的標籤是靜態的拉布勒
  3. 的第三件事「衣服腰帶和錢包「是tableviewView單元格(單元格數可能因類別而異)
  4. 第四種是Uiview,它具有濾鏡和排序按鈕及其靜態的一個
  5. 最後是一個collectionView單元格(細胞數量可能因類別而異)

所以,請建議我一個想法或一個示例或示例代碼非常受歡迎...... ..感謝提前...。

+0

你並不需要使用滾動視圖,只需使用表格視圖和內部表視圖,可以使用兩種類型的單元格,一種用於列表線布等,並使用另一種類型的單元格,該單元格將包含該單元格內的集合視圖,而對於標題上的圖像,您有幾個選項,其中部分視圖最適合。 – dip

+0

感謝您的建議..您可以請分享一些示例以包含tableviewcell內的uicollectionview –

+0

https://ashfurrow.com/blog/putting-a-uicollectionview-in-a-uitableviewcell/這裏是一個鏈接去完全同樣的方式。 – dip

回答

1

最後,我發現了一個想法,

我一直都在一個TableView中,

  1. 前兩個(橫幅圖像和探索拉布勒是我的tableview的第一個單元格)

  2. 第二個PrototypeCell是類別標題(其中布,包和腰帶)

  3. 第三個原型單元格是與過濾和排序按鈕,我用這個細胞作爲節頭查看

  4. 最後的最後一個原型細胞是一個具有收集View及其細胞(我只是設計它,並把它添加到一個細胞)

和示例代碼如下所示,

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

} 

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

} 

,最後我的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)") 
} 

我的故事板將類似於截圖添加 https://drive.google.com/file/d/0B2JNfyRRcL0GYjJsckpyaGpoMkE/view?usp=sharing