TabbedBar mit TableViewCollection
TabbedBar mit TableViewCollection Neues Projekt: Tabbed App
2
TabbedBar mit TableViewCollection
Name: TabBarCollectionView
TabbedBar mit TableViewCollection
4
Ablauf:
1. Bilder und Symbole einfügen
2. Ändern der Symbole (Vorspeise etc.) 3. FirstController
•
StackView mit Labels und Buttons erstellen
•
TableView einfügen
•
Referenzen erstellen
4. Klasse Picture erstellen
5. CollectionView Delegate einfügen 6. didLoad bearbeiten
TabbedBar mit TableViewCollection
TabbedBar mit TableViewCollection Symbole einfügen (Vorspeisen.zip):
6
TabbedBar mit TableViewCollection
TabbedBar mit TableViewCollection Anklicken der TabBar im ersten Controllers
8
TabbedBar mit TableViewCollection
TabbedBar mit TableViewCollection Klasse Picture: Cmd+N
10
class Picture: NSObject {
var bez : String = ""
var picturename : String = ""
var rezept : String = ""
init(_ bez:String, _ picturename:String, rezept : String ){
self .bez = bez
self .picturename = picturename self .rezept = rezept
} }
TabbedBar mit TableViewCollection
Klasse Picture:
TabbedBar mit TableViewCollection Ändern des FirstControllers
1. Löschen der Labels 2. StackView
•
LabelRow
•
LabelInfo
•
Button Change
•
Button New
3. Equals Widths Constraints 4. CollectionView einfügen
5. Referenzen erstellen
12
TabbedBar mit TableViewCollection Referenzen und Protokolle
class FirstViewController: UIViewController ,
UICollectionViewDelegate, UICollectionViewDataSource {
var liste = [Picture]()
// Referenzen
@IBOutlet var labelRow: UILabel!
@IBOutlet var labelInfo: UILabel!
@IBOutlet var bn1: UIButton!
@IBOutlet var collectionView: UICollectionView!
CollectionView-Delegates
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return liste.count }
func collectionView(_ collectionView: UICollectionView , didSelectItemAt indexPath: IndexPath) {
bnChange.isEnabled=true
let row = (indexPath as NSIndexPath).row labelRow.text="row: "+String(row)
}
func collectionView(_ collectionView: UICollectionView ,
cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(
withReuseIdentifier: "MyCell", for: indexPath) // Identifier
cell.backgroundColor = UIColor(red: 0.8, green: 0.8, blue: 0.6, alpha: 1)
return cell }
14
override func viewDidLoad() { super .viewDidLoad()
setPictures()
collectionView.dataSource=self collectionView.delegate = self }
TabbedBar mit TableViewCollection
viewDidLoad
func setPictures() {
liste.append( Picture( "New York", "antipasti", rezept: "rezept1") )
liste.append( Picture( "Mailand", "avocado-mango-salsa-mit-garnelen", rezept: "rezept2") )
liste.append( Picture( "Wernigerode", "bacon-tomaten- frischkaesehaeppchen", rezept: "rezept3") )
liste.append( Picture( "Hamburg", "cappuccino-von-der-maroni-mit- trueffelschaum", rezept: "rezept4") )
liste.append( Picture( "Delphi", "entenbrust-auf-buntem-salat", rezept:
"rezept5") )
liste.append( Picture( "Brasilia", "flammkuchen-mit-ziegenkaese-rosmarin- und-honig", rezept: "rezept6") )
TabbedBar mit TableViewCollection setPictures
16
TabbedBar mit TableViewCollection 1. Anklicken
Eintrag Collection View Cell
2. Eintragen von
„MyCell“
TabbedBar mit TableViewCollection Aktueller Stand
18
Anlegen der Klasse MyCell: UICollectionViewCell
Anlegen der Klasse MyCell: UICollectionViewCell
class MyCell: UICollectionViewCell {
static let backgroundColor:UIColor =
UIColor(red: 0.8, green: 0.8, blue: 0.6, alpha: 1)
static let backgroundColorSelected:UIColor =
UIColor(red: 0.2, green: 0.2, blue: 1, alpha: 1)
static let textColor:UIColor =
UIColor(red: 0.7, green: 0.4, blue: 0.4, alpha: 1)
func markSelected(state:Bool){
if (state) {
self .backgroundColor = MyCell.backgroundColor }
else {
self .backgroundColor = MyCell.backgroundColorSelected }
}
}
20MyCell verändern
Ablauf:
1. Aufziehen der MyCell auf
•
Breite: 146
•
Höhe: 88
2. shift+cmd+L
3. ImageView einfügen
•
x:14
•
Breite: 118
•
Höhe: 50
4. Label einfügen
MyCell verändern
Collection View im Baum anklicken
MyCell im Baum anklicken
Wichtig !
22
Aktueller Stand
if let mycell = cell as? MyCell { let index = indexPath.row
let bild = liste[index]
let iconname = bild.picturename
mycell.img.image = UIImage(named: iconname)
mycell.labelBez.text = iconname.replacingOccurrences(of: "-", with: " ") mycell.labelBez.textAlignment = NSTextAlignment.center
mycell.labelBez.backgroundColor = MyCell.backgroundColor mycell.labelBez.textColor = MyCell.textColor
}
FirstViewController: Methode collectionView
24
MyCell verändern
Referenzen zur Klasse MyCell eintragen
Anklicken von MyCell im Baum
shift+cmd+L
per Drag&Drop einen ViewController einfügen
ViewController „VorspeisenDetail“ erstellen
26
ViewController „VorspeisenDetail“ erstellen Ablauf:
1. NavigationBar oben einfügen 2. Constraint einfügen
3. Bar Button einfügen
4. Label „labelTitle“ einfügen 5. Constraint einfügen
6. ImageView einfügen 7. Constraint einfügen
8. Label labelRezept einfügen
ViewController „VorspeisenDetail“ erstellen FirstViewController:
1. Segue einfügen
• MyCell anklicken
• Drag & Drop zum DetailsViewController
• Auswahl: Show Detail 2. Testen
28
1) Anlegen einer Klasse VorspeiseDetail
ViewController „VorspeisenDetail“ erstellen
class VorspeiseDetail: UIViewController { override func viewDidLoad() {
super .viewDidLoad()
// Do any additional setup after loading the view.
}
}
ViewController „VorspeisenDetail“ erstellen
override func prepare(for segue: UIStoryboardSegue, sender: Any?) { if let cell:UICollectionViewCell = sender as? UICollectionViewCell { if let indexPath = collectionView.indexPath(for: cell) {
let picture:Picture = liste[(indexPath as NSIndexPath).row]
if let dest = segue.destination as? VorspeiseDetail { dest.picture=picture
labelInfo.text=picture.picturename } // if
} // if } // if
} // prepare
var picture : Picture?=nil
4) globale „Parameter“-Variable 3) Methode prepare
30
ViewController „VorspeisenDetail“ erstellen
5) Referenzen erstellen
@IBOutlet var labelTitle: UILabel!
@IBOutlet var img: UIImageView!
@IBOutlet var tRezept: UITextView!
override func viewDidLoad() { super .viewDidLoad()
labelTitle.text = "Anzeige einer Vorspeise"
if picture != nil {
let iconname = picture!.picturename
labelTitle.text = iconname.replacingOccurrences(of: "-", with: " ") tRezept.text = picture?.rezept
img.image = UIImage(named: iconname) }
}
ViewController „VorspeisenDetail“ erstellen
6) Initialisierung in viewDidLoad
32
