Layout

A Layout határozza meg az adott alkalmazás kezelőfelületének a struktúráját. Hierarchikusan épülnek fel, View és ViewGroup objektumokat tartalmaznak. A View (gyakran utalnak rá widget néven is) egy része a kijelzőnek, egy négyzet, amely valamilyen elemet tartalmaz, ez legyen egy kép, szöveg, gomb vagy bármi, amit egy alkalmazás megjelenít. A View Groups, vagyis View Csoportok pedig ezeknek a különálló View elemeknek az összefogását látják el. Mivel a layout XML formátumban van, így ebből következik, hogy egyszerre csak egy gyökér eleme lehet, tehát ha több elemre van szükség az alkalmazás felületéhez, muszáj valamilyen összefogó elemet használni, ami a ViewGroup. A ViewGroup osztálynak a leszármazottjai a layout konténerek. Ezek felelősek a felhasználói felületért, mivel ezek tartalmazzák a View-kat.

A View és ViewGroup-ok hierarchiája

Két módon hozható részre GUI elem. Vagy előre definiálva az XML fájlban, vagy pedig dinamikusan, futásidőben programkódból hozva létre. A gyakori megoldás a kettő keveréke. Előre definiált UI elemek amiket aztán futásidőben módosítunk.

Gyakori ViewGroup-ok.

Linear Layout

Ahogy a nevéből is adódik, ez egy lineáris elrendezést foglal magában. Lehet horizontális vagy vertikális az elrendezés, a lényeg, hogy a benne szereplő View elemek egymást követik. Az orientációja egyszerűen az android:orientation attribútum segítségével változtatható. Fontos momentum a Linear Layout súlyozása, vagyis a Layout Weight. Ez arra szolgál, hogy a layout minden gyerek eleme ugyanannyi vagy pedig meghatározott részt kapjanak a kijelzőből. Ha a weight-je nagyobb egy elemnek akkor nagyobb helyet kap a layoutból, ha kisebb, akkor kevesebbet.
például:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@android:color/holo_blue_bright"
android:hint="Weight:1" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@android:color/holo_green_light"
android:hint="Weight:1" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:background="@android:color/holo_red_light"
android:hint="Weight:3" />
</LinearLayout>

Az orientáció vertikális, a magasságot pedig a weight-ekkel állítjuk, így a magasságot 0 dp-re kell állítani.
Ennek a kimenetele a következő:

Persze lehet horizontális is, ebben az esetben a szélességet kell 0 dp-re állítani:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/holo_blue_bright"
android:hint="Weight:1" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/holo_green_light"
android:hint="Weight:1" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="@android:color/holo_red_light"
android:hint="Weight:3" />
</LinearLayout>

Ez pedig a következő kimenetelt produkálja:

Relative Layout

A Relative Layout egy olyan ViewGroup, ami, a nevéből is következtethetően, egymáshoz vagy a szülőhöz képest relatívan helyezi el a gyerekeit. Egyik a másik elem mellé, alá, fölé kerülhet, nem foglalkozva azzal, hogy milyen sorrendben jönnek egymás után a widgetek.

pl:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="@+id/button"
android:background="@android:color/holo_red_light"
android:hint="TEXT VIEW" >
</TextView>

<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/button"
android:layout_centerHorizontal="true"
android:background="@android:color/holo_green_light"
android:hint="TEXT VIEW" >
</TextView>

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button" >
</Button>

</RelativeLayout>

Ez pedig a következőként jelenik meg:

ConstraintLayout

Ez már egy érdekesebb állatfaj. Nem fogok belemenni, csak a felszínét kapargatjuk meg kicsit. A lényeg, hogy ez nem nested hierarchiára épülő layout. Responsive layout létrehozására célszerű használni. Ezzel nagyon jól használható az IDE Layout Editora is. Idővel célszerű közelebbi kapcsolatot létesíteni vele, mert manapság az egyik legfontosabb layout viszont igényel némi kompetenciát a témában. Az ismerkedéshez az IDE Layout Editorát ajánlom elsőként, aztán pedig a hivatalos dokumentációt.

RecyclerView

Ismét egy View amiről nem fogok mélyen beszélni. Amennyiben scrollozható View-ra van szükségünk, két döntés jön szóba. Magának a konténernek adunk scrollozhatóságot a ScrollView segítségével és egy ListView-ba jelenítjük meg a dolgokat. Ekkor nehéz a manipuláció, az egész lista egyszerre renderelődik, nagyszámú listaelemnél ellehetetlenítheti a használatot, ellenben egyszerű létrehozni őket.
A nehezebb, de effektívebb megoldás pedig a RecyclerView. Ennek elemei nem egyszerre renderelődnek, hanem saját adapterrel oldható meg a dolog. Ebből kifolyólag szükség van hozzá Java oldali manipulációra is. Szintén célszerű a hivatalos dokumentációt átnézni alaposan a használatához.

Attribútumok

Sok View-nak vannak saját attribútumaik, viszont vannak olyanok amik általánosak. ID minden elemhez rendelhető, erre tudunk listenert írni, ehhez képest tudjuk állítani a Relative Layout gyerekeit és a többi. Ugyan úgy a layout_height és width, és olyan ami minden view-n használható. Gyakori a "wrap content", ebben az esetben csak akkora a View, amekkora helyet a tartalma foglal, és a "match parent" is, melynél a szülő méretét veszi fel a View. Persze az onClick attribútum is elég gyakran használt.

Kezdetnek ezeket jó, ha tudjuk. Majd későbbi részekben megnézünk egy-egy komolyabb layoutot valamilyen egzakt példán keresztül.

A cikk még nem ért véget, kérlek, lapozz!