Wednesday, 20 December 2017

UITableview controller demo (Using .xib file)

step 1: Drag and drop UITableview Controller on ViewController.
step 2: Create Tableviewcell cocoatouch file with xib.

step 3: In .xib file, put UIImageview and Label. (Depends on your requirements)
step 4: Give Constraints and IBoutlets of controls.
step 5: In Viewcontroller,  give IBoutlet of UITableview and create delegate and data source.
step 6: In ViewDidload, register the cell. Like,



override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        self.tblView.register(UINib(nibName: "CustomeTableViewCell", bundle: nil), forCellReuseIdentifier: "CustomeTableViewCell")
        self.tblView.allowsMultipleSelection = true
        self.tblView.isEditing = true
        

    }

step 7: In "CustomeTableViewCell.swift" file, put following code in awakeFromNib. Like,

@IBOutlet var imgTest: UIImageView!
    @IBOutlet var lblTest: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        lblTest.textColor = UIColor.red
        
    }

step 8: Create function with argument in "CustomeTableViewCell.swift" file. Like,

func updateCellData(strTest : String , img : UIImage){
    self.lblTest.text = strTest
        self.imgTest.image = img
    }

step 9: If you can create other operation in your cell than put following code in setSelected function.             (In "CustomeTableViewCell.swift" file) Like,

override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        if selected {
            self.lblTest.text = "Selected"
            self.accessoryType = .checkmark
        }else{
            self.accessoryType = .none
            self.lblTest.text = "Test"
        }
        // Configure the view for the selected state
    }

step 10: In viewController, we can use delegate and data source methods.

There are following Data source methods.
1) NumberofRowsInSection
2) cellForRowAtIndexPath

3) NumberofSection
4) TitleForHerderInSection
5) TitleForFooterInSection
(Some other methods are available in UITableView...)

Note: Method 1 and 2 both are required methods.

step 11: Put following code on NumberofRowsInSection. Like,

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

        print("ROW : \(intCount)")
        intCount = intCount + 1
        return 5
    }

step 12: Put following code on cellFowRowAtIndexPath. Like,

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell : CustomeTableViewCell = tableView.dequeueReusableCell(withIdentifier: "CustomeTableViewCell") as! CustomeTableViewCell
        cell.updateCellData(strTest: "Test \(indexPath.row)", img: #imageLiteral(resourceName: "phone_call"))
        return cell
    }

step 13: If user click on particular cell, use following delegate method. Like,

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("Select IndexPath : \(indexPath.row) Section : \(indexPath.section)")
    }

step 14: If user can create header and footer without using header-footer xib file. Like,

(This is for Header...)
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 50))
        headerView.backgroundColor = UIColor.red
        let imgView = UIImageView(frame: CGRect(x: 50, y: 5, width: 50, height: 40))
        imgView.image = #imageLiteral(resourceName: "phone_call")
        headerView.addSubview(imgView)
        return headerView
    }
    
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 50

    }


(This is for Footer...)
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
        let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 50))
        headerView.backgroundColor = UIColor.green
        let imgView = UIImageView(frame: CGRect(x: 50, y: 5, width: 50, height: 40))
        imgView.image = #imageLiteral(resourceName: "phone_call")
        headerView.addSubview(imgView)
        return headerView
    }
    
    func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
        return 70
    }

(This method is use for height for row...)
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 77

    }

step 15: If user can editing and move the cell in UITableview than create following code. Like,

func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCellEditingStyle {
        return .insert
    }
    
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
        if (editingStyle == .delete) {
         print("delete")
        }
        if (editingStyle == .insert) {
            print("Insert")
        }
    }
    
    func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
         print("sourceIndexPath : \(sourceIndexPath) destinationIndexPath : \(destinationIndexPath)")    }
    
    func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
        return true
    }

Thank you...

No comments:

Post a Comment