Kwadratowy interfejs użytkownika, który wypełnia szerokość LUB wysokość


11

Próbuję utworzyć tablicę z tymi wymaganiami:

  • MUSI być kwadratowe.
  • MUSI pasować do dostępnej szerokości LUB wysokości.
  • MUSI być wyśrodkowany na płótnie.
  • MOŻE być zawinięty w tyle dodatkowych płócien pośrednich, ile potrzeba.

Bawię się kotwicami, ale nie znajduję żadnej kombinacji, aby to zrobić. Jedynym rozwiązaniem, jakie mogę wymyślić, jest napisanie jakiegoś „OnResize” kontenera i programowe ustawienie wielkości planszy.

To jest oryginalny układ. (1) jest BoardCanvas. (2) jest zarząd.

Oryginalny układ

Chcę, aby jeśli ekran stał się wyższy, kwadrat rośnie, ale wciąż jest kwadratowy:

wprowadź opis zdjęcia tutaj

Lub zmniejsza:

wprowadź opis zdjęcia tutaj

Ale chociaż te poprzednie przykłady przyciągają się do górnej i dolnej krawędzi, chcę również, aby jeśli przestrzeń pionowa stała się wyższa niż dostępna szerokość, to kwadrat ogranicza swój rozmiar w zależności od lewej i prawej krawędzi:

wprowadź opis zdjęcia tutaj

P1: Czy można to zrobić za pomocą kotwic / czopów? Mogę tworzyć płótna pośrednie między BoardCanvas a samą tablicą, jeśli to działa.

P2: Jeśli tak, to gdzie powinienem ustawić kotwice? Czy potrzebuję pośrednich obiektów?

P3: Jeśli nie, czy skrypt jest rozwiązaniem? Czy na płótnie jest jakiś element OnResize? Nie widzę żadnego zdarzenia zmiany rozmiaru na liście, ale może nie wiem, gdzie go szukać. Wydaje mi się, że testowanie go przy każdej klatce wydaje się nieco przesadne, a zdarzenie wydaje się lepsze.

Dzięki!

Odpowiedzi:


13

Wreszcie znalazłem sposób, aby to zrobić (przetestowane w wersji 5.0.0), w taki sposób, że:

  • Nie wymaga kodu ani warunków warunkowych, aby sprawdzić orientację.
  • Nie hakuje za pomocą skal i nie wymaga rozdzielczości odniesienia.

W samouczkach wideo z interfejsem użytkownika brakuje dużej części, chociaż dobrze udokumentowanej w dokumentacji tekstowej: system „auto-układów”.

Autoukłady to mechanizmy wykonane z „układów” i „kontrolerów układu”. Kontrolery układu są komponentami, które można podłączyć do obiektu gry interfejsu użytkownika. Kontrolery mogą Rect Transforminteligentnie zmieniać rozmiar .

Niektóre kontrolery mogą zmieniać rozmiar obiektu, do którego komponent jest stosowany, podczas gdy inne kontrolery mogą zmieniać rozmiar elementów potomnych tego obiektu.

Jest kilka wbudowanych kontrolerów. Jednym z nich jest Aspect Ratio Fitter.

Najpierw wybieram Boardpanel i dołączam nowy Aspect Ratio Fitterkomponent:

wprowadź opis zdjęcia tutaj

Aspect Ratio FitterWydaje się zmierzać do „utrzymać” chcieli proporcje obiektu. Aby to zrobić, można ustawić obiekt tak, aby „owijał” obiekt podrzędny (zachowując proporcje), albo ustawić powiększanie i dopasowywanie kontenera (przy zachowaniu proporcji).

Następnie wybieram Fit In Parentopcję i określam, że chcę uzyskać idealny kwadrat, ustawiając żądany współczynnik kształtu na 1:

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj

Daje to układ bardzo podobny do tego, który chciałem, ale nie musiałem podawać planszy jego wymiarów. Ale nadal wie, że musi być kwadratowy, jak pokazano:

