Xcode: Jak dostosować wysokość i wagę komponentów w pikselach?

Question

Dzisiaj jest mój pierwszy dzień korzystania z Xcode i udało mi się stworzyć moją pierwszą pojedynczą aplikację.

Nie mam wcześniej żadnego kontekstu w Objective-C, ale w przeszłości robiłem dużo HTML + CSS. Tak więc, kiedy zaprojektować swój pierwszy pogląd, stworzyłem pierwszy na PSD potem wyciąć kawałek po kawałku na tle pola tekstowe, przycisk obrazu itp

ale co znalazłem dzisiaj jest dość ciekawe ...

Mam obraz PNG o wymiarach 483 x 82 pikseli, ale gdy używam go jako tła pola tekstowego, widzę w oknie Inspektora rozmiarów jego rozmiar wynosi 240 x 40. Nie wiem, jak Xcode to mierzy, ale uważam, że nie jest to piksel. I zaskakująco, jest dokładnie taki sam, jak widzę na pliku PSD.

Moje pytanie brzmi: jak mieć taką samą szerokość i wysokość dla dowolnych komponentów Xcode w pikselach?

dziękuję ...

PS: oto zrzut ekranu z mojego przycisku i jego wielkości:

i oto co mam na Xcode, że na prawej zakładce strona inspektora muszę mieć 240 i 40 dla szerokości i wysokości, zamiast 483 i 82 pikseli:

jeśli umieściłem prawdziwy piksel (483x82) na tej zakładce inspektora, przycisk będzie bardzo duży na ekranie iPada.

Answer 1

Po pierwsze, pewne ogólne tło dotyczące zakaz siatkówki i siatkówki obrazów w iOS:

• iPhone 3GS i starszych, iPad 1, iPad 2 i iPad mini (by wymienić tylko kilka) użyć obrazów nie-retina. Oznacza to, że wyświetlany obraz będzie wyświetlany na tej samej szerokości i szerokości w pikselach.

• iPhone 4+ i "nowy iPad" (iPad 3) używają obrazów siatkówki. Oznacza to, że obraz, który podajesz, powinien być dwa razy o szerokości i wysokości w pikselach, tak jak chciałeś wyświetlać się na ekranie.

To prowadzi do koncepcji punktów w iOS aplikacje:

1 punkt = 1 piksel urządzeń nie siatkówki lub 2 pikseli urządzeń siatkówki.

Ilekroć ustawiasz rozmiary w programie Interface Builder (IB), w rzeczywistości ustawiane są rozmiary punkt, a nie piksele.

Ponadto zawsze należy dostarczyć dwa obrazy na siatkówce wersjach zakaz siatkówki i . Oznaczasz wersję siatkówki, nazywając ją tak samo, jak wersję nie-siatkówkową, a następnie dołączając @ 2x.

E.g.

my_awesome_image.png // non-retina image 
my_awesome_image@2x.png // retina image 

W ten sposób system operacyjny automatycznie wybierze odpowiedni obraz dla urządzeń siatkówki.

Teraz jesteśmy jasne (er) na tej koncepcji, oto co ty właściwie robisz w IB:

Musisz ustawić szerokość i wysokość widzenia obraz jako 240 pkt x 40 pkt, i domyślnie, właściwość widoku obrazu contentMode jest ustawiona na UIViewContentModeScaleToFill (stąd, to jest szczęśliwa zmiana rozmiaru określonego obrazu, aby wypełnić rozmiar, który powiedziałeś ... aby obraz był wyświetlany jako 480px przez 80px na urządzeniach siatkówki- ale pamiętaj , pojawia się "jako ten sam rozmiar" ze względu na wspomnianą gęstość 2x pikseli i 240px przez 40px na urządzeniach innych niż siatkówka).

Podczas konfigurowania widoku obrazu, zazwyczaj trzeba wykonać następujące czynności:

1. Obejmują zarówno siatkówki i non-Retina obrazów w projekcie
2. ustawić rozmiar punktu widzenia obrazu do tego, co chcesz go mieć
3. Ustaw contentMode widoku obrazu, aby cokolwiek chcesz go mieć (może lub nie chce opuścić jako domyślny)