Horizontale Scrollview mit Bildern in iOS

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Horizontale Scrollview mit Bildern in iOS

    Hallo zusammen,

    bin gerade dabei meine Android-App auch für iOS zu entwickeln. Nun bin ich auf folgendes Problem gestoßen.
    Meine App soll eine View enthalten, bei der auf dem oberen Drittel Bilder dargestellt werden sollen, durch diese Bilder soll man durchscrollen oder ähnliches können.
    Unter den Bilder gibt es noch eine Textview und einen Button.

    Was habe ich den in iOS hier für Möglichkeiten ?( ? (In Android habe ich eine Scrollview, in welche in nacheinander meine Bilder reinziehe)

    Vielen Dank schonmal für eure Hilfe! ?(
  • nussratte schrieb:

    collectionview

    da kannst du dann drin UICollectionViewCells anlegen in denen du wiederrum UIIMageViews hast und dadrunter UITextViews


    d.h. ich mache in meinem Storyboard folgendes:

    1. ich erzeuge einen neuen CollectionView-Controller
    2. Ich mache zwei Zellen da hinein, eine für die Bilder und eine für die Textview

    Wie soll ich das mit den Bildern machen? also wie bekomme ich es hin, das ich mehrer Bilder in diese "Bild"-Zelle einfüge und dann zwischen diesen scrollen bzw. wechseln kann?

    @ MCDan:
    d.h. ich packe eine Scrollview in meinen ViewController, also über meine TextView und wie kann ich nun mit mehreren Bildern verfahren?
    Soll ich die Bilder einfach via Photoshop zu einem großen Bild machen, durch das man dann horizontal scrollen kann?
  • MCDan schrieb:

    Wie hast Du dies in der Android-App gemacht?

    Ich kenne Android nicht, aber ich tippe jetzt einfach mal, dass die Lösung unter iOS sehr ähnlich aussehen wird. ;)



    Also in Android wird das UserInterface via XML formatiert: d.h. ich nehme eine Scrollview und packe dort sachen hinein. In meinem Fall ein LinearLayout (Sorgt für eine Darstellung in einer Reihe, also nacheinander)
    In dieses LinearLayout habe ich dann meine versch. Bilder gepackt.

    Bsp:

    Quellcode

    1. <HorizontalScrollView>
    2. <LinearLayout>
    3. <Bild1 />
    4. <Bild2 />
    5. <Bild3 />
    6. <LinearLayout />
    7. <HorizontalScrollView/>
  • Ich bin mir über deinen Aufbau noch nicht sicher.
    Hast du pro Bild einen Text (Bildbeschreibung o.Ä.) und einen Button die mitscrollen?

    Du musst die Bilder nicht zu einem machen. Ein Collectionview ist ja nicht nur zum scrollen da (dafür reicht eine UIScrollView), sondern um mehrere Elemente darzustellen, ähnlich einer TableView.
    Nur kann eine CollectionView ein flexibleres Design ermöglichen (z.B. horizontales scrollen oder eine Grid-Ansicht.

    Du brauchst eine UITableViewCell welche EIN Element deiner scrollbaren Liste darstellt.
    Also falls ein Element aus Bild + Text + Button besteht würdest du in die UITableViewCell eine UIImageView, ein UILabel und einen UIButton legen.
    Im Interfacebuilder brauchst du dazu nur eine Zelle anlegen, da alle Zellen den selben Aufbau haben werden.

    Die DataSource (der UICollectionViewController) bestimmt dann wieviele Elemente es gibt (collectionView: numberOfItemsInSection:)
    und welches Bild in welcher Zelle landen soll (collectionView: cellForItemAtIndexPath:)

    Dazu z.B. eine SubClass von UITableViewCell erstellen welche du dann in der CollectionView verwendest .
    Dieser gibst du ein IBOutlet auf das Label und die UIImageView.
    In collectionView: cellForItemAtIndexPath: kannst du der Cell dann mit cell.label.text = @"BlabBla" und cell.imageView.image = [myImageArray itemAtIndex:indexPath.row] oder Ähnlichem die Daten zuweisen.

    Für horizontales statt vertikales Scrollen gibt es einen Haken im Interface Builder.
  • Noch ein kleiner Nachtrag, hab dir kurz Apples SimpleCollectionview Beispiel so angepasst, dass die CollectionView nicht mehr Fullscreen ist und auch horizontal scrollt.
    Da kannst dir die Funktionsweise mal anschauen:

    dl.dropboxusercontent.com/u/55…CollectionView-Simple.zip

    An sich siehst du dort, dass du normal auch keinen Button brauchst in einer CollectionView.
    Durch einen Tap auf eine Zelle kann automatisch eine Aktion ausgeführt werden.
    Entweder indem man eine Verbindung im Interface Builder von der Zelle zu einem neuen ViewController zieht und dort z.B. "modal" als Darstellungsmethode wählt,
    oder als Delegatemethode deines UICollectionViewControllers (collectionView: didSelectItemAtIndexPath: ).
  • Vielen Dank schon mal für eure Hilfe.

    Das ganze soll folgendermaßen aussehen:

    [Blockierte Grafik: http://s7.directupload.net/images/140726/bq5p7wxe.png]
    also mehrer Bilder, die die jeweils die gesamte Breite einnehmen.
    Ein einziger Text und ein einziger Button.
    Man soll also nur durch die Bilder scrollen oder irgendwie anders wechseln können.
    (Meine Idee war nun alle drei Bilder zusammen zu fügen und dann in eine Scrollview zu packen)

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von basti12354 ()

  • Also kommt Button und Text nicht mit in die Scrollview/Collectionview, sondern darunter.

    Sind es denn nur 3 Bilder?
    Wenn ja lohnt sich der Aufwand mit der Collectionview nicht.
    Sind es sehr viele Bilder, dann ist die Lösung mit der CollectionView einfacher.

    Wenn es nur 3 sind:
    Eine Scrollview und 3 UIImageViews.
    bei Imageview 2 und 3 das Frame eben so anpassen, dass sie weiter recht liegen als Imageview1 (wie in deinem Bild).
    Dann musst du die Bilder dennoch nicht zu einem machen.
  • Ja Button und Text sollen darunter sein.

    Das Maximum an Bildern ist 5 Stück.

    "Eine Scrollview und 3 UIImageViews.bei Imageview 2 und 3 das Frame eben so anpassen, dass sie weiter recht liegen als Imageview1 (wie in deinem Bild)."
    Du meinst ich soll ScrollView einfach größer ziehen, damit ich drei Bilder nebeneinander legen kann?
  • Tobse001 schrieb:

    Nein, die Scrollview soll schon so groß bleiben, sonst kannst du ja nicht mehr scrollen.
    Der Witz an der Scrollview ist ja gerade, dass ihr Content größer sein soll als ihr Frame.
    Nur dann kannst du scrollen.

    developer.apple.com/library/io…d/TP40012857-UIScrollView


    Hab das ganze jetzt gerade nochmal ausprobiert. Mein Problem ist noch, das die Bilder jeweils von der Breite genauso breit sind wie die ScrollView in der sie liegen. Ich habe das mal mit einem großen BIld versucht, das funktioniert schon.
    Wie bekomme ich es jetzt noch hin, dass es zwischen den einzelnen Bildern scrollt bzw. wechselt.
  • basti12354 schrieb:

    Hab das ganze jetzt gerade nochmal ausprobiert. Mein Problem ist noch, das die Bilder jeweils von der Breite genauso breit sind wie die ScrollView in der sie liegen. Ich habe das mal mit einem großen BIld versucht, das funktioniert schon.
    Wie bekomme ich es jetzt noch hin, dass es zwischen den einzelnen Bildern scrollt bzw. wechselt.


    Das ist doch auch richtig so. Die Scrollview ist genausobreit, wie der Screen und wie ein Bild. Jetzt packst Du die anderen Bilder rechts daneben.
    Ich bin gegen Signaturen!!!
  • basti12354 schrieb:

    Tobse001 schrieb:

    Nein, die Scrollview soll schon so groß bleiben, sonst kannst du ja nicht mehr scrollen.
    Der Witz an der Scrollview ist ja gerade, dass ihr Content größer sein soll als ihr Frame.
    Nur dann kannst du scrollen.

    developer.apple.com/library/io…d/TP40012857-UIScrollView


    Hab das ganze jetzt gerade nochmal ausprobiert. Mein Problem ist noch, das die Bilder jeweils von der Breite genauso breit sind wie die ScrollView in der sie liegen. Ich habe das mal mit einem großen BIld versucht, das funktioniert schon.
    Wie bekomme ich es jetzt noch hin, dass es zwischen den einzelnen Bildern scrollt bzw. wechselt.

    Suchst Du evtl. das Property pagingEnabled? Damit stellt man den ScrollView so ein, dass dieser jeweils Seitenweise scrollt.
  • Hab es hinbekommen:

    Anleitung:
    1. h-File:

    @property (weak, nonatomic) IBOutlet UIScrollView *scroller;

    2. im m-File in der ViewDidLoad:

    [scroller setScrollEnabled:YES];
    [scroller setContentSize:CGSizeMake(640, 190)];
    //640 -> weil ich 2 Fotos mit je 320 Breite habe, 190 ist meine Höhe

    3. ViewController anwählen -> Connections Inspector -> Outlets: von hier scroller auf ScrollView ziehen

    4. Use-Autolayout Haken muss weg!!

    5. ScrollView paging enabled !


    Danke an alle für die Hilfe!!!!