5-LEKTCIYA
.docx
4-TEMA. ANDROIDTA PAYDALANÍWSHÍ INTERFEYSI.
View hám Layoutlar túrleri. Qosımshalar ushın paydalanıwshı interfeysin jaratıw principleri. View hám Layoutlar. Layoutlardıń túrleri. Liner, table, relative, frame layoutlar hám olardan paydalanıw.
“constraintlayout” elementi haqqında
Bul layout sońǵı shıqqann layout. Onnan aldınǵı shıqqan layoutlardıń barlıǵınıń ornın basa aladı. Biraq kemshilik tárepi awırlıǵında. Úlken kólemdegi proektlerdi islegende awır islewi múmkin. Kishi, ortasha proektlerde qollanıw júdá qolaylı. Bul layout shınjırlarǵa tiykarlanǵan. Bir obyektti tort tárepinen shınjırlar menen qálegen jaqqa tartıp qoysaq boladı.
|
Mısalda kóremiz. Tiykarǵı denesin constraintlayout qa ózgertemiz. Endi jańadan Button jaratamız. Enin 300dp, biykligine 100 dp beremiz. Qandayda bir reń beremiz.
<Button android:layout_width="250dp" android:layout_height="100dp" android:background="#92d050" android:text="Alma" android:textColor="#fff" android:textSize="28sp" /> |
Itibar bergen bolsaq, Button qızıl bolıp turıptı.
Yaǵnıy, constraintlayout bolǵanlıǵı ushın hesh jerge tartılmaǵan shınjırları joq dep turıptı. Tek shep jaqta, joqarıda turıptı. Shınjırlar menen tartatuǵın bolsaq: Usı obyekttiń startı qandayda bir obyekttiń stratına tartıladı. Qaysı obyekttiń startına tartılıw kerekligin kórsetemiz. Házirshe bizde “parent”. Ol constraintlayouttıń ózi, yaǵnıy tolıq ayna parent. Shınjirdıń tort tárepine kod jazamız.
StarttoStartOf dep:
app:layout_constraintStart_toStartOf="parent"
<Button android:layout_width="200dp" android:layout_height="81dp" android:background="#45d0c8" android:text="A" android:textColor="#fff" android:textSize="25sp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" />
|
Bunda biz parentke tartıp atırmız. - joqarı oń jaǵı (starttostart); -joqarında shep jaǵında parentke tarttıq (toptotop); - tómeni (bottom); Sol waqıtta eki jaqtanda tartısıp ortaǵa kelip qaldı (Button). Kórip turǵanıńızday eki tárepte shınjır menen tartılǵan. - endtoend qılsaq, oń jaqtanda, shep jaqtanda, joqarıdan tómennen birdey kúsh penen tartıp turıptı. Sonlıqtan bul obnyekt ortaǵa jaylasıp aldı. (Tómendegi súwretke qarań:) |
▀ Endi bizge oń jaqtan hám shep jaqtan tartıw kerek emes. Bottom menen endti óshiremiz.
Jáne bir Button isleymiz:
<Button android:layout_width="100dp" android:layout_height="100dp" android:text="B" android:textSize="25sp" android:background="#CDDC39" android:textColor="#fff" /> |
Kórinis:
|
Eki Buttonǵada id jazaman, sebebi Kotlin tilinde klass arqalı id arqalı Buttonlardı tawıp alıw ushın. Yaǵnıy usı Buttonnıń identifikaciyası, birinshi Buttonǵa buttonA, ekinshisine button dep kórsetip qoysaq boladı. ↓↓
<Button android:layout_width="250dp" android:layout_height="100dp" android:background="#45d0c8" android:text="A" android:textColor="#fff" android:textSize="25sp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/buttonB" android:layout_width="100dp" android:layout_height="100dp" android:text="B" android:textSize="25sp" android:background="#CDDC39" android:textColor="#fff" /> |
Kórinis:
|
Endi ekinshi Buttonnıń shınjırların qoyıp shıǵamız. Bunıń baslanıwın A obyektiniń tamamlanıwına tartıwım kerek. Ol ushın start_toEndof, al id sına buttonA deymen. Kórip turǵanıńızday ButtonB nıń baslanıwı ButtonA nıń tamamlanıwına tartıldı. ↓↓
<Button android:id="@+id/buttonA" android:layout_width="250dp" android:layout_height="100dp" android:background="#45d0c8" android:text="A" android:textColor="#fff" android:textSize="25sp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/buttonB" android:layout_width="100dp" android:layout_height="100dp" android:text="B" android:textSize="25sp" android:background="#CDDC39" android:textColor="#fff" app:layout_constraintStart_toEndOf="@+id/buttonA" /> |
|
Endi ButtonA nıń tóbesine ButtonB nı tartamız. Top_toTopOf Topqa tartqanımızdıń qanday parqı bar dep oylawımız múmkin. (ózgermedi degen sıyaqlı). Eger men ButtonA nıń tóbesin ózgertetin bolsam, bottom_tobottomof= “parent”, bunda ButtonA tómenge tústi, sonlıqtan ButtonB da qosılıp júredi.
<Button android:id="@+id/buttonA" android:layout_width="250dp" android:layout_height="100dp" android:background="#45d0c8" android:text="A" android:textColor="#fff" android:textSize="25sp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> <Button android:id="@+id/buttonB" android:layout_width="100dp" android:layout_height="100dp" android:text="B" android:textSize="25sp" android:background="#CDDC39" android:textColor="#fff" app:layout_constraintStart_toEndOf="@+id/buttonA" app:layout_constraintTop_toTopOf="@+id/buttonA" /> |
Bunıń tóbesi A nıń tóbesine birikken. A nıń tóbesi qayjerde tursa B nıń da tóbesi sol jerde turadı degen sóz. |
Endi ButtonA daǵı Bottom (app:layout_constraintBottom_toBottomOf="parent") dı óshiremen, hám onıń ornına Button A ǵa margin beremen. marginstart = “16dp”, margintop= “16dp”, aralıq beremen, Bunda ekinshi Buttonnıńda tóbesi ózgerdi.
<Button … app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" android:layout_marginStart="16dp" android:layout_marginTop="16dp" /> |
buttonA |
|
<Button … app:layout_constraintStart_toEndOf="@+id/buttonA" app:layout_constraintTop_toTopOf="@+id/buttonA" />
|
buttonB |
Egerde ButtonB nıń app:layout_constraintTop_toTopOf="@+id/buttonA"
tı app:layout_constraintTop_toTopOf="parent"
desem: A ǵa birikpey (jabıspay) parentke jabısar edi:
|
Sonlıqtan dáslepki jágdayına ózgertemen app:layout_constraintTop_toTopOf="@id/buttonA"
|
Endi id beriwlerge itibar berip ketsek, mısalı Buttonǵa id di qosıp atırǵan waqıtta +id jazıladı,
|
Al, id-di paydalanıp atırǵan waqıtta (bar id-di shaqırıp atırǵan): + ti jazbasaq boladı:
|
▀ Endi Button B nıń baslanıwına marginstart beretuǵın bolsam, (16dp), sol baylanǵan obyektten 16 dp aralıqta (qashıqlıqta turadı).
|
Kórip turǵanıńızday strelka turıptı, Button B nıń startı, Anıń End-na jabısqan. Ortada 32dp qashıqlıq bar.
|
Eger ButtonB daǵı Starttı alıp taslasam, app:layout_constraintStart_toEndOf="@+id/buttonA"
Marfinstart islemeydi,
|
Sebebi parentke jabısıp qaldı. Sebebi ButtonB nıń shep jaǵı, baslanıwı esh zatqa jabısıp turǵan joq. Sonlıqtan baslanıwına margin bersede islemeydi. (Daslepki halında qaytaramız)