CoverFlow View (selber) programmieren

Für ein aktuelles iPhone Projekt benötigte ich dringend ein CoverFlow View. Aber genau danach sucht man auf den Apple Entwickler Seiten, im Beispielcode und auch in Google Search mehr oder weniger vergebens. Blieb also nichts anderes übrig, als so ein Custom View selber zu schreiben. Der grösste Vorteil dabei ist das von Mac OSX her bereits bekannte Core Animation Framework, das es in (fast) identischer Form auch für’s iPhone gibt. Theoretisch sollte eine Umsetzung also relativ einfach sein… War es dann eigentlich auch, mit einigen ganz kleinen Hürden, die sich zwischendurch ergaben. Bei einem solchen Vorhaben hat sich bei mir immer das folgende Vorgehen bewährt.

Zerlegen des gesamten Control’s in die einzelnen Bestandteile (Layer, Subviews, Aufbau etc.). Macht man das für ein CoverFlow, so besteht dieses prinzipiell aus zwei Komponten:

Zum einen aus dem View selber (in dem sich das Geschehen abspielen soll) und zum anderen aus einzelnen Covers (oder generell Images), die mehrfach vorkommen, ein Bild enthalten und sich an drei Positionen befinden kann. Das einzelne Cover wiederum besteht aus dem Bild selber und einem Spiegelbild (Reflection). Bisher also alles Komponenten, die im iPhone SDK vorhanden sind. Das einzige was nicht standardmässig vorhanden ist, ist die Reflection, zudem fehlen hier die von Mac OSX bekannten Filter. Aber das lässt sich umgehen. Die Struktur des Controls (und damit auch der Aufbau der Klasse) wäre nun also soweit klar und ist in nachfolgender Abbildung noch ein wenig genauer (technisch detaillierter) abgebildet.

Der Code, der notwendig ist, um den View zum Leben zu erwecken, könnte also wie folgender Pseudocode aussehen:

for all images {
 create a cover layer {
  create an image layer and add it to the cover layer
  create a reflection layer and add it to the cover layer {
   add a reversed image
   add a gradient
  }
 }
}

Position the cover layer at left, center or right position

if (cover is at left or right position) {
  make a transformation of the cover view
  re-position each cover
  transformation again
}

Eigentlich ganz einfach oder? Ich hoffe, dass die Gedankengänge nachvollziehbar sind und genug Anregung bieten, einen CoverFlow View selber zu programmieren.  Auf das eine oder andere Thema werde ich in künftigen Einträgen sicher noch ein wenig näher eingehen. Viel Spass beim nachprogrammieren!