miyazaki-dev

【Swift】tableview cell ページ遷移

Swift

tableviewで0-50で数字のセルを作成してタップされた数字を次のページに表示するというサンプルを作成しました。

今回作成したサンプルは、こちらになります。

tableview cellのページ遷移

viewControllerにナビゲーションバーを設定

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
        
    // rootViewにしたいViewControllerのインスタンスの生成
    let viewController: ViewController = ViewController()
      
    // ナビゲーションコントローラの生成
    let myNavController: UINavigationController = UINavigationController(rootViewController: viewController)
        
    // rootViewの設定
    self.window?.rootViewController = myNavController
        
    // NavigationControllerを表示
    self.window?.makeKeyAndVisible()
        
        
    return true
  }

これでデフォルトのviewcontrollerにナビゲーションバーがついたかと思います。 次にviewcontrollerにtableviewを作成。

tableviewを表示すviewcontrollerを作成

こちらは普通にtableviewを作成し、ナビゲーションコントローラをセルに与えます。

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
  var sampleTableView: UITableView!
       
  override func viewDidLoad() {
    super.viewDidLoad()
           
    // tableviewを作成
    self.sampleTableView = UITableView()
    self.sampleTableView.frame = CGRect(
      x: 0,
      y: 0,
      width: self.view.frame.width,
      height: self.view.frame.height
    )
           
    // 設定するカスタムセルを指定。
    // 今回はSampleCustomCellというクラスを参照させる。
    self.sampleTableView.register(
      SampleCustomCell.self,
      forCellReuseIdentifier: "SampleCustomCell"
    )
    
    self.sampleTableView.dataSource = self
    self.sampleTableView.delegate = self
    self.view.addSubview(self.sampleTableView)
  }
  
  // とりあえず、データ数を50に。
  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 50
  }
       
  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    // セルのインスタンスの作成
    let cell = tableView.dequeueReusableCell(
      withIdentifier: "SampleCustomCell",
      for: indexPath as IndexPath
    ) as! SampleCustomCell
   
    // cellオブジェクトのプロパティのsampleLabelに値をセット。
    cell.sampleLabel.text = String(indexPath.row)
    // ナビゲーションコントローラをcellに与えてあげる。
    cell.navi = self.navigationController
    return cell
  }
       
  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
  }
}

カスタムセルの設定

上記のviewcontrollerで設定するカスタムセルを以下のようにします。

class SampleCustomCell: UITableViewCell {

  var sampleLabel: UILabel!
  var navi: UINavigationController!

  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  // 引数のないコンストラクタみたいなもの。
  // インスタンスが生成されたときに動く関数
  override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    // とりあえず、labelを作成してcontentViewにadd
    self.sampleLabel = UILabel()
    self.sampleLabel.frame = CGRect(
      x: 10,
      y: 0,
      width: self.contentView.frame.width,
      height: self.contentView.frame.height
    )
    self.contentView.addSubview(self.sampleLabel)
  }
    
  // このセルをタップした後に動く関数
  // 次のページに移動する
  override func touchesEnded(_ touches: Set, with event: UIEvent?) {
    let touchedViewController = TouchedViewController()
    // このセルの値を次のページに渡す。
    touchedViewController.touchedNumber = self.sampleLabel.text
    self.navi.pushViewController(touchedViewController, animated: true)
  }
}

タッチされた後のViewController

こちらは普通のviewcontrollerとなります。

ただ、touchedNumberLabelは、前のページから与えられたtextを表示するためのUILabelとなります。

class TouchedViewController: UIViewController{

  var touchedNumberLabel:UILabel!
  var touchedNumber:String!
    
  override func viewDidLoad() {
    super.viewDidLoad()
        
    self.view.backgroundColor = UIColor.white
        
    // 適当な位置にラベルを設置
    self.touchedNumberLabel = UILabel()
    self.touchedNumberLabel.frame = CGRect(
      x: 50,
      y: 100,
      width: self.view.frame.width,
      height: self.view.frame.height / 2
    )

    self.touchedNumberLabel.font = UIFont.systemFont(ofSize: 200)
    // タッチされた値をtouchedNumberLabelに設定
    self.touchedNumberLabel.text = self.touchedNumber
    self.view.addSubview(self.touchedNumberLabel)  
  }
    
  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
  }
}