SwipeCellKit 사용 (Swift5)

18446 단어 Swift5

먼저



SwipeCellKit을 사용할 때의 설명 기사가 됩니다.
기사 열람의 대상자는, tableview의 cell를 커스터마이즈 하고 싶은 사람입니다.
나 자신, 셀을 스와이프했을 때에 이미지와 문장을 표시하고 싶어서 사용했습니다.
보충 설명으로서 Apple의 공식에서도 swipecellkit 같은 기능이 제공되고 있습니다만,
이미지와 문장을 표시했을 때, 표시 위치가 어긋나서 나의 기대대로가 되지 않았습니다. . .
공식적인 기능이라고 기대대로 되지 않는다고 하는 사람도 대상으로 한 기사가 되고 있습니다.

완성 화면





SwipeCellKit의 공식으로 한 번 커스터마이징 성능을 확인하는 것이 좋습니다.
SwipeCellKit 공식 사이트

개발 환경


  • XCode 10.3
  • Swift 5
  • SwipeCellKit 2.7.1

  • 이용까지의 흐름


  • tableview를 준비
  • cocoapod에서 SwipeCellKit 다운로드
  • SwipeCellKit을 import하여 이용
  • 동작 확인

  • 1. tableview 준비



    tableview와 tableviewcell을 viewcontroller에 붙입니다.
    셀의 설정란의 Identifier는 「cell」로 설정합니다.
    적당히 UILabel도 설치합니다.


    그런 다음 UITableViewCell 파일을 만듭니다.


    파일을 만든 후 StoryBoard에서 셀에 클래스를 설정합니다.


    마지막으로 tableview와 tableviewcell을 프로그램과 연결합니다.

    ViewController





    TableViewCell





    tableview의 준비는 종료입니다.

    2. cocoapod에서 SwipeCellKit 다운로드



    터미널에서 프로젝트 계층 구조로 이동하고 pod init 명령으로 podfile을 만듭니다.


    podfile에 사용하고 싶은 OSS를 기입합니다.
    이번은 SwipeCellKit이므로 "pod 'SwipeCellKit'"라고 기입합니다.


    작성이 완료되면 pod install 명령으로 SwipeCellKit을 다운로드합니다.


    마지막으로 프로젝트 폴더를 열고 확장자가 xcworkspace인 폴더를 엽니다.


    이것으로 cocoapod에서 SwipeCellKit 다운로드가 종료됩니다.

    3. SwipeCellKit import



    다음으로 다음과 같이 프로그램을 작성합니다.
    프로그램 안에 코멘트를 써서 내용을 읽고 이해할 수 있다고 생각합니다.

    ViewController.swift
    import UIKit
    import SwipeCellKit
    
    //SwipeTableViewCellDelegateを追加。
    class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource,SwipeTableViewCellDelegate {
    
        @IBOutlet weak var tableView: UITableView!
        //cellのlabelに表示する値の配列
        var array = [111,222,333,444,555,666,777,888,999]
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            tableView.delegate = self
            tableView.dataSource = self
        }
    
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return array.count
        }
    
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
            //cell.delegateはswipecellkitを使う際に必須の処理。
            cell.delegate = self
            cell.titleLabel?.text = String(array[indexPath.row])
            return cell
        }
    
        //swipecellkit swipetableviewdelegateのメソッド
        //スワイプした際に表示される文字や画像を設定。またタップした際の処理も設定
        func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath, for orientation: SwipeActionsOrientation) -> [SwipeAction]? {
            //右スワイプをした際の処理。今回は何も処理を行わない。
            guard orientation == .right else { return nil }
    
            //左スワイプした際の処理。
            let deleteAction = SwipeAction(style: .destructive, title: "削除") { action, indexPath in
                //cellの状態を解除する処理。必須の処理。
                action.fulfill(with: .reset)
    
                /*********************************/
                let alert: UIAlertController = UIAlertController(title: "Cellを削除", message: "削除してもよろしいでしょうか?", preferredStyle:  UIAlertController.Style.alert)
    
                let defaultAction: UIAlertAction = UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler:{
                    (action: UIAlertAction!) -> Void in
                    print("OK")
                    self.array.remove(at: indexPath.row)
                    tableView.deleteRows(at: [indexPath], with: .fade)
                })
    
                let cancelAction: UIAlertAction = UIAlertAction(title: "キャンセル", style: UIAlertAction.Style.cancel, handler:{
                    (action: UIAlertAction!) -> Void in
                    print("Cancel")
                })
                alert.addAction(cancelAction)
                alert.addAction(defaultAction)
                self.present(alert, animated: true, completion: nil)
                /*********************************/
    
            }
            //スワイプした際に表示される画像の設定。
            deleteAction.image = UIImage(named: "delete")
    
            return [deleteAction]
        }
    
        //スワイプ時の表示形式の設定。SwipeCellKitの公式サイトを見ると一発でわかる。
        func tableView(_ tableView: UITableView, editActionsOptionsForRowAt indexPath: IndexPath, for orientation: SwipeActionsOrientation) -> SwipeOptions {
            var options = SwipeOptions()
            options.expansionStyle = .destructive
            options.transitionStyle = .border
            return options
        }
    
    }
    

    TableViewCell.swift
    import UIKit
    import SwipeCellKit
    
    //UITableViewCellからSwipeTableViewCellにする
    class TableViewCell: SwipeTableViewCell {
    
        @IBOutlet weak var titleLabel: UILabel!
    
        override func awakeFromNib() {
            super.awakeFromNib()
            // Initialization code
        }
    
        override func setSelected(_ selected: Bool, animated: Bool) {
            super.setSelected(selected, animated: animated)
    
            // Configure the view for the selected state
        }
    
    }
    
    

    이미지에는 항상 신세를 지고 있는 icons8 의 사이트에서 취득한 이미지를 사용했습니다.
    icons8을 사용할 때는 이용 약관을 보고 사용하십시오.

    4. 동작 확인



    실제로 빌드하고 이용해 보면, 맨 위의 완성 화면과 같은 것이 되어 있다고 생각합니다.

    인용



    icons8
    SwipeCellKit

    좋은 웹페이지 즐겨찾기