In storyboard, we can easily set the inner cell style of the table (TableView). However, if the TableView cell styles of multiple pages are the same, setting up a separate set is not only troublesome, but also causes code redundancy.
The best way to do this is to extract the cells into a custom component that enables the cell to be reused.
For custom cell components, our door can be implemented by inheriting UITableViewCell, using pure code. can also cooperate with XIB to realize. The previous method I have written a lot of examples, this article describes the latter method.
1, using xib to make TableView cell introduction
It is much easier to implement custom styles Xib than pure code. The use of xib is simple, regardless of layout constraints or style settings.
The following custom cells are implemented by Xib: white-bottomed rounded corners, title text on the left, and pictures on the right.
2, steps to customize the cell component
(1) First, when creating a custom cell Class (Mytableviewcell), select "Also Create XIB file"
(2) After the creation, we can see that in addition to the automatic generation of a swift file, there is also a corresponding xib file
(3) Open the Xib file and set its background color to clear color. Drag into a View component inside and set the constraint.
Note: When you set the constraint, remove the "Constrain to margins" check, which prevents the outer margin from being automatically added.
(4) Then drag an Image view component and a lable component into the new View component (lines property set to 2) and add the associated constraint
(5) The addition of the new three components in the Xib in the corresponding class to do code association. At the same time, set the rounded corners in the initialization function awakefromnib ()
| The code is as follows |
Copy Code |
|
Import Uikit
Class Mytableviewcell:uitableviewcell {
@IBOutlet weak var customview:uiview!
@IBOutlet weak var customlabel:uilabel!
@IBOutlet weak var customimage:uiimageview!
Override Func awakefromnib () {
Super.awakefromnib ()
Set the cell to have rounded border display
CustomView.layer.cornerRadius = 8
}
Override Func setselected (Selected:bool, Animated:bool) {
Super.setselected (selected, animated:animated)
}
}
|
3, the use of custom cell components
| The code is as follows |
Copy Code |
|
Import Uikit
Class Viewcontroller:uiviewcontroller, Uitableviewdelegate, Uitableviewdatasource {
var tabledata = [["title": "Swift-let the tab bar button uitabbaritem The picture centered", "image": "Img1.png"],
["title": "Swift-use Ssziparchive to implement file compression, decompression," "image": "Img2.png"],
["title": "Swift-use LINQ operations Array/Set", "image": "Img3.png"],
["title": "Swift-Add indexing function to the form UITableView", "image": "Img4.png"],
["title": "Swift-list item tail attachment Click Response", "image": "Img5.png"],
[Title: Swift-Free to adjust icon and text position in icon button, "image": "Img6.png"]]
var tableview:uitableview?
Override Func Loadview () {
Super.loadview ()
}
Override Func Viewdidload () {
Super.viewdidload ()
Create a table view
Self.tableview = UITableView (Frame:UIScreen.mainScreen (). Applicationframe,
Style:. Plain)
self.tableview!. delegate = Self
self.tableview!. DataSource = Self
Set Table background color
self.tableview!. BackgroundColor = Uicolor (red:0xf0/255, green:0xf0/255,
blue:0xf0/255, Alpha:1)
Remove a cell separator line
self.tableview!. Separatorstyle =. None
To create a reused cell
self.tableview!. Registernib (uinib (nibname: "Mytableviewcell", Bundle:nil),
Forcellreuseidentifier: "MyCell")
Self.view.addSubview (self.tableview!)
}
In this case, there is only one partition
Func Numberofsectionsintableview (Tableview:uitableview)-> Int {
return 1;
}
Returns the number of table rows (that is, returns the number of controls)
Func TableView (Tableview:uitableview, numberofrowsinsection section:int)-> Int {
Return Self.tableData.count
}
Cell height
Func TableView (Tableview:uitableview, Heightforrowatindexpath Indexpath:nsindexpath)
-> CGFloat {
Return 100
}
Create each cell display (create a parameter indexpath a specified cell)
Func TableView (Tableview:uitableview, Cellforrowatindexpath Indexpath:nsindexpath)
-> UITableViewCell
{
Let Cell:mytableviewcell = Tableview.dequeuereusablecellwithidentifier ("MyCell")
as! Mytableviewcell
Let item = Tabledata[indexpath.row]
Cell.customLabel.text = item["title"]
Cell.customImage.image = UIImage (named:item["image"]!)
return cell
}
Override Func didreceivememorywarning () {
Super.didreceivememorywarning ()
}
}
|
