Button auf ImageView platzieren - position egal bei welcher Größe anpassen

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

  • Button auf ImageView platzieren - position egal bei welcher Größe anpassen

    Hallo zusammen,

    Ich stehe aktuell vor einem Problem,

    Ich habe auf einer View eine ImageView. Darauf sollen an verschiedenen Stellen Buttons zur User Interaktion drauf.
    Die Buttons müssen aber egal wie groß das Handy / Das Bild skaliert wird immer an genau dieser Position auf dem Bild bleiben.

    Ich habe leider bis jetzt keinen Lösungsansatz gefunden der mir dabei helfen könnte.

    Als Beispiel was mein Problem aktuell ist habe ich zwei Bilder eingefügt.
    Auf dem ersten Bild (Größe Iphone 11) ist der Button passend auf dem Bild drauf.

    Auf dem zweiten (Größe Iphone SE) allerdings ist der Button nicht mehr da wo er eigentlich sein sollte.

    Ich hoffe dass ihr mir da helfen könnt.

    Gruß
    Dominik
    Dateien

    • Bild1.png

      (138,5 kB, 80 mal heruntergeladen, zuletzt: )

    • Bild2.png

      (110,25 kB, 129 mal heruntergeladen, zuletzt: )

  • Hi,

    Mit AutoLayout habe ich bereits gearbeitet. bzw. legt AutoLayout bei mir fest, dass das Bild immer mittig ist. Es verändert entsprechend die Größe der vertikalen Ebene.
    Aber ich habe es damit nicht geschafft den Button so zu setzen, dass dieser egal wie groß der Bildschirm wird bzw das Bild wird, immer genau auf der selben Position liegt.

  • Wenn die Grafik immer mittig ist, könntest Du doch NSLayoutConstraints verwenden, die den Button abhängig von der Mitte platzieren, oder? Bei komplexeren Abhängigkeiten kannst Du das Constraint bzw. seine Parameter ja auch im Code setzen / anpassen…

    Mattes
    Diese Seite bleibt aus technischen Gründen unbedruckt.

  • Hallo Mattes,

    Das Bild ist grundsätzlich immer Mittig zumindest in der Horizontalen Ebene.
    In der Vertikalen Ebene ist das Bild aber von Rand zu Rand gesetzt und verändert sich entsprechend nach Größe des Bildschirms.
    Mit NSLayoutConstraints habe ich noch nie gearbeitet, wie gehe ich da am besten vor und kann es die relative Größe des Bild erkennen bzw. mit einbeziehen.

    Wenn ich das im Code löse, weiß ich leider nicht wo genau der Button hin muss, da ja die Größe des Bildes abhängig von der Höhe des Bildschirms ist.

  • FSProgramming schrieb:

    Wenn ich das im Code löse, weiß ich leider nicht wo genau der Button hin muss, da ja die Größe des Bildes abhängig von der Höhe des Bildschirms ist.
    Ein NSLayoutConstraint stellt immer eine Gleichung im Sinne y = m * x + b zwischen zwei UI-Elementen auf. Im einfachen / eindeutigen Fall - und ich lasse jetzt bewusst Prioritäten weg - definierst Du für jedes Element vier Beziehungen, die Höhe, Breite sowie die Lage horizontal und vertikal beschreiben. Daraus ergibt sich ein Gleichungssystem, aus welchem AutoLayout die Position und Größe aller Elemente ermitteln kann.

    Durch den Faktor der obigen Gleichung kannst Du auch prozentuale Verhältnisse definieren. So könnte ein Button z. B. 6% der Höhe der Grafik haben und 20% der Breite. Ausserdem sollen alle Buttons einen gleichmäßigen horizontalen Abstand haben und horizontal mittig platziert werden ... nur als Beispiel.

    Das Ganze ist letztlich eine Knobelaufgabe, wobei das größte Problem werden dürfte, keine widersprüchlichen Constraints zu definieren (bzw. dann über Prioritäten eine Lösbarkeit des Gleichungssystems zu gewährleisten). In Deinem Fall sollte es aber (ohne logischem Fehler) einen derartigen Konflikt nicht geben, da die Position aller Elemente eindeutig bestimmt werden kann.

    Viel Spass beim Tüfteln mit einem Berg von Constraints. Vielleicht hat ja jemand eine bessere Idee...

    Mattes
    Diese Seite bleibt aus technischen Gründen unbedruckt.

  • Alternativ könntest Du das Bild in verschiedene Bereiche zerlegen und diese dann mit entsprechenden Layout Constraints so anordnen, dass die einzelnen Bilder wieder das Gesamtbild ergeben.

    Evtl. sollte es auch reichen einen Layout View zu verwenden, welcher sich wie das Bild in dem Image View bei unterschiedlichen Bildschirmen verhält. Die einzelnen Sub Layout View, z.B. für den Bereich des Displays oder der Tastatur könntest Du dann über proportionale Größen des "Master" Layout Views positionieren.

    Für die Tasten würde es sich evtl. auch anbieten, diese aus dem "Hintergrund" Bild zu entfernen und als einzelne Images für die jeweiligen UIButtons zu verwenden. Dies würde auch besser aussehen, wenn man die "Taste" bzw. den Button betätigt, da Du dann ggf. ein alternatives Image verwenden könntest.

  • Wie ist das? - Das Seitenverhältnis bleibt gleich und die Skalierung ist bekannt. Somit kennst Du auch die Position und Größe der Taste 1.


    Vielleicht könnte ein Format wie SVG einen Mehrwert bieten, wenn man hier Platzhalter z.B. Für die Taste 1 definieren kann. Dann wäre die Information der genauen Position nicht im Code sondern im Bildformat.