代写 Announcement

程序代写 CS代考

Announcement
• Lab 3 and Lab 4 are posted
– Lab 3 is due Wednesday Oct 2nd – Lab 4 is due on Monday Oct 21st
1E- CxtSeEn4s3i8bl–eMNobeitlewAoprpkliincgatiPonlaDtefovermlopment 1
Today’s Topics
• Scroll views
• Table views
– Displaying data
– Controlling appearance & behavior
• UITableViewController • Table view cells
• Collection views
2E- CxtSeEn4s3i8bl–eMNobeitlewAoprpkliincgatiPonlaDtefovermlopment 2

Scroll Views
3E- CxtSeEn4s3i8bl–eMNobeitlewAoprpkliincgatiPonlaDtefovermlopment 3
UIScrollView
• For displaying more content than can fit on the screen
• Handles gestures for panning and zooming
• Noteworthy subclasses: UITableView and UITextView
4E- CxtSeEn4s3i8bl–eMNobeitlewAoprpkliincgatiPonlaDtefovermlopment 4

Scrolling Examples
5E- CxtSeEn4s3i8bl–eMNobeitlewAoprpkliincgatiPonlaDtefovermlopment 5
Using a Scroll View
• Create with the desired frame
let theFrame = CGRect(x:0, y:0, width:200, height:200) let scrollView = UIScrollView(frame: theFrame)
• Add subviews (frames may extend beyond scroll view frame)
let bigFrame = CGRect(x:0, y:0, width:500, height:500) let myImageView = UIImageView(frame: bigFrame) scrollView.addSubview(myImageView)
• Set the content size
–scrollView.contentSize = CGSize(width: 500, height: 500)
6E- CxtSeEn4s3i8bl–eMNobeitlewAoprpkliincgatiPonlaDtefovermlopment 6

Frame and Content
scrollView.frame
7E- CxtSeEn4s3i8bl–eMNobeitlewAoprpkliincgatiPonlaDtefovermlopment 7
Frame and Content
scrollView.contentSize
8E- CxtSeEn4s3i8bl–eMNobeitlewAoprpkliincgatiPonlaDtefovermlopment 8

Frame and Content
scrollView.contentOffset
9E- CxtSeEn4s3i8bl–eMNobeitlewAoprpkliincgatiPonlaDtefovermlopment 9
Demo
Using a UIScrollView
10E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 10

Extending Scroll View Behavior
• Applications often want to know about scroll events
– When the scroll offset is changed – When dragging begins & ends
– When deceleration begins & ends
11E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinlicgatPiolnatDfoevrmelopment 11
Extending with a Subclass
• Create a subclass
• Override methods to customize behavior • Issues with this approach
– Application logic and behavior is now part of a View class
– Tedious to write a one-off subclass for every scroll view instance
– Your code becomes tightly coupled with superclass
12E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 12

Extending with Delegation
• Delegate is a separate object
• Clearly defined points of responsibility – Change behavior
– Customize appearance
• Loosely coupled with the object being extended
13E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 13
UIScrollView Delegate
public protocol UIScrollViewDelegate:NSObjectProtocol
// Respond to interesting events
optional public func scrollViewDidScroll(_ scrollView: UIScrollView) optional public func scrollViewDidZoom(_ scrollView: UIScrollView)
…
// Influence behavior
// return a yes if you want to scroll to the top. if not defined, assumes YES
optional public func scrollViewShouldScrollToTop(_ scrollView: UIScrollView) -> Bool
14E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 14

Implementing a Delegate
• Conform to the delegate protocol
class ViewController: UIViewController, UIScrollViewDelegate {
• Implement all required methods and any optional methods
func scrollViewDidScroll(_ scrollView: UIScrollView){
// Do something in response to the new scroll position
if (scrollView.contentOffset …) {
} }
15E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 15
Zooming with a Scroll View
• Set the minimum, maximum, initial zoom scales scrollView.maximumZoomScale = 5.0
scrollView.minimumZoomScale = 1.0
• Implement delegate method for zooming func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return someViewThatWillBeScaled }
16E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 16

Demo
Zooming with a UIScrollView
17E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 17
Table Views
18E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 18

Table Views
• Display lists of content
– Single column, multiple rows – Vertical scrolling
– Large data sets
• Powerful and ubiquitous in iPhone applications
19E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 19
Table View Styles
UITableViewStylePlain UITableViewStyleGrouped
20E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 20

Table View Anatomy – Plain Style
Table Header ->
21E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 21
Table View Anatomy – Plain Style
Section Header ->
22E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 22

Table View Anatomy – Plain Style
Table Cell->
23E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 23
Table View Anatomy – Plain Style
Section Footer ->
24E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 24

Table View Anatomy – Plain Style
Section ->
25E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 25
Table View Anatomy – Plain Style
Table Footer->
26E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 26

Table View Anatomy – Plain Style
Table Header -> Section Header ->
Table Cell-> Section Footer ->
Section -> Table Footer->
27E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 27
Table View Anatomy – Grouped Style
Table Header -> Section Header ->
Table Cell-> Section Footer ->
Section -> Table Footer->
28E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 28

Displaying Data in a Table View
29E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 29
A Naïve Solution
• Table views display a list of data, so use an array myTableView.setList(myListOfStuff)
• Issues with this approach – All data is loaded upfront – All data stays in memory
30E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 30

A More Flexible Solution
• Another object provides data to the table view – Not all at once
– Just as it􏰀s needed for display
• Like a delegate, but purely data-oriented
31E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 31
UITableViewDataSource
• Provide number of sections and rows
// Optional method, defaults to 1 if not implemented
func numberOfSections(in tableView: UITableView) -> Int
// Required method
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
• Provide cells for table view as needed // Required method
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
32E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 32

Datasource Message Flow
numberOfSections(in tableView: UITableView) -> Int
How many Sections?
Datasource
5
33E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 33
Update Datasource Message Flow
tableView(_ tableView: UITableView, numberOfRowsInSection section section:Int ) -> Int
How many rows in Section 0?
1
Datasource
34E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 34

Datasource Message Flow
tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
Datasource
􏰀John Appleseed􏰁
What to display at section 0, row 0?
35E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 35
IndexPath
• Generic class in Foundation
• Path to a specific node in a tree of nested arrays
36E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 36

Single Section Table View
Return the number of rows
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
{
return myStrings.count
}
Provide a cell when requested
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = …
cell.textLabel.text = myStrings[indexPath.row] return cell
}
37E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 37
Creating Cells without reuse
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let myCell = UITableViewCell(style: .default, reuseIdentifier: nil)
myCell.textLabel.text = myStrings[indexPath.row]
return myCell }
38E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 38

Cell Reuse
• When asked for a cell, it would be expensive to create a new cell each time.
– First register the class for use in creating new cells
override func viewDidLoad(){ …
tableView.register (UITableViewCell.self, forCellReuseIdentifier: “theCell”) }
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let myCell = tableView.dequeueReusableCellWithIdentifier(”theCell”)! as UITableViewCell
cell.textLabel.text = myStrings[indexPath.row]
return cell }
39E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 39
Triggering Updates
• When is the datasource asked for its data?
– When a row becomes visible
– When an update is explicitly requested by calling –
reloadData
override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated) tableView.reloadData()
}
40E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 40

Basic properties
• UITableViewCell has image and text properties
cell.imageView?.image = UIImage.init(named: 􏰀obama.png􏰁) cell.textLabel?.text = 􏰀Barack Obama􏰁
41E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 41
Demo
42E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 42

UICollectionView
• Convenient way to show information in a grid format
• Similar to a UITableView
– But with multiple columns
• Flow based layout makes displaying rows and columns of data very easy
43E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 43
UICollectionView
func numberOfSections (in collectionView: UICollectionViews) -> Int { //return number of sections
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
//return number of items per section
}
func collectionView(_ collectionView: UICollectionView, cellForItemAtIndexPath indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ”someCellNameId” for: indexPath)
// configure the cell
// return UICollectionView cell for item at IndexPath
return cell }
44E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 44

UICollectionView Demo
45E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 45
Lab 3 Demo
46E-xCteSnEs4i3b8le– MNoebtiwleoArpkpinligcatPiolantDfoevrmelopment 46

Related Posts