Anfänger: Constrains machen mich wahnsinnig.... :-(

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

  • Anfänger: Constrains machen mich wahnsinnig.... :-(

    Hallo allesamt,

    nun habe ich den Code für die Ansicht im iPhone 11 optimiert und möchte nun auch das Querformat unterstützen.
    Dann natürlich auch die iPhones bis hinab zum iPhone SE.

    Ich habe mit die Lessons zu den constrains von Ralf Ebert angesehen. Beim Lesen ist alles klar. Wenn ich dann anfange da Beziehungen herzustellen, kommt immer nur Murks heraus.
    Dann habe ich ein Layout, welches Hoch und Quer funktioniert, das ist dann auf einem andern Gerät die UI-Hölle :)
    Ich sitze nun schon eine Woche und versuche das vernünftig hin zu bekommen. So langsam verzweifel ich.

    Was ich z.B. überhaupt nicht schaffe, ist es, das einige Labels im Querformat an völlig anderer Stelle sein sollen.
    Ich habe mal Screenshots (extra Testprojekt, zur Veranschaulichung) angefügt. Ich habe absichtlich keinen Code oder das Projekt angehängt, damit niemand meint, ich wolle hier das Projekt zum "fertig machen" reinstellen ;) Ich will das schon selber machen :) Ich würde das Projekt aber auch hier hochladen.


    Was mich als erstes interesssiert: Hattet ihr auch als Anfänger damit Probleme? Ich komme mir so richtig doof vor :( Das Projekt läuft soweit, nur die Optik bekomme ich nicht hin.

    Gibt es irgendwo ein gutes Tutorial für Noobs?? Deutsch wäre super, englisch wäre auch ok.

    Vielen Dank fürs unter die Arme greifen :)
    Udo


    PS: Ich überlege schon, für diese erste App bezahlte Hilfe bei der Constrain-Erstellung in Anspruch zu nehmen. Damit ich sehe und davon lernen kann, wie Profis es machen.



    [Blockierte Grafik: https://files.macsudo.de/Screen2-2.jpg] [Blockierte Grafik: https://files.macsudo.de/Screen1-2.jpg]
  • Ich muss gestehen, das mich Constraints auch teilweise wahnsinnig machen. Trotzdem habe ich den Ehrgeiz, sie zu nutzen und nicht z. B. auf altmodisches Autosizing zurückzugreifen.

    Meine Probleme liegen meist an zu restriktiven Vorgaben, in denen ich versuche, jedem UI-Element die maximalen Informationen mitzugeben (x- / y-Anfang und -Ende oder Breite/Höhe). Dann kommt es schon einmal in Abhängigkeit mit anderen Elementen zu Konflikten: Es finden sich häufig überflüssige Constraints oder man muss sie anders priorisieren.

    Überlege Dir, was wirklich zwingend ist, z. B. Element A leading, Abstand A-B, Element B trailing. Ich würde die UI-Designs einfach einmal mit ihren Abhängigkeiten aufmalen, das hilft mir beim Verständnis.

    Sorry, dass ich Dir kein Patentrezept geben kann, Mattes

    Edit: Wirre Typos korrigiert ... und ja, ich erstelle Constraints auch 100% im Code :)
    Diese Seite bleibt aus technischen Gründen unbedruckt.

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

  • Ich habe das so für mich verstanden:

    Für ein View sind immer 4 Constraints zu setzen, und hier gibt es 2 Möglichkeiten:

    1. Die linke obere Ecke als Startpunkt festlegen, also in den Constraints den oberen und den linken Wert festlegen (es ist zu beachten, ob die Werte sich auf den Rand des Displays oder ein anderes view beziehen). Dann als Endpunkt die rechte untere Ecke, also in den Constraints den unteren und rechten Wert festlegen. Hiermit passt sich das view an die Größe des Device an.

    2. Die linke obere Ecke als Startpunkt festlegen, dann mit width und height die Breite und Höhe des View festlegen. Damit erstellst Du ein „starres“ view, dessen Größe auf jedem Gerät gleich bleibt.



    Weiterhin kannst Du mit den Alignments arbeiten, also die Punkte „vertically in container“ oder „horizontally in container“. Wenn Du mit einem von diesen arbeitest, dann sind für ein view immer 3 Constraints zu setzen, also das alignment und dann der Wert für oben+unten oder für links+rechts.
  • Danke für Eure Tipps!
    Ich bleibe dran. Habe mir schon das Buch "Enzykolpädie der psychoaktiven Pfanzen" gekauft und gehe nun schon etwas ruhiger und gelassenen an das Thema :)
    Ist also nichts, dass man mal so "eben macht und gut ist es". Dachte schon, ich hätte einen Klops im Kopf.

    Wenn ich das Layout in den Griff bekommen habe, melde ich mich hier.

    Vielen Dank an Alle!
    Udo
  • kbausd schrieb:

    Ich habe das so für mich verstanden:

    Für ein View sind immer 4 Constraints zu setzen, und hier gibt es 2 Möglichkeiten:
    Für das Grundverständnis okay, behaltet nur im Hinterkopf, dass "immer" hier nicht stimmt: Man kann z. B. auch zusätzliche Constraints definieren, die Verhältnisse von View-Breiten abbilden. Oder Constraints können sich auf View-Subclasses beziehen, die aufgrund ihrer Implementierung die Größe verändern (z. B. UITableViewCell) ... dann sollte man sogar weniger Constraints verwenden, um nicht mit diesem Resizing zu kollidieren.

    Grundsätzlich aber richtig, wobei die Bezugsobjekte auch UILayoutGuides z. B. für die SafeArea sein können.

    Mattes
    Diese Seite bleibt aus technischen Gründen unbedruckt.
  • Einige Fragen hätte ich da:

    du bist Anfänger und willst dein erstes Projekt erstellen, bist nicht gebunden an alte Architekturen, die du pflegen musst. Warum UIKit und nicht SwiftUI? UIKit ist bei einer App mit deinen Anforderungen, eher nicht mehr die erste Wahl.


    Warum machst du dir es so schwer und bietest auch Querformat an, wenn im Grunde das selbe angezeigt wird? Du erschwerst die Entwicklung ungemein und der Nutzer weis es meist nicht mal zu schätzen, denn er nimmt es nicht wahr oder es ist ihm zu umständlich das Gerät zu drehen.

    Constraints sich zu erarbeiten > das macht schon Sinn, wenn es um Weiterführung von UIKit-Projekten geht > nur das braucht Zeit und Erfahrung > diesen Aufwand würde ich vor den Hintergrund von SwiftUI einfach nicht mehr investieren.


    hier zwei Tips:

    - um nicht komplett irre zu werden > Constraints nicht im Storyboard machen > am Besten komplett im Code
    - hier ein netter Helfer für Constraints Error wtfautolayout.com/
  • Von den Screenshots her vermute ich, dass die fraglichen Label gruppiert sind
    je zwei in horizontalem Stack und davon je vier in einem vertikalen.
    Dann diese beiden in einem weiteren Stack, der für landscape horizontal ist.

    Mir ist aber nicht klar, was genau am Screenshot verkehrt ist.
    Welche Labels werden falsch positioniert? Und welche Constraints sind dort aktiv?

    Noch zur Info: ich mache immer wieder die Erfahrung, dass die Entwicklung
    an unerwarteter Stelle deutlich länger dauert. Das ist zumeist mangelnde Erfahrung
    und selten auch der Umstand, dass manches einfach nicht vorgesehen ist.