如何在 UITableView 中创建单行视图分隔符

Posted 2023-03-12

【中文标题】如何在 UITableView 中创建单行视图分隔符

【英文标题】：How to create a single line view separator in UITableView

【发布时间】：2018-03-21 03:46:43

【问题描述】：

如何在UITableView 中创建单行视图分隔符，就像 android 的 NavigationDrawer：

我知道在 Android 中这很容易，但我找不到 ios 的参考，它是如何在 iOS 上调用的，我只想在我的菜单视图中添加一个单行分隔符，以及我所有的视频和教程can find for iOS 展示了如何添加可扩展菜单，这不是我想要的，我只想要一行分隔两组字符串数组。在 iOS 上可以吗，我在哪里可以找到教学教程？

到目前为止我的代码：

import UIKit

class MenuViewController: UIViewController, UITableViewDelegate, UITableViewDataSource 

    //Outlets
    @IBOutlet weak var tableView: UITableView!
    var menuNameArr = [String]()
    var iconImage = [UIImage]()

    override func viewDidLoad() 
        super.viewDidLoad()
        tableView.alwaysBounceVertical = false;
        tableView.separatorStyle = .none

        menuNameArr = ["Meu Perfil", "Meus Cupons", "Extrato de pontos", "Configurações", "Termos de uso", "Entre em Contato", "Avaliar aplicativo", "Sair"]
        iconImage = [UIImage(named: "user")!,UIImage(named: "cupons")!, UIImage(named: "extrato")!, UIImage(named: "config")!, UIImage(named: "termos")!, UIImage(named: "contato")!, UIImage(named: "avaliar")!, UIImage(named: "sair")!]
        self.revealViewController().rearViewRevealWidth = self.view.frame.size.width - 60
    

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
        return menuNameArr.count
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
        let cell = tableView.dequeueReusableCell(withIdentifier: "MenuTableViewCell") as! MenuTableViewCell

        cell.imgIcon.image = iconImage[indexPath.row]
        cell.lblMenuName.text! = menuNameArr[indexPath.row]
        return cell
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) 

    

从“Configurações”到“Sair”我希望数组的那一部分成为菜单的第二部分

【问题讨论】：

只需将线条的绘图添加到该单元格的绘图中即可。

***.com/questions/20283505/… 和许多其他人的副本

Hiding UITableViewCell separator for individual cells的可能重复

【参考方案1】：

试试这个

    if indexPath.row == 3
        let separator = UILabel(frame: CGRect(x: 15, y: cell.frame.size.height - 1, width: cell.frame.size.width, height: 1))
        separator.backgroundColor = UIColor.red
        cell.contentView.addSubview(separator)
    

【参考方案2】：

这样做有 3 种类型，您可以根据自己的要求选择其中任何一种，并且对您来说最简单：

在单元格底部为 indexpath.row = 3 创建自定义分隔符视图

cell.imgIcon.image = iconImage[indexPath.row]        
cell.lblMenuName.text! = menuNameArr[indexPath.row]

if indexPath.row == 3 
    let separatorView = UIView.init(frame: CGRect(x: 15, y: cell.frame.size.height - 1, width: cell.frame.size.width - 15, height: 1))
    separatorView.backgroundColor = .lightGray
    cell.contentView.addSubview(separatorView)        
            
return cell

可以在情节提要的单元格底部以清晰的颜色获取高度为“1px”的 UIView，并在代码中为 indexpath.row = 3 分配颜色。但是在表格单元格中创建一个额外的视图并不是一个好主意。

cell.imgIcon.image = iconImage[indexPath.row]        
cell.lblMenuName.text! = menuNameArr[indexPath.row]

if indexPath.row == 3 
    cell.sepatatorView.backgroundColor = .lightGray
 else 
    cell.sepatatorView.backgroundColor = .clear
            
return cell

您可以将您的名称和图标数组划分为 2 个子数组，您可以使用 2 个部分，部分高度为“1px”，颜色为浅灰色。

注意：使用这种方法，您甚至可以自定义分隔符，而不仅仅是灰线，您可以在那里添加自定义视图/标题

let menuNameArr = [
        ["Meu Perfil", "Meus Cupons", "Extrato de pontos"],
        ["Configurações", "Termos de uso", "Entre em Contato", "Avaliar aplicativo", "Sair"]
    ]
let iconImage = [
        [UIImage(named: "user")!,UIImage(named: "cupons")!, UIImage(named: "extrato")!],
        [ UIImage(named: "config")!, UIImage(named: "termos")!, UIImage(named: "contato")!, UIImage(named: "avaliar")!, UIImage(named: "sair")!]
    ]

相应地更新表格视图的方法。

func numberOfSections(in tableView: UITableView) -> Int 
    return 2


func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat 
    return 1.0


func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? 
    let separatorView = UIView.init(frame: CGRect(x: 15, y: 0, width: tableView.frame.size.width - 15, height: 1))
    separatorView.backgroundColor = .lightGray
    return separatorView


func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
    return menuNameArr[section].count


func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
    let cell = tableView.dequeueReusableCell(withIdentifier: "MenuTableViewCell") as! MenuTableViewCell

    cell.imgIcon.image = iconImage[indexPath.section][indexPath.row]
    cell.lblMenuName.text! = menuNameArr[indexPath.section][indexPath.row]
    return cell

【讨论】：

太棒了，感谢您的时间和解释，它真的帮助了我！

【参考方案3】：

为特定的indexPath 放置条件，您已在其中显示它，否则将其隐藏。简单

自定义分隔线，将此代码放在作为 UITableViewCell 子类的自定义单元格中（或在非自定义单元格的 CellForRow 或 WillDisplay TableViewDelegates 中）：

let separatorLine = UIImageView.init(frame: CGRect(x: 8, y: 64, width: cell.frame.width - 16, height: 2))

separatorLine.backgroundColor = .blue
addSubview(separatorLine)

【讨论】：

谢谢，@Mr.Javed 但我认为您需要用 else 条件简要解释一下，因为如果他不使用 false 条件，这可能适用于所有 indexpath。

欢迎@KiranSarvaiya 你得到了我的答案（需要投票）