IOS Development Table View detailed _ios

This article describes the use of table views in detail. Specifically as follows:

Overview

Table View composition

The table view is the most important view in iOS development, and it presents the data as a list. Table view again part of the composition:

• Table header view: Top view of Table view

• Table foot view: Bottom view of Table view

• Cell: View of each row in a table view

• Sections (section): Composed of multiple cells, applied to a grouped list

  • Section Head

  • Knuckle feet

Related classes for table views

UITableView inherits from Uiscrollview, and has two protocols: Uitableviewdelegate and Uitableviewdatasource. In addition, the cell class when the class is UITableViewCell, the controller that is UITableView when the class is Uitableviewcontroller, Uitableviewheaderfooterview is used to provide the view for the section header and the section foot.

Table View Categories

• Normal table view: Mainly used for dynamic tables, while dynamic tables are generally used when the number of cells is unknown
• Grouped table view: Commonly used for static tables, for interface layout
  

Composition and style of cells

The cell consists of an icon, a main title, a subtitle, an extended view, and can be selected as needed, with the built-in extended view in the enumerated type

Swift Enumeration Members	Objective-c enumeration member	Description
None	Itableviewcellaccessorynone	No extension icon
Disclosureindicator	Uitableviewcellaccessorydisclosureindicator	Extended indicator, arrow + question mark
Detaildisclosurebutton	Uitableviewcellaccessorydetaildisclosurebutton	Detail diagram, for question mark
Checkmark	Uitableviewcellaccessorycheckmark	Check flag, icon for tick
Detailbutton	Uitableviewcellaccessorydetailbutton	Details display, the icon is a question mark

The built-in cell style is defined in the enumeration type Uitableviewcellstyle:

Swift Enumeration Members	Objective-c enumeration member	Description
Default	Uitableviewcellstyledefault	Default Style
Subtitle	Uitableviewcellstylesubtitle	There are icons, main headings, subheadings, subheadings under the main headings
Value1	UITableViewCellStyleValue1	has main title, subtitle, left alignment of main title, subtitle right, can have icon
2alue3	UITableViewCellStyleValue2	With main title, subtitle, main title and subtitle centered, no icon

Data source protocol and Entrustment Agreement

Uitableviewdatasource

The data source protocol mainly provides data for the table view, the main methods are as follows

Method	return type	Description
Func TableView (UITableView, Cellforrowat:indexpath)	UITableViewCell	To provide data for a table view cell, you must implement the
TableView (UITableView, Numberofrowsinsection:int)	Int	Returns the number of rows in a section, you must implement the
TableView (UITableView, Titleforheaderinsection:int)	String	Returns the caption of a section header
TableView (UITableView, Titleforfooterinsection:int)	String	Returns the caption of a section foot
Numberofsections (In:uitableview)	Int	Returns the number of sections
Sectionindextitles (For:uitableview)	[String]?	Returns the index caption for the graph section

Uitableviewdelegate

The principal protocol is mainly used to set the caption of the section Head and the section foot in the table view, as well as some action events, the main methods are as follows

Method	return type	Description
TableView (UITableView, Didselectrowat:indexpath)		Cell response Event
TableView (UITableView, Accessorybuttontappedforrowwith:indexpath)		Extended View Response Events

Simple table View

Uiviewcontroller root View Controller Implementation table view

Steps

1. Create an iOS project
2. Drag a tableview into the storyboard file from the object library and overwrite the tableview with the entire view
3. Open the Property Inspector for Table view, set the value of Prototypecells to 1, and be careful not to add more than one, or an error will occur, and table view will add a table view Cell.
4. Open the property inspector for the table View cell and set the identifier property.
5. Register Uitableviewdatasource and Uitableviewdelegate protocol
6. Writing code Implementation features

Realize

Viewcontroller.swift//Tableviewdemo////Created by Michael on 2016/10/26. COPYRIGHT©2016 year Michael.
All rights reserved. Import Uikit class Viewcontroller:uiviewcontroller,uitableviewdatasource,uitableviewdelegate {//all data var listIt

 ems:nsarray!  Override Func Viewdidload () {super.viewdidload ()/Read resource file data let Listpath = Bundle.main.path (forresource: "Team",
 OfType: "plist") Self.listitems = Nsarray (contentsoffile:listpath!) } override func Didreceivememorywarning () {super.didreceivememorywarning ()//Dispose of any of the CAN
 Recreated. //Returns the view of each row in the list func TableView (_ Tableview:uitableview, Cellforrowat indexpath:indexpath)-> UITableViewCell {//according to Identifier find cell let cell = Tableview.dequeuereusablecell (withidentifier: "Customid", for:indexpath) let row = Indexp Ath.row Let rowdict = Self.listitems[row] as! Nsdictionary Cell.textlabel? Text = rowdict["name"] as? String Cell.detailtextlabel?
Text = "123"  
  Let ImagePath = String (format: "%@.png", rowdict["image") as! String) Cell.imageview? 

 Image = UIImage (named:imagepath) Cell.accessorytype = uitableviewcellaccessorytype.disclosureindicator Return cell} Returns the number of entries Func TableView (_ Tableview:uitableview, numberofrowsinsection section:int)-> Int {return self.listit Ems.count}//Response entry Click event Func TableView (_ Tableview:uitableview, Didselectrowat indexpath:indexpath) {print ("click event"

 )
 }
 
}

Sample diagram

None mode

Disclosureindicator

Uitableviewcontroller root View Controller Implementation table view
Steps

1. Create an iOS project
2. Delete View Controller from view Controller Scene in storyboard, and drag from the object library into a table view Controller to the design interface
3. Open the Table View Controller property Inspector, check the IS Initial View controller option, otherwise the application will be black after startup
4. Change the parent class of the Viewcontroller class from Uiviewcontroller to Uitableviewcontroller
5. Open the View Controller property selector to select Viewcontroller in the Class list
6. Uitableviewcontroller default to register Uitableviewdatasource and Uitableviewdelegate protocol, no need to register
   

Realize

Import Uikit class Viewcontroller:uitableviewcontroller {//all data var listitems:nsarray!  Override Func Viewdidload () {super.viewdidload ()/Read resource file data let Listpath = Bundle.main.path (forresource: "Team",
 OfType: "plist") Self.listitems = Nsarray (contentsoffile:listpath!) } override func Didreceivememorywarning () {super.didreceivememorywarning ()//Dispose of any of the CAN
 Recreated.  //Returns the view of each row in the list func TableView (_ Tableview:uitableview, Cellforrowat indexpath:indexpath)-> UITableViewCell {Let Cell = Tableview.dequeuereusablecell (withidentifier: "Customid", for:indexpath) let row = Indexpath.row let RowDi ct = Self.listitems[row] as! Nsdictionary Cell.textlabel? Text = rowdict["name"] as? String Cell.detailtextlabel? Text = "123" Let ImagePath = String (format: "%@.png", rowdict["image") as! String) Cell.imageview? Image = UIImage (named:imagepath) Cell.accessorytype = Uitableviewcellaccessorytype.disclosureindicator
  Return cell}//Number of entries Func TableView (_ Tableview:uitableview, numberofrowsinsection section:int)-> Int {R  Eturn Self.listItems.count}//Response entry Click event Func TableView (_ Tableview:uitableview, Didselectrowat Indexpath:indexpath)

 {Print (click event)}}

Sample diagram

Detailbutton mode

Checkmark mode

Custom cells

Steps

1. Create a Table View project
2. Modify the root view controller to uitableviewcontroller the table view controller, referencing the steps in the previous section
3. Drag a control from the object library to the inside of the cell, such as lable and ImageView
4. Create a custom cell class Customcell file and inherit the UITableViewCell class
5. Select the table view cell in the view Controller scene in the design interface, open the property inspector, set class to the Customcell class, and set the cell's identifier
6. Connect the output interface to the control label and ImageView control in the cell, and bind the control to the Customcell class
7. Open Viewcontroller class, write code implementation

Realize
Customcell class

//Customcell.swift
//Customcell////
Created by
Michael on 2016/10/25.
COPYRIGHT©2016 year Michael. All rights reserved.

Import Uikit

class Customcell:uitableviewcell {

 @IBOutlet weak var mimage:uiimageview!
 @IBOutlet weak var mlabel: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
 }

Viewcontroller class

Viewcontroller.swift//Simpletableview////Created by Michael on 2016/10/24. COPYRIGHT©2016 year Michael.
All rights reserved.
 
 Import Uikit class Viewcontroller:uitableviewcontroller {var listitems:nsarray! Override Func Viewdidload () {super.viewdidload ()//Do no additional setup after loading the view, typically from a
  Nib. Let Listpath = Bundle.main.path (forresource: "Team", OfType: "plist") Self.listitems = Nsarray (contentsoffile:listpath!  )} override func didreceivememorywarning () {super.didreceivememorywarning ()//Dispose of any of the CAN
 Be recreated. Override Func TableView (_ Tableview:uitableview, numberofrowsinsection section:int)-> Int {return self.lis Titems.count} override Func TableView (_ Tableview:uitableview, Cellforrowat indexpath:indexpath)-> UITableV Iewcell {///Find custom cell let cell:customcell! = Tableview.dequeuereusablecell (withidentifier: "Customcellid", For:indexpat h) as? CustomCell//let cell = UITableViewCell (style:. value1, Reuseidentifier: "Cellidentifier") let row = Indexpath.row let Rowdict = Self.listitems[row] as! Nsdictionary//Set control properties Cell.mLabel.text = rowdict["name"] as? String Let ImagePath = string (format: "%@.png", rowdict["image") as!

 String) Cell.mImage.image = UIImage (named:imagepath) Cell.accessorytype =. Disclosureindicator return Cell}}

Sample diagram

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.