Use auto layout to implement custom cell and drag rebound in IOS applications _ios

Customizing the cell and using Auto Layout
Create a file
We can create code files for xib files and classes at once.

New Cocoa Touch Class:

The settings are the same as the following illustration:

Inspection results

Check the 1 and 22 of the above figure respectively to see if 3 has been automatically bound to Firsttableviewcell, if there is no binding, first check that the selected element is indeed 2, and then manually bind.

Complete binding work
Switch one page, the following figure for Identifier settings:

New Table View Controller page
Create a new Table View Controller page and bind the click events of the Swift on IOS button we created earlier, and we get:

Then create a Uitableviewcontroller class called Firsttableviewcontroller, which is basically consistent with the previous creation process. Do not create xib. Then select the Table View Controller in StoryBoard (with a blue border wrapped after it is selected) and bind it to the Firsttableviewcontroller class on the right:

Calling a custom cell
Modify the valid code in the Firsttableviewcontroller class as follows:

Copy Code code as follows:

Import Uikit

Class Firsttableviewcontroller:uitableviewcontroller {

Override Func Viewdidload () {
Super.viewdidload ()

var nib = uinib (nibname: "Firsttableviewcell", Bundle:nil)
Self.tableView.registerNib (NIB, Forcellreuseidentifier: "Firsttableviewcell")
}

Override Func didreceivememorywarning () {
Super.didreceivememorywarning ()
}

MARK:-Table View Data source

Override func Numberofsectionsintableview (Tableview:uitableview)-> Int {
Return 1
}

Override func TableView (Tableview:uitableview, numberofrowsinsection section:int)-> Int {
Return 10
}

Override func TableView (Tableview:uitableview, Cellforrowatindexpath indexpath:nsindexpath)-> UITableViewCell {
Let cell = Tableview.dequeuereusablecellwithidentifier ("Firsttableviewcell", Forindexpath:indexpath) as Firsttableviewcell

Cell.textlabel? Text = IndexPath.row.description

return cell
}
}

The two lines of code added in Viewdidload () are operations that load xib. The bottom three func are defined separately:

How many section in the Self.tableview
How many entries are in each section, respectively
Instantiate each entry and provide content
If you get the following page, it means that you called the custom cell successfully!

Add elements to a custom cell and use the Auto Layout constraint
First, add a picture to the images.xcassets.

Then select Firsttableviewcell.xib in the left file tree, drag an image view from the right component library, and set its dimensions to the right of the right side of the diagram on the right-hand:

To add a constraint to ImageView:

Select the ImageView (as shown in the left arrow) and click Auto Auto Layout (shown in the right arrow).

Set up a picture for ImageView:

And then drag a uilabel from the right component library, adsorb to the far right, center vertically, add automatic constraints to it, this step is no longer repeat.

Binding elements dragged in Xib in the Firsttableviewcell class
Select Firsttableviewcell.xib, switch to dual view, and drag the binding directly:

Binding Complete!

To constrain the height of a cell
Add the following methods to the Firsttableviewcontroller:

Copy Code code as follows:

Override func TableView (Tableview:uitableview, Heightforrowatindexpath indexpath:nsindexpath)-> CGFloat {
Return 50
}

Add content to a custom Uilabel
Modify the following function in Firsttableviewcontroller as:

Copy Code code as follows:

Override func TableView (Tableview:uitableview, Cellforrowatindexpath indexpath:nsindexpath)-> UITableViewCell {
Let cell = Tableview.dequeuereusablecellwithidentifier ("Firsttableviewcell", Forindexpath:indexpath) as Firsttableviewcell

Cell.firstLabel.text = IndexPath.row.description

return cell
}

View Results
4.0 inch:

4.7 inch:

If you get the results above, then congratulate yourself on customizing the cell and using Auto Layout success!

22 lines of code implementation drag rebound
Build the interface
Remove the button in the middle of the first page, add a View, set a background color for easy identification, and then make absolute constraints on it:

Drag a Uipangesturerecognizer to the View:

The interface is built and completed.

Property bindings
Switch to a two-way view, right-drag uipangesturerecognizer and the Auto Layout property of the view's top space to bind to Viewcontroller:

Then drag the Uipangesturerecognizer right to the binding:

Writing code

Copy Code code as follows:

Class Viewcontroller:uiviewcontroller {

var middleviewtopspacelayoutconstant:cgfloat!
var middlevieworiginy:cgfloat!

@IBOutlet weak var middleview:uiview!
@IBOutlet weak var middleviewtopspacelayout:nslayoutconstraint!
@IBOutlet var pangesture:uipangesturerecognizer!
Override Func Viewdidload () {
Super.viewdidload ()

Pangesture.addtarget (Self, action:selector ("Pan")
Middleviewtopspacelayoutconstant = Middleviewtopspacelayout.constant
Middlevieworiginy = MIDDLEVIEW.FRAME.ORIGIN.Y
}

Override Func didreceivememorywarning () {
Super.didreceivememorywarning ()
Dispose of any of the can is recreated.
}

Func pan () {
if pangesture.state = = uigesturerecognizerstate.ended {
Uiview.animatewithduration (0.4, delay:0, Options:UIViewAnimationOptions.CurveEaseInOut, animations: {()-> Void in
SELF.MIDDLEVIEW.FRAME.ORIGIN.Y = Self.middlevieworiginy
}, Completion: {(success)-> Void in
If success {
Self.middleViewTopSpaceLayout.constant = Self.middleviewtopspacelayoutconstant
}
})
Return
}
Let y = Pangesture.translationinview (self.view). Y
Middleviewtopspacelayout.constant = middleviewtopspacelayoutconstant + y
}

}

View Effects

22 lines of code, drag rebound effect complete!