【Swift】UITableViewにおける編集ボタンにUIButtonを使う方法。
こんにちは、iPhoneアプリ開発者の中川です。
iPhoneアプリ開発をしていると度々登場するUITableView。
画面を設計していると、ナビゲーションバーが邪魔だと感じることがあると思います。(画面を広く使いたい等)しかし、ナビゲーションバーを使わないとテーブルビューが使いづらくなるから諦めるという方も多いのかもしれません。そもそもこのような事象が起こるのはUINavigationControllerの中には便利なメソッドがデフォルトで実装してあるためです。
ということは、このデフォルトのメソッドを外部で適用してやれば、UINavigationControllerを使わなくて良くなるため、邪魔なナビゲーションバーを外すことができるわけです。今回はUINavigationItemをUIButtonに置き換える例を記します。
サンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
import UIKit class ViewController: UIViewController , UITableViewDelegate, UITableViewDataSource{ // テーブルビュー let myTableView = UITableView() let editButton = UIButton() let items = ["項目1","項目2","項目3","項目4","項目5","項目6","項目7","項目8","項目9","項目10","項目11"] override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. // テーブルビュー貼り付け addTableView() // UIButton貼り付け addEditButton() } /* オリジナルメソッド*/ // tableView貼り付け func addTableView(){ // TableViewの生成する(status barの高さ分ずらして表示). myTableView.frame = CGRectMake(0, 100, self.view.bounds.size.width, self.view.bounds.size.height - 100) // Cell名の登録をおこなう. myTableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell") // DataSourceの設定をする. myTableView.dataSource = self // Delegateを設定する. myTableView.delegate = self // Viewに追加する. self.view.addSubview(myTableView) } // UIButton貼り付け func addEditButton(){ // 編集ボタン editButton.frame = CGRectMake(0, 0, 150, 50) editButton.center = CGPointMake(self.view.bounds.size.width/4*3, self.view.bounds.size.height/4*3) editButton.titleLabel!.font = UIFont(name: "HiraKakuProN-W6", size: 30) editButton.setTitle("編集", forState: UIControlState.Normal) editButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal) editButton.addTarget(self, action: "onClickEditButton:", forControlEvents: .TouchUpInside) // 見た目を調節 editButton.layer.masksToBounds = true editButton.layer.cornerRadius = 20.0 editButton.backgroundColor = UIColor.redColor() self.view.addSubview(editButton) } /* UITableViewDelegate,DataSource*/ func numberOfSectionsInTableView(tableView: UITableView) -> Int { return 1 } func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return items.count } func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{ // 再利用するCellを取得する. let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! UITableViewCell // Cellに値を設定する. cell.textLabel!.text = "\(items[indexPath.row])" return cell } // 編集ボタンがタップされた時のアクション internal func onClickEditButton(sender: UIButton){ let string = sender.titleLabel!.text! if string == "編集"{ myTableView.setEditing(true, animated: true) sender.setTitle("完了", forState: UIControlState.Normal) } else { myTableView.setEditing(false, animated: true) sender.setTitle("編集", forState: UIControlState.Normal) } } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } |
【解説】
UINavigationItemを利用する場合は編集ボタンの設定に
1 |
self.navigationItem.leftBarButtonItem = self.editButtonItem() |
などとして設定して、UITableViewのdelegateで細かい設定をしていくと思います。
1 2 3 |
override func setEditing(editing: Bool, animated: Bool) { // 編集ボタンが押された時の設定 } |
しかし、今回はどうしてもUIButtonで実装したいので、
1 |
editButton.addTarget(self, action: "onClickEditButton:", forControlEvents: .TouchUpInside) |
とUIButtonにアクションを設定して、そのアクションメソッドの中で
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 編集ボタンがタップされた時のアクション internal func onClickEditButton(sender: UIButton){ let string = sender.titleLabel!.text! if string == "編集"{ myTableView.setEditing(true, animated: true) sender.setTitle("完了", forState: UIControlState.Normal) } else { myTableView.setEditing(false, animated: true) sender.setTitle("編集", forState: UIControlState.Normal) } } |
こんな感じで実装します。
myTableView.setEditing(編集モードにするかどうか?, animated:true)
というメソッドを呼んで編集モードを切り替えているわけです。
このように外部でメソッドを呼んであげればNavigationBarをとっぱらうことができるため、より大きく表示できたり、広く使えたりします。
ディスカッション
コメント一覧
まだ、コメントがありません