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

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.

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

Lub zmniejsza:

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:

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!

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:

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:

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:

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

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:

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:

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ść”:

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.

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:

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:

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: