Creați componenta bazată pe listview în Android

Creați o componentă proprie bazată pe ListaView pe Android

Android are un număr mare de componente, dar uneori aveți nevoie de componente care să satisfacă nevoile dvs., pentru aceasta puteți crea componenta personalizată.







Această lecție a fost creată la cererea unuia dintre cititorii blogului. În această lecție vom crea componenta noastră pentru aplicația TODO în care va fi o listă de sarcini. Ceea ce arată un element de listă poate fi văzut mai jos.

Pasul 1. Prototyping

Creăm un prototip. Componenta noastră personalizată va arăta astfel:

Creați componenta bazată pe listview în Android

Ca bază, vom lua ListView, iar după ce o vom personaliza, vom obține o astfel de componentă pe care o vedeți mai sus.

Etapa 2. Pregătirea inițială

Creați un nou proiect în Android Studion:

Creați componenta bazată pe listview în Android

La sfârșitul acestei lecții vom obține următoarea structură a proiectului:

Creați componenta bazată pe listview în Android

Acum, să vedem ce trebuie să facem pentru a crea componenta:

Creați componenta bazată pe listview în Android

Pasul 3. Creați activitatea principală







Creăm MyListView - aceasta este cea principală, care va fi prima care va începe la lansarea aplicației:

Din moment ce componentele pe care le facem noi, trebuie să o umplem într-un mod special, pentru asta folosim Adaptorul nostru, care va oferi posibilitatea de a umple lista.

Și pentru a înlocui dinamic imaginile, am creat pentru ei un fișier de resurse separat. Mai jos vom vedea cum să procedăm.

Activitatea noastră trebuie descrisă în AndroidManifest:

Ei bine, totul este standard și de înțeles, dacă nu sunteți familiarizați cu etichetele acestui fișier, atunci vă recomandăm să citiți AndroidManifest.xml - pentru ce este vorba?

Și acum creați un aspect denumit principal.xml:

După cum puteți vedea, vom folosi un simplu ListView și vom specifica un selector pentru acesta, care va da efectul la lista noastră în anumite stări, atunci când se concentrează, de exemplu.

În timp ce nici o personalizare nu am făcut-o, deoarece totul va fi legat de Adaptor. Acest lucru este foarte îndepărtat, deoarece vă puteți schimba adaptorul la altul, dacă este necesar, fără a încălca logica aplicației.

Pasul 4. Crearea POJO și Enum

Acum creați un obiect care va memora conținutul fiecărui element din lista ListView. Creați o clasă și denumiți-o ObjectItem:

Acum, adăugați următoarele imagini la desen:

Acum creați Enum care va determina ce tip de imagine să arătați, să o numim IMGEnum:

Și creați în valori o resursă numită images_arrays.xml:

Această resursă stochează link-uri către imagini, cu această resursă și Enum putem face cu ușurință încărcare dinamică a imaginii.

De exemplu, putem face acest lucru:

Pasul 5. Creați un ListView personalizat

După cum ați observat deja în MyListView, vom instala un adaptor pentru lista noastră, acest adaptor va personaliza elementul nostru.

Pentru adaptor, creați o vizualizare. pe care o vom completa cu date. Trimiteți data, instalați imaginea și textul.

Creați un aspect și numiți-l my_listview.xml cu următorul conținut:

Acesta este aspectul unui element din lista noastră, acesta va arăta astfel:

Acum creați MyLazyAdapter. care va completa lista cu elementele indicate mai sus:

Pasul 6. Creați un stil pentru element

Pentru a începe, vom crea o casetă verde pentru element, creând drawable-hdpi \ item_bg.xml:

După aceea, creați-drawable-hdpi \ item_bg_hover.xml este stilul elementului în momentul apăsării pe el:

Și acum să creăm un selector pentru acest lucru, care va controla starea și tipul elementului. Creați fișierul drawable-hdpi \ item_list_selector.xml:

După asta, puteți începe și urmăriți ce sa întâmplat.

Reguli pentru retipărirea site-ului www.DevColibri.com

Stimate vizitator al proiectului!

Aveți voie să utilizați în mod liber în scopurile dvs. orice document, sub rezerva următoarelor condiții:

• La sfârșitul documentului reprimat, trebuie să inserați un link către site-ul www.devcolibri.com.

Cu sinceritate, Administrator!
[email protected]







Articole similare

Trimiteți-le prietenilor: