Parametr wrap_content vs fill_parent

Kod źródłowy do tej lekcji znajduje się tutaj. Rozpakuj go i zaimportuj. W katalogu z kodem źródłowym znajdą się podkatalogi oznaczone numerami. Są to po prostu kolejne wersje kodu, tworzonego w ramach przykładów. Możesz analizować kolejne kroki tworzenia aplikacji, lub od razu zabrać się za kod z katalogu o najwyższym numerku.

Kiedy przyklejamy element taki jak guzik, w pliku layoutu dodawany jest wpis odnoszący się do tego obiektu. Taki jak ten:

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/textView1"

android:layout_below="@+id/textView1"

android:layout_marginTop="32dp"

android:text="Button" />

Parametry typu marginTop czy tekst są jasne, ale mamy turaj layout_height i layout_width określone nie jak się można by było spodziewać w pikselach, a jako „wrap_content”. Takie ustawienie jest domyślne i oznacza ono, że element ma być tak szeroki i wysoki by zmieścić znajdujący się w nim napis (lub obrazek w przypadku elementu imageView, czy inną zawartość w przypadku inych komponentów). Efekt wizualnie wygląda tak:

Alternatywnie zamiast wrap_content możemy wpisać fill_parent:

<Button

android:id="@+id/button1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/textView1"

android:layout_below="@+id/textView1"

android:layout_marginTop="32dp"

android:text="Button" />

Takie ustawienie oznacza, że komponent ma się dopasować szerokością/wysokością do kontenera w którym się znajduje (w tym przypadku w ogóle na ekranie). Ustawilem parametr fill_parent dla szerokości. Efekt prezentuje się tak:






Ponownie wprowadzam zmianę w konfiguracji. Tym razem ustawiam fill_parent również dla wysokości komponentu:

<Button

android:id="@+id/button1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_alignLeft="@+id/textView1"

android:layout_below="@+id/textView1"

android:layout_marginTop="32dp"

android:text="Button" />

Mamy w efekcie duuuży guzik :