wprowadź opis zdjęcia tutaj

Jeśli zmniejszę się w pionie lub rozwinę, kwadrat podąży za rodzicem, zachowując proporcje:

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj

Magicznie, gdy zmiana polega na zmniejszeniu szerokości, nie ma skryptu do dołączenia i właściwości do zmiany, ponieważ „Monter proporcji” robi to za nas automatycznie:

wprowadź opis zdjęcia tutaj

Wreszcie, jak chciałem trochę marginesu tam, po prostu połóż rect pojemnik przekształcać, który działa jako przekładki i przenieść Boardz BoardCanvasInto the MarginCanvas:

wprowadź opis zdjęcia tutaj


Ach, świetnie, to wygląda na doskonałe rozwiązanie. Cieszę się, że go znalazłeś, dzięki za udostępnienie!
Chris McFarland

3

Jest to możliwe, ale prawdopodobnie z niewielkim wierszem kodu lub dwoma do określenia, czy ekran jest poziomy czy pionowy i zmiany kilku wartości.

Na kanwie musisz ustawić tryb skalowania interfejsu użytkownika Canvas Scalera na „Skaluj z rozmiarem ekranu” i ustawić „Tryb dopasowania ekranu” na „Dopasuj szerokość lub wysokość”:

wprowadź opis zdjęcia tutaj

Zakładając, że używana jest domyślna rozdzielczość odniesienia 800 x 600 i przy założeniu, że rzutnia ekranu jest pozioma (np. Screen.widthJest większa niż Screen.height), suwak Dopasuj musi być ustawiony aż do wysokości as 1.

Będziesz wtedy chciał mieć obraz na płótnie, korzystając ze środkowego / środkowego ustawienia wstępnego kotwicy. Chcesz również, aby szerokość i wysokość obrazu były zgodne z wartością Y rozdzielczości odniesienia Canvas Scalera.

wprowadź opis zdjęcia tutaj

Następnie możesz zmienić rozmiar rzutni kamery i zobaczyć, że obraz zachowuje swój kształt, jednocześnie rozciągając jego wysokość, aby dopasować do wysokości rzutni:

wprowadź opis zdjęcia tutaj


Jeśli ekran jest pionowy - i tam prawdopodobnie będziesz musiał kodować, aby sprawdzić i / lub zmienić zgodnie z wymaganiami - musisz ustawić wartość Dopasowania skalera na 0, a także zmienić wysokość i szerokość obrazu, aby dopasować rozdzielczość odniesienia Wartość X (na poniższych zdjęciach szerokość i wysokość obrazu są oba 800)


Jeśli próbujesz dopasować mniejszy obraz do środka, możesz „skalować” obraz, dostosowując jego szerokość i wysokość do wartości X lub Y rozdzielczości odniesienia (w zależności od krajobrazu lub portretu). Na przykład zrobiłem niebieski kwadrat, który wykorzystuje połowę wartości X Rozdzielczości odniesienia (ponieważ rzutnia jest pionowa), i ładnie skaluje się i kurczy:

wprowadź opis zdjęcia tutaj

Ponadto, jeśli chcesz szachownicę lub coś w tym stylu, położenie X i Y każdego obrazu oraz wysokość i szerokość mogą być oparte na wartości procentowej rozdzielczości Canvas Scalera, aby zrobić co chcesz:

wprowadź opis zdjęcia tutaj


1
Dzięki Chris za bardzo szczegółową odpowiedź. Wreszcie znalazłem rozwiązanie, które nie wymaga żadnej linii kodu do sprawdzania orientacji, i nie hakuje za pomocą skal i nie używa rozdzielczości odniesienia. Zamierzam opublikować własną odpowiedź, ale nie chciałem przekazywać bez podziękowania za twój wysiłek i ilustrację.
Xavi Montero
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.