Xcode Autolayout ImageView exakt auf anderem ImageView positionieren

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

Macoun 2019 - Frühbucherrabatt bis 26.7.2019

  • Xcode Autolayout ImageView exakt auf anderem ImageView positionieren

    Hallo,
    ich bin noch recht neu in der IOS-Entwicklung und bräuchte daher mal eure Hilfe. Bei meiner neusten App möchte ich ein kleines Bild auf einem größeren Bild positionieren. Dieses soll natürlich bei allen Geräten an der selben Stelle zu finden sein. Mein Problem besteht darin, dass es mir nicht gelingt das kleine Bild so mit Constraints zu versehen, dass es auf allen Geräten an der selben Stelle erscheint. Mit dem Autoresizing sieht es auf fast allen Modellen gut aus, nur auf den Geräten iPhone X, Xr, Xs etc. ist das kleinere Bild ein bisschen zu weit unten und auch gestreckt (ich nehme an, dass dies an dem anderem Displayformat liegt). Ich fange so langsam an zu verzweifeln und brachte daher dringend eure Hilfe. Grundsätzlich bin ich aber der Meinung, dass ich das Autolayout soweit durchschaut habe.

    Ich hoffe auf baldige Hilfe

    Felix
  • Mac & i Test Abo
  • Ich bin nicht sicher, Deine Anforderungen genau verstanden zu haben: Die kleiner View A soll eine konstante Größe behalten und die Abstände zu den Rändern der größeren View B sollen auf allen Geräten die gleichen Verhältnisse haben?

    Dann würde ich vier Constraints verwenden:
    1. Beschreibung der Breite von A
    2. Beschreibung der Höhe von B
    3. Linker Abstand A-B im Verhältnis zum rechten Abstand A-B, zum Beispiel 1:2
    4. Oberer Abstand A-B im Verhältnis zum unteren Abstand A-B, zum Beispiel 1:2
    Ich kämpfe immer damit, Constrains im IB zu definieren und würde es daher im Code machen ... eigentlich sind diese ja nur ein Gleichungssystem mit mehreren Gleichungen y = m * x + b, x und y sind hierbei Ankerpunkte oder Ausdehnungen der beteiligten Views. Im o. g. Fall mit einer eindeutigen Lösung und das Layout sieht auf allen Geräten gleich aus.

    Mattes
    Diese Seite bleibt aus technischen Gründen unbedruckt.
  • Du sagst leider nicht, was du mit „der selben Stelle“ meinst. Abgesehen davon, dass eher der Term „der gleichen Stelle“ sinnvoller ist, ist ja gerade das Problem, dass unterschiedliche Bildschirmgrößen eben die Stellen nicht gleich sein können.

    Wie dem auch sei, nach deiner Beschreibung würde ich dem kleineren View eine feste Größe geben, und entweder die horizontalen bzw. vertikalen Mittellinien mit oder jeweils einen Rand mit dem größeren View ausrichten. Wenn du die Mittellinien verwendest, ist das kleine genau im großen Bild zentriert.
    „Meine Komplikation hatte eine Komplikation.“
  • Zuerst einmal vielen Dank für die schnelle Hilfe!

    Ich muss zugeben, dass ich mein Problem nicht präzise geschildert habe. Darum jetzt die Ergänzung:

    Die roten Punkte (die im ersten Post beschriebenen kleineren ImageViews) sollen auf dem Schiff platziert werden. Sie sollen mit vergrößert werden. Am Schiff sollen die Punkte auf bestimmte Dinge zeigen. Wenn der Punkt auf einem iPhone 5 auf das Segel zeigt und bei einem iPhone XS auf ein Fenster dann macht meine ganze App keinen Sinn. Wie man dem Bild entnehmen ist es daher auch nicht möglich die Punkte an der Mitte auszurichten.

    Wie muss ich das in diesem Fall machen? Und noch so eine generelle Frage: Welches iPhone habt ihr in Xcode ausgewählt um die GUI zu erstellen?

    Gruß Felix
  • Setze z. B. NSLayoutContraints, die zwischen beiden Bildern die Position zum linken / oberen Rand mit dem Faktor 1 und einer dem Abstand entsprechenden Konstanten definieren.

    Sinngemäß also:

    <grosses Bild>.topMargin = 1 * <kleines Bild>.topMargin + 200.0f

    Wie gesagt nur das Prinzip. Das geht im IB (achte auf Auswahl der richtigen Views) oder per Code.

    Das gleiche für die seitliche Ausrichtung. Und feste Breiten, damit die Views nicht skaliert werden.

    Das ist mit anderen Worten aber meine Antwort von oben, Mattes
    Diese Seite bleibt aus technischen Gründen unbedruckt.
  • So... ich habe es jetzt geschafft, dass das kleinere Bild (ich habe es jetzt noch ein bisschen erweitert und alles in ein neues View gepackt, aber das Prinzip ist ja gleich geblieben) mit equalWidth/Height und dem richtigen Multiplikator richtig skaliert wird. Dann habe ich noch den Abstand zu dem SchiffsView mit Horizontal und Vertical Spacing eingerichtet. Ich habe überall lediglich mit mehreren Multiplikatoren gerarbeitet und die Konstanten waren null. Ich weiß nicht, ob das richtig war, aber es funktioniert auf allen iPhones mit klassischem Display (iPhone 5, 6, 6plus etc. siehe Foto 1). Nur auf den iPhones X, Xs, Xr etc. ist der kleinere View ein Stückchen zu weit oben (siehe Foto 2). Das ganze habe ich auf einem iPhone SE erstellt.

    Ich bin komplett ratlos, zumal das Bild sein Seitenverhältnis beibehalten hat und hoffe das mir jemand helfen kann.

    Gruß Felix





  • Xilef Bo schrieb:

    Nur auf den iPhones X, Xs, Xr etc. ist der kleinere View ein Stückchen zu weit oben (siehe Foto 2). Das ganze habe ich auf einem iPhone SE erstellt.
    Ohne nun in Deine Contraints einzutauchen - zumindest mir helfen hier Screenshots gar nicht und ich würde komplexere Sachen immer in Code machen: Deine Auflistung der problematischen Devices lässt mich reflexhaft „Notch!“ rufen. Hast Du daran gedacht, bei der Positionierung die „safearea“ zu berücksichtigen?

    Mattes
    Diese Seite bleibt aus technischen Gründen unbedruckt.
  • Vielen Dank für eure Hilfe!
    Ich habe jetzt das Problem gefunden: Ich hatte das Schiff mit einer Constraint nach unten befestigt. Das heißt durch die längeren Displays der neuen iPhones (selbst wenn man die SaveArea berücksichtigt) müssen die vertikalen Koordinaten weiter unten gewesen sein, da ja in der linken oberen Ecke die Koordinate 0/0 ist. So haben sie den Abstand durch den Multiplikator falsch berechnet und das kleinere View war zu weit unten. Jetzt habe ich das Schiff am oberen Rand befestigt und alles ist am rechten Platz. Jetzt ist das Schiff zwar ein bisschen zu weit oben, aber dafür sind die Punkte am richtigen Platz.