setContentOffset für eine ScrollView in einer collectionViewCell

ThisIsBeat · 25. Januar 2019, 14:24

Hallo,

ich möchte das bei einem tap innerhalb einer ScrollView die ich in einer collectionViewCell erzeuge, sich der Content bzw. die xPostion der ScrollView an die Stelle schiebt an die auch getippt wurde. Da ich so etwas bisher noch nicht gemacht habe, habe ich einfach wild drauf los probiert, jedoch leider nicht mit dem gewünschten Ergebnis.

Mein Plan war es über einen tabGestureRecognizer, die xPosition über setContentOffset zu verschieben. Die ScrollView erfässt diese Taps auch jedoch bekomme ich immer wieder eine Fehlermeldung das die ScrollView nil wäre.

Hat jemand von euch schon mal ähnliches probiert und weiß wie man so etwas handhaben kann ?

Ich hoffe es wird klar was ich probiere

PS: Gutes Beispiel wäre der Discover Bereich von Instagram in dem man ganz oben die Kategorien auswählen kann

Hier der Code

Quellcode

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "Header", for: indexPath as IndexPath) as! TestCollectionReusableView
let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(scrollViewTapped(recognizer:)))
tapGestureRecognizer.numberOfTapsRequired = 1
headerView.scrollView.addGestureRecognizer(tapGestureRecognizer)
for (pic, title) in zip(0..<images.count, categories) {
let imageView = UIImageView()
imageView.image = images[pic]
imageView.contentMode = .scaleAspectFill
let xPosition = 110 * CGFloat(pic)
imageView.layer.cornerRadius = 10
imageView.layer.masksToBounds = true
imageView.frame = CGRect(x: xPosition, y: CGFloat(0), width: 100, height: headerView.scrollView.frame.size.height)
//Code zu Erstellung der Maske
let questionLabel = UILabel(frame: CGRect(x: 0, y: 25, width: 100 , height: headerView.scrollView.frame.size.height/2))
questionLabel.text = title
questionLabel.textAlignment = .center
questionLabel.textColor = .white
questionLabel.font = UIFont.boldSystemFont(ofSize: 15.0)
questionLabel.layer.shadowColor = UIColor.black.cgColor
questionLabel.layer.shadowRadius = 3.0
questionLabel.layer.shadowOpacity = 1.0
questionLabel.layer.shadowOffset = CGSize(width: 4, height: 4)
questionLabel.layer.masksToBounds = false
imageView.addSubview(questionLabel)
headerView.scrollView.contentSize.width = 127 * CGFloat(pic)
headerView.scrollView.addSubview(imageView)
}
return headerView
}
@objc func scrollViewTapped(recognizer: UITapGestureRecognizer) {
print("läuft")
}

Alles anzeigen

Der Code zur func scrollViewTapped sah vorher wie folgt aus, jedoch hatte ich damit wenig Erfolg da immer die Meldung kam "found nil while unwrapping an optional value":

Quellcode

@objc func scrollViewTapped(recognizer: UITapGestureRecognizer) {
print("läuft")
let element = TestCollectionReusableView()
element.scrollView.setContentOffset(CGPoint(x: 100, y: 0), animated: true)
}

MCDan · 25. Januar 2019, 22:48

Ist ja logisch, dass der scrollView von element nil ist. Du erzeugst ja auch einen neuen TestCollectionReusableView und verwendest nicht den Scroll View, welcher die Tap Gesture ausgelöst hat.

Schau Dir doch mal das Property view des übergebenen UITapGestureRecognizer an.

ThisIsBeat · 26. Januar 2019, 02:37

Okay macht Sinn jedoch ist dann ja die Frage wie ich in meiner scrollViewTapped Funktion auf eben die ScrollView zugreife welche auch den TapGesture ausgelöst hat ?

MyMattes · 26. Januar 2019, 09:03

MCDan schrieb:

Schau Dir doch mal das Property view des übergebenen UITapGestureRecognizer an.

ThisIsBeat · 26. Januar 2019, 11:21

Oh man sorry, war gestern schon ziemlich spät. Vielen Dank das war genau der Hinweis den ich gebraucht habe

Läuft jetzt wie gewünscht

ThisIsBeat · 26. Januar 2019, 16:00

Okay ich war wohl etwas voreilig und habe gedacht dass das was ich vorhabe etwas einfacher sein würde aber irgendwie brauch ich einen neuen Denkanstoß.

Wie ihr seht lade ich eine Reihe an Bildern in meine ScrollView. Das funktioniert auch alles soweit, doch ich weiß gerade leider nicht wie ich meiner scrollViewTapped Funktion sagen kann welches Bild angeklickt wurde damit sich die ScrollView an eben diese xPosition schiebt...

Hat jemand einen tipp für mich was ich dafür beachten muss ?

So sieht mein Code aktuell aus:

Quellcode

var headerView = TestCollectionReusableView()
var imageView = UIImageView()
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "Header", for: indexPath as IndexPath) as! TestCollectionReusableView
let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(scrollViewTapped(recognizer:)))
tapGestureRecognizer.numberOfTapsRequired = 1
headerView.scrollView.addGestureRecognizer(tapGestureRecognizer)
for (pic, title) in zip(0..<images.count, categories) {
imageView = UIImageView()
imageView.image = images[pic]
imageView.contentMode = .scaleAspectFill
let xPosition = 110 * CGFloat(pic)
imageView.layer.cornerRadius = 10
imageView.layer.masksToBounds = true
imageView.frame = CGRect(x: xPosition, y: CGFloat(0), width: 100, height: headerView.scrollView.frame.size.height)
headerView.scrollView.contentSize.width = 127 * CGFloat(pic)
headerView.scrollView.addSubview(imageView)
}
return headerView
}
@objc func scrollViewTapped(recognizer: UITapGestureRecognizer) {
print("läuft")
headerView.scrollView.setContentOffset(CGPoint(x: 0, y: 0), animated: true)
}

Alles anzeigen

MCDan · 26. Januar 2019, 16:16

Über location(in:) kannst Du z.B. die Position des Taps im ScrollView ermitteln.

Da die Bilder anscheinend alle gleich breit sind, solltest Du berechnen können, welches Bild sich an der Tap Position befindet.

ThisIsBeat · 26. Januar 2019, 18:05

Also quasi so, oder hättest du noch eine bessere Idee ?:

Quellcode

@objc func scrollViewTapped(recognizer: UITapGestureRecognizer) {
var touchPoint = recognizer.location(in: headerView.scrollView)
switch touchPoint.x {
case(0..<110):
headerView.scrollView.setContentOffset(CGPoint(x: 0, y: 0), animated: true)
case(110..<220):
headerView.scrollView.setContentOffset(CGPoint(x: 110, y: 0), animated: true)
case(220..<330):
headerView.scrollView.setContentOffset(CGPoint(x: 220, y: 0), animated: true)
case(330..<440):
headerView.scrollView.setContentOffset(CGPoint(x: 330, y: 0), animated: true)
case(440..<550):
headerView.scrollView.setContentOffset(CGPoint(x: 408, y: 0), animated: true)
case(550..<660):
headerView.scrollView.setContentOffset(CGPoint(x: 408, y: 0), animated: true)
default:
print("nichts passiert")
}
}

Alles anzeigen

MCDan · 26. Januar 2019, 18:46

Na ja, man könnte die gewünschte Position ja auch berechnen.

Quellcode

@objc func scrollViewTapped(recognizer: UITapGestureRecognizer) {
var touchPoint = recognizer.location(in: recognizer.view)
let int pic = touchPoint.x / 110;
recognizer.view.setContentOffset(CGPoint(x: pic * 110, y: 0), animated: true)
}

Swift Syntax musst Du ggf. noch anpassen.