為分組表視圖中的每個部分添加陰影

Question

如圖所示，我想為我的表格視圖部分添加陰影。 就像表格視圖有 4 個部分一樣，表格視圖中會有 4 個陰影視圖。

func numberOfSections(in tableView: UITableView) -> Int { return 3 }

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 3
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    switch processIndex {
        return cell
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return  44
}

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        return UIView
}

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 40
}

Answer 1

有一種更簡單的方法可以顯示每個部分的陰影。

1. 將表格視圖的背景顏色設置為UIColor.clear
2. 將表格視圖樣式設置為分組（或者對於 iOS 13+，您甚至可以選擇Inset Grouped樣式，這也會為每個部分添加角）
3. 為整個表格視圖添加陰影。 這將給每個部分投下陰影

給表格視圖添加陰影：

tableView.layer.masksToBounds = false
tableView.layer.shadowColor = UIColor.black.withAlphaComponent(0.4).cgColor // any value you want
tableView.layer.shadowOpacity = 1 // any value you want
tableView.layer.shadowRadius = 100 // any value you want
tableView.layer.shadowOffset = .init(width: 0, height: 10) // any value you want

Answer 2

我試過自定義[String : UIView] 。 這將適用於最少的行數。 如果您的單元的設計是靜態的，這將滿足您的設計。 如果要訪問UITableViewCell中的某些屬性，則必須使用子視圖。

• 只有一排的多個部分。 相應行內只有一個視圖 ( lookView )。
• 我們必須根據需求以編程方式創建 n 個UIView 。
• UITapGesture到TableView 。 TableView格式為Grouped ， Separator為.none 。

以下代碼將給出如下輸出：

//Global Variable:


@IBOutlet weak var tblVw: UITableView!

var rowItemsDict = [String : [String]]()
var rowHeight = [String : CGFloat]()
var eachRowSubViews = [String : UIView]()


override func viewDidAppear(_ animated: Bool) {

    rowItemsDict = ["0" : ["welcome", "hello", "wow", "Good", "Bad"], "1" : ["Asia", "Europe", "America"], "2" : ["Mcdonald", "Pizza", "Fries"]]

    for i in 0..<rowItemsDict.count
    {
        let numOfSubItemsArr : [String] = rowItemsDict[String(i)]!
        let eachRowHeight : CGFloat = getShadowViewHeight(defaultHeight: 44.0, numberOfItems: numOfSubItemsArr.count)

        var subArrView = UIView()

        for j in 0..<numOfSubItemsArr.count
        {
            let sublabel = UILabel(frame: CGRect(x: 0, y: 0, width: tblVw.frame.size.width - 42, height: 39))
            sublabel.text = numOfSubItemsArr[j]
            sublabel.isUserInteractionEnabled = true
            sublabel.textAlignment = .right
            sublabel.textColor = UIColor.red
            let subView = UIView(frame: CGRect(x: 0, y: CGFloat((j * 40)), width: tblVw.frame.size.width, height: 39))
            subView.addSubview(sublabel)
            subView.backgroundColor = UIColor.clear
            subView.tag = ((i+1) * 100) + j

            if j == (numOfSubItemsArr.count - 1)
            {

            }
            else
            {
                let LinesubView = UIView(frame: CGRect(x: 0, y: 38, width: tblVw.frame.size.width - 8, height: 1))
                LinesubView.backgroundColor = UIColor.lightGray.withAlphaComponent(0.2)
                subView.addSubview(LinesubView)
            }

            subView.isUserInteractionEnabled = true
            subArrView.addSubview(subView)
            subArrView.isUserInteractionEnabled = true
        }

        eachRowSubViews[String(i)] = subArrView
        rowHeight[String(i)] = eachRowHeight
    }

    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(tapEachView))
    tblVw.addGestureRecognizer(tapGesture)
    tblVw.reloadData()
}


// TABLEVIEW DELEGATES
func numberOfSections(in tableView: UITableView) -> Int {


    return rowItemsDict.count
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return 1
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! SampleTableViewCell

    print("\n\ncellFor")
    cell.backgroundColor = UIColor(red: 240/255, green: 240/255, blue: 240/255, alpha: 0.0)
    cell.separatorVw.backgroundColor = UIColor(red: 250/255, green: 250/255, blue: 250/255, alpha: 0.0)
    tableView.clipsToBounds = true
    let gettingVw : UIView = eachRowSubViews[String(indexPath.section)]!
    cell.lookVw.addSubview(gettingVw)
    cell.lookVw.layer.cornerRadius = 10
    cell.separatorVw.backgroundColor = UIColor.clear

    cell.selectionStyle = .none
    return cell
}


func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {

    let cell = cell as! SampleTableViewCell

    cell.lookVw.dropOnlyOneShadowLeft(getSize: CGSize.zero)
    cell.lookVw.backgroundColor = UIColor.white


}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

    return (rowHeight[String(indexPath.section)]! )

}


//ROW HEIGHT CALCULATION
func getShadowViewHeight(defaultHeight: CGFloat, numberOfItems: Int) -> CGFloat
{
    let requiredHeight = CGFloat(Int(defaultHeight) * numberOfItems)

    return requiredHeight
}

//TAP GESTURE ACTION
@objc func tapEachView(sender: UITapGestureRecognizer)
{
    let touchPoint = sender.location(in: tblVw)
    let index = tblVw.indexPathForRow(at: touchPoint)

    if (index == nil)
    {
            print("long press on table view but not on a row");
    }
    else
    {
        let cell = tblVw.cellForRow(at: index!) as! SampleTableViewCell
        let pointInCell = cell.convert(touchPoint, from: tblVw)

        let innerSubVw = cell.lookVw.subviews
        print("pointInCellpointInCell)  ", pointInCell)
        for sVw in innerSubVw[0].subviews
        {
            let pointY = pointInCell.y - 5
            let comparePoint = sVw.frame.origin.y

            if pointY >= comparePoint && pointY <= comparePoint + 39
            {
                print("sVwsVwsVwsVwsVw    ", sVw.tag)

                //DO YOUR ACTION IN RESPECTIVE VIEW CLICK
                return
            }

        }

    }
}


extension UIView {
    func dropOnlyOneShadowLeft(getSize: CGSize) {
        self.layer.shadowColor = UIColor.lightGray.cgColor
        self.layer.shadowOpacity = 0.6
        self.layer.shadowOffset = getSize
        self.layer.shadowRadius = 3
    }
}

Answer 3

這將只為部分設置陰影，而不是頁眉/頁腳：

tableView.backgroundColor = .clear
tableView.subviews.forEach { view in
    view.layer.shadowColor = UIColor.darkGray.cgColor
    view.layer.shadowOpacity = 0.4
    view.layer.shadowOffset = .zero
    view.layer.shadowRadius = 3
}