Az automatikus elrendezés használata az UIScrollView for iOS rendszerhez

Szeretem az eszközöket szoftverekkel építeni, és ezért vagyok jelenleg a Green 13 Solutions vezető fejlesztője.

A közelmúltban nagyon szórakoztam a Swift és az Xcode Interface Builder segítségével iOS-alkalmazások létrehozásához.

Szembesültem néhány kihívással, amikor olyan jelenetet próbáltam létrehozni, ahol a felhasználók görgetve megtekinthetik az aktuális tartalom nézetben túlcsorduló tartalmat . A tartalom nem gördült megfelelően, és a szöveg nem jelenik meg automatikusan megfelelően a különböző képernyőméreteknél.

Íme néhány megjegyzés a jövőbeli énem számára. Remélem, hasznosnak találja őket is!

Itt van a projekt tárháza, ha meg szeretné tekinteni az elkészült példát.

Amit fel fogunk építeni

Alkalmazásunknak egyetlen oldala lesz. Az oldal tartalmazni fog szöveget, és a felhasználók lefelé görgetve megtekinthetik az aktuális tartalomnézetből túlcsorduló szöveget.

Az Xcode Interface Builder használatával hozzáadunk egy UIScrollView objektumot, egy beágyazott UIView objektumot, majd egy további beágyazott UITextView objektumot. Az Interface Builder segítségével korlátokat adunk ezekhez az elemekhez. A megszorítások azt jelentik, hogy az Automatikus elrendezés lehetővé teszi a görgetés megfelelő végrehajtását, és a Szövegnézet automatikusan megfelelően jelenik meg a különböző képernyőméretekben.

Gyors háttérinformáció (szójáték)

Az UIScrollView objektum szülőobjektumként használható más UIKit elemekhez, például az UIView és az UITextView.

Ez azt jelenti, hogy minden gyermekobjektum eredete együttesen eltolható a felhasználó számára megjelenített tartalom nézethez képest . Ez azt jelenti, hogy a „görgetés” viselkedés a felhasználók elvárásainak megfelelően működik. További előny, hogy az automatikus elrendezés a várakozásoknak megfelelően megfelelően méretezi elemeinket a különböző képernyőkön.

Az alábbiakban felcserélhető módon használjuk az „UIScrollView” és „Scroll View” kifejezéseket, hasonlóan a Nézet és a Szöveg nézethez.

Az alábbiakban bemutatjuk a követendő lépéseket.

Nézet hozzáadása

Hozzon létre új projektet, és válassza az „Single View App” lehetőséget. Ha rákattint a Main.storyboard gombra, és látni fogja, hogy van egy jelenetünk, amely egy üres Nézet elemet tartalmaz.

Görgetés nézet hozzáadása

Húzza a Scroll View UI elemet az Object Library-ből a jelenetbe. Ezután adja hozzá az alábbi képen látható megszorításokat, hogy a Görgetés nézet elemet rögzítse a szülő biztonságos területének széleihez.

Hozzáad egy Nézet elemet

Az Object Library segítségével nézet elemet húzhat a jelenetbe. A Nézet lesz a Szövegnézet elem szülőtárolója.

Manuálisan méretezze át a Nézet elemet a kurzorával, hogy az kitöltse a képernyő szélességét.

Horgony nézet görgető nézethez

Kattintson a View elemre az objektumhierarchiában, és húzza + engedje el a kurzort a hierarchiában felette található Scroll View elemre. A korlátozások alkalmazásához kattintson a 4 legfelső lehetőségre. Kattintson az "Egyenletes szélességek" gombra, hogy alkalmazza ezt a korlátozást is.

Miért? A nézet ilyen módon történő korlátozása azt jelenti, hogy az általunk hozzáadott gyermek Szövegnézet elem megfelelően működik az Automatikus elrendezés funkcióval. Ez azért történik, mert a Szöveges nézetet a Nézet aljára (amelyet megfelelően rögzítettük a Görgetés Nézet aljára rögzítettük!) Szűkítjük, nem pedig közvetlenül a Tekercs Nézet aljára.

Látni fogja, hogy az Interface Builder elrendezési útmutatói pirosak, mert van valami más hiba. Rövidesen megoldjuk ezt.

Szövegnézet hozzáadása gyermekként a Nézethez

Adjon hozzá Szövegnézet elemet a jelenet Nézet eleméhez.

Adjon meg korlátozásokat a Szövegnézetbe

Adja hozzá az alábbi képen látható korlátozásokat a Szövegnézetbe.

Miért? Ez korlátozza a Szöveges nézetet a körülvevő Nézet objektumhoz képest.

Tiltsa le a görgetési viselkedést a Szövegnézetben

Az alábbi képernyőhöz hasonló képernyővel kell rendelkeznie. Láthatja, hogy még mindig sok a vörös az Interface Builderben.

Ezeket a figyelmeztetéseket úgy távolíthatja el, hogy kiválasztja a Szöveg nézet elemet, és törli a jobb oldali szerkesztő ablaktáblán a „Görgetés engedélyezve” jelölést .

Vegye figyelembe, hogy ezzel a megközelítéssel továbbra is gördülési magatartásunk lesz, de valójában a szülő görgetési nézete lesz mozgatva, nem pedig az egyedi Szövegnézet elem . Ugyanaz, mint ahogy egy levél csak egy folyón mozog, mert a körülvevő folyó mozog!

Ez kissé finom, de nagyon fontos megérteni, mivel ez alátámasztja az egész megoldást.

Végül

Adjon hozzá még néhány tartalmat a Szövegnézetbe. Látnia kell, hogy a görgetés a várt módon működik, és hogy a Szövegnézet megfelelően jelenik meg a különböző képernyőméretekben.

Ez az Auto Layout szépsége!

Itt van a projekt tárháza, ha meg szeretné tekinteni az elkészült példát.

A Text View tartalom robinjaival kapcsolatos minden információ közvetlenül a Wikipédiából származik. Köszönet a közösségnek ezért.

Miért robin? Mivel szeretem a madarakat, és a vörösbegy különösen félelmetes lények!

Köszönöm, hogy elolvastad, remélem, hasznosnak találta ezt. Kérjük, tudassa velem, ha kérdése van hozzászólással!