如何使用单个自定义单元格用两个数组填充tableview?

时间:2019-06-21 06:57:04

标签: ios swift uitableview custom-cell

我想使用单个单元格在tableview中显示两个数组值。 假设我有两个数组,并且都包含相同的元素数。

FirstArray和SecondArray。表格视图单元格 Lbl1 Lbl2 中有两个标签,现在 Lbl1 应该用 FirstArray Lbl2填充应该用 SecondArray 填充。我知道我们不能将两个数组用于uitableview数据源。我不知道该怎么做。

请帮助我。

我还尝试将多个自定义tableview单元格与section一起使用。但没有得到理想的结果。

我有两个数组-

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
    integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
    .form-control-borderless {
      border: none;
    }

    .form-control-borderless:hover,
    .form-control-borderless:active,
    .form-control-borderless:focus {
      border: none;
      outline: none;
      box-shadow: none;
    }
    .centre{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%)
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
    <a class="navbar-brand" href="#"><img class="img-responsive" src="/testing/users/images/logo.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav  ml-auto">
        <li class="nav-item"><a href="/testing/" class="nav-link"><span class="fa fa-fw fa-home"></span> Home</a></li>
        <li class="nav-item"><a href="/testing/users/account.php" class="nav-link"><span
              class="fa fa-fw fa-user"></span> admin</a></li>
        <li class="nav-item">
          <a href="/testing/users/messages.php" class="nav-link">
            <span class="fa fa-envelope"></span><i class="badge"></i> Message</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown_main" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false"><span class="fa fa-fw fa-cogs"></span> <span class="caret"></span>Settings</a>
          <div class="dropdown-menu dropdown-info" aria-labelledby="dropdown_main">
            <a class="dropdown-item" href="/testing/"><span class="fa fa-fw fa-home"></span> Home</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/testing/users/account.php"><span class="fa fa-fw fa-user"></span>
              Account</a>
            <a class="dropdown-item" href="/testing/users/admin.php"><span class="fa fa-fw fa-cogs"></span> Admin
              Dashboard</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=users"><span class="fa fa-fw fa-user"></span>
              User Management</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=permissions"><span
                class="fa fa-fw fa-lock"></span> Permissions Management</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=pages"><span class="fa fa-fw fa-wrench"></span>
              Page Management</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=messages"><span
                class="fa fa-fw fa-envelope"></span> Messages Manager</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=logs"><span class="fa fa-fw fa-search"></span>
              System Logs</a>
            <a class="dropdown-item" href="/testing/users/logout.php"><span class="fa fa-fw fa-sign-out"></span>
              Logout</a>
          </div>
        </li>
        <li class="nav-item dropdown menu">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <span class="fa fa-fw fa-lock"></span> menu
          </a>
          <div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
            <a class="dropdown-item mx-auto" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Another action</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container" style="height:calc(100vh - (56px))">
    <br>
    <div class="row justify-content-center">
      <div class="col-12 col-md-10 col-lg-8">
        <form class="card card-sm">
          <div class="card-body row no-gutters align-items-center">
            <div class="col-auto">
              <i class="fas fa-search h4 text-body"></i>
            </div>

            <div class="col">
              <input class="form-control form-control-lg form-control-borderless" type="search"
                placeholder="Search topics or keywords">
            </div>

            <div class="col-auto">
              <button class="btn btn-lg btn-success" type="submit">Search</button>
            </div>
            <!--end of col-->
          </div>
        </form>
      </div>
      <!--end of col-->
    </div>
    <div class="col-sm-6 centre">
      <div class="card bg-light ">
        <div class="card-body text-center">
          <p class="card-text">Some text inside the card</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

在表视图中numberOfRowsInSection:

let datalist1 = ["firstCell1" , "firstCell2" , "firstCell3" , "firstCell4"]
    let datalist2 = ["secondCell1"  ,"secondCell2" , "secondCell3" ,"secondCell4"]

在cellForRowAt中:

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

        if section == 0
        {
            return datalist1.count
        }
        else  {
            return datalist2.count
        }
    }

实际输出:

FirstCell1 FirstCell2 FirstCell3 FirstCell4 SecondCell1 SecondCell2 SecondCell3 SecondCell4

预期输出:

FirstCell1 SecondCell1 FirstCell2 SecondCell2 FirstCell3 SecondCell3 FirstCell4 SecondCell4

5 个答案:

答案 0 :(得分:1)

您好,您无需添加两个section,就像下面这样。 这是您的数组。

let datalist1 = ["firstCell1" , "firstCell2" , "firstCell3" , "firstCell4"]
let datalist2 = ["secondCell1"  ,"secondCell2" , "secondCell3" ,"secondCell4"]

行数

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


    return datalist1.coun
}

行单元格

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

    let cell = tableView.dequeueReusableCell(withIdentifier: "cell1", for: indexPath) as? FirstCell
    cell.Lbl1.text = datalist1[indexPath.row]
    cell.Lbl2.text = datalist2[indexPath.row]
    return cell!
}

答案 1 :(得分:1)

根据您提供的说明和代码,要求不明确。 但是,根据上述详细信息,可能有两种情况:

案例1:

Cell-1:FirstCell1

Cell-2:SecondCell1

Cell-3:FirstCell2

Cell-4:SecondCell2

然后您可以执行以下操作:

在表视图中numberOfRowsInSection:

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return (datalist1.count + datalist2.count)
}

在cellForRowAt中:

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

    if indexPath.row % 2 == 0 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell1", for: indexPath) as? FirstCell
        cell?.initData(name: datalist1[indexPath.row])
        return cell!
    }
    else {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell2", for: indexPath) as? SecondCell
        cell?.initData(lbl: datalist2[indexPath.row])
        return cell!
    }

}

情况2:

Cell-1:FirstCell1 SecondCell1

Cell-2:FirstCell2 SecondCell2

Cell-3:FirstCell3 SecondCell3

Cell-4:FirstCell4 SecondCell4

然后您可以执行以下操作:

在表视图中numberOfRowsInSection:

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

在cellForRowAt中:

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

        let cell = tableView.dequeueReusableCell(withIdentifier: "cell1", for: indexPath) as? FirstCell
        //Single custom cell can implement both the labels
        cell?.initData(name: datalist1[indexPath.row],lbl: datalist2[indexPath.row])
        return cell!
    }

}

答案 2 :(得分:0)

您必须声明为

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

        if indexPath.section %2 == 0 {
            let cell1 = tableView.dequeueReusableCell(withIdentifier: "cell1", for: indexPath) as? FirstCell
            cell1.lbl1.text = datalist1[indexPath.row]
            return cell1!
        }
        else {
            let cell2 = tableView.dequeueReusableCell(withIdentifier: "cell2", for: indexPath) as? SecondCell            
            cell2.lbl2.text = datalist2[indexPath.row]
            return cell2!
        }

    }

答案 3 :(得分:0)

最好的方法是使用模型。您必须声明数据模型,例如

struct MyModel {
   var firstValue: String?
   var secondValue: String?
}

然后,您必须将两个数组转换为MyModel对象的单个数组

var myData = Array<MyModel>()

然后通过使用for循环,您可以遍历一个数组并填充myData数组。

for (index, _) in datalist1 {
   let object = MyModel()
   object.firstValue = datalist1[index]
   object.firstValue = datalist2[index]
   myData.append(object)
}

然后只需实现tableview协议方法,并使用MyModel对象填充自定义单元格即可。

答案 4 :(得分:0)

1。。使用arraydatalist1datalist2创建一个单个zip(_:_:) 用作dataSource的{​​{1}}。

tableView

lazy var dataList = Array(zip(self.datalist1, self.datalist2)) 的类型为dataList

示例:

如果[(String, String)]datalist1

datalist2

然后,let datalist1 = ["firstCell1" , "firstCell2" , "firstCell3" , "firstCell4"] let datalist2 = ["secondCell1" ,"secondCell2" , "secondCell3" ,"secondCell4"] 包含

dataList

2。。您需要一个[("firstCell1", "secondCell1"), ("firstCell2", "secondCell2"), ("firstCell3", "secondCell3"), ("firstCell4", "secondCell4")] 来显示所有数据。无需为此创建2个不同的cell。示例:

UITableViewCells

3。。现在,您的class CustomCell: UITableViewCell { @IBOutlet weak var lbl1: UILabel! @IBOutlet weak var lbl2: UILabel! } 方法看起来像

UITableViewDataSource