„Android“ išdėstymo dizaino pamoka: viskas, ką reikia žinoti



Ši „Android“ išdėstymo dizaino pamoka padės suprasti, kaip maketus galima kurti naudojant rodinius ir peržiūros grupes su demonstracine versija.

Jei esate naujas , jūs patekote į puikią vietą, kad galėtumėte pradėti mokytis apie maketavimą. Šis straipsnis apie „Android“ maketo projektavimo pamoką padės jums išeitikeletas naudingų patarimų, kaip sukurti geresnį vartotojo sąsają, taip pat paaiškinama, kaip kurti sąsają.

Aptarsiu šias temas:





Taigi, pradėkime!

„Java“ ir „javascript“ ryšys

„Android“ išdėstymo dizaino pamoka: įvadas į vartotojo sąsajos komponentus

Kalbant apie vartotojo sąsajos komponentus, tipišką bet kurios „Android“ programos vartotojo sąsają sudaro šie komponentai:



  • Pagrindinė veiksmų juosta
  • Rodinio valdymas
  • Turinio sritis
  • „Split Action“ juosta

Tai vaidina svarbų vaidmenį, kai kuriate sudėtingą programą. Aiškiai suprasite tai, kai pateksime į šio straipsnio demonstracinę skiltį.

Kitas svarbus veiksnys, padedantis pritaikyti vartotojo sąsajos dizainą, bus rodinio komponentas.

Pažiūrėkime, kas yra vaizdas



„Android“ išdėstymo dizaino pamoka: Peržiūrų

Į Vaizdas yra laikomas pagrindiniu tinkamos vartotojo sąsajos, iš tikrųjų sukurtos iš Peržiūrėti klasę . Tai užima stačiakampę sritį ekrane ir galiausiai rūpinasi piešimu bei įvykių tvarkymu.

Vaizdas yra pagrindinė valdiklių klasė, naudojama kuriant interaktyvius vartotojo sąsajos komponentus, pvz., Mygtukus, teksto laukus ir pan. Dabar kalbama apie stačiakampio sritį arba langelį. Tai gali būti vaizdas, teksto dalis, mygtukas arba viskas, ką gali rodyti „Android“ programa. Stačiakampis čia iš tikrųjų nematomas, tačiau kiekvienas vaizdas užima stačiakampio formą.

Jums gali kilti klausimas, koks gali būti šio stačiakampio dydis?

Atsakymas: galite nustatyti rankiniu būdu, nurodydami tikslų dydį (su tinkamais vienetais), arba naudodami kai kurias iš anksto nustatytas reikšmes. Šios iš anksto nustatytos vertės yra match_parentand wrap_content. Tai match_parent reiškia, kad jis užims visą laisvą vietą įrenginio ekrane. Kadangi, wrap_content reiškia, kad jis užims tik tiek vietos, kiek reikia jo turiniui rodyti.

Dabar atkreipkime dėmesį į pagrindinius „View“ ir „ViewGroup“ skirtumus.

Vaizdas

  1. Vaizdas objektai yra pagrindiniai „Android“ vartotojo sąsajos elementai.
  2. Rodinys yra paprastas stačiakampio langelis, kuris atsako į vartotojo veiksmus.
  3. Rodinys nurodo android.view.View klasę, kuri yra visų UI klasių pagrindinė klasė.
  4. Tokie pavyzdžiai yra „EditText“, „Button“, „CheckBox“ ir kt.

„ViewGroup“

  1. „ViewGroup“ yra nematomas konteineris, kuriame yra „View“ ir „ViewGroup“.
  2. Yra pagrindinė „ Maketai .
  3. Pavyzdžiui, „LinearLayout“ yra „ViewGroup“, kuriame yra mygtukas (rodinys) ir kiti maketai.

Dabar eikime į priekį ir supraskime esamus maketus.

„Android“ išdėstymo dizaino pamoka: Maketų tipai

Į išdėstymas apibrėžia vartotojo sąsajos struktūrą programoje. Visi maketo elementai yra sukurti naudojant hierarchiją Vaizdas ir „ViewGroup“ objektai.

Dabar pažiūrėkime, kaip deklaruoti maketą.

Išdėstymą galite deklaruoti dviem būdais:

  • Paskelbkite vartotojo sąsajos elementus XML. „Android“ pateikia paprastą XML žodyną, kuris atitinka „View“ klases ir poklasius, pvz., Valdiklius ir maketus.

Pastaba: Taip pat galite naudoti „Android Studio“ maketo redagavimo priemonę, kad sukurtumėte XML išdėstymą naudodami „drag and drop“ sąsają.

  • Momentiniai išdėstymo elementai bėgimo laikas . Programa gali sukurti Vaizdas ir „ViewGroup“ objektus ir programiškai manipuliuoti jų savybėmis.

Aptarkime skirtingus maketų tipus.

„Android“ sąsaja yra „Views“ ir „ViewGroups“ hierarchija. „ViewGroups“ bus tarpiniai hierarchijos mazgai, o rodiniai bus terminaliniai mazgai.

  • Linijinis išdėstymas
  • Absoliutus išdėstymas
  • Santykinis išdėstymas
  • Stalo išdėstymas
  • Rėmo išdėstymas

Aptarkime juos išsamiai.

Linijinis išdėstymas

Linijinis išdėstymas naudojamas dedant po vieną elementą kiekvienoje eilutėje. Taigi, visi elementai bus išdėstyti tvarkingai iš viršaus į apačią. Tai labai plačiai naudojamas maketas kuriant formas „Android“. Tai taip pat gali būti vadinama apžvalgos grupe, kuri visus vaikus sulygiuoja viena kryptimi, vertikaliai arba horizontaliai.

Absoliutus išdėstymas

Absoliučiame išdėstyme galite nurodyti tikslias kiekvieno valdiklio, kurį norite įdėti, koordinates. Tokio tipo išdėstyme galite nurodyti tikslias kiekvieno valdiklio X ir Y koordinates. Tai leidžia jums nurodyti tikslią vaikų vietą.

Santykinis išdėstymas

Santykinis išdėstymas yra a „ViewGroup“ kuri rodo vaiko pažiūras santykinėse padėtyse. Tugali nurodyti elementų padėtį kitų elementų atžvilgiu arba pagrindinio sudėtinio rodinio atžvilgiu.

Stalo išdėstymas

Naudodamiesi lentelės išdėstymu, galite sukurti lentelę su eilėmis ir stulpeliais ir į juos įdėti elementus. Kiekvienoje eilutėje galite nurodyti vieną ar daugiau elementų. Naudodami šią komandą galite sukurti naują lentelės išdėstymą.

Rėmo išdėstymas

Rėmelių išdėstymas naudojamas, kai kiekviename ekrane norite rodyti po vieną elementą. Naudodami rėmelio išdėstymą, galite turėti kelis elementus.Šis rėmelių išdėstymas yra vietos rezervavimo ženklas ekrane, kurį galite naudoti rodydami vieną vaizdą.

„Android“ išdėstymo dizaino pamoka: Matavimo vienetai

Kai „Android“ vartotojo sąsajoje nurodote elemento dydį, turėtumėte nepamiršti šių matavimo vienetų.

Vienetas apibūdinimas
dp Nepriklausomas nuo tankio pikselis. 1 dp yra lygiavertis vienam pikseliui a 160 dpi ekranas.
sp Nepriklausomas pikselis. Tai labai panašu į dp, bet tik tai rekomenduojama nurodyti šriftų dydžius.
pt Taškas. Taškas apibrėžiamas kaip 1/72 colio.
px „Pixel“. Atitinka tikruosius ekrano taškus

Dabar pereikime prie paskutinės šio straipsnio temos.

„Android“ išdėstymo dizaino pamoka: Demonstracija

Šiame demonstraciniame skyriuje supraskime, kaip dirbti su maketais „Android Studio“ .

Nurodykite į „Android Studio“.

Taip atrodo maketas. Tiesiog pasirinkite piešiamą ir rasite keletą klasių, pažymėkite bet kurią kitą klasę pagal šią piešiamą. Galite koduoti išdėstymo struktūrą arba peržiūrėti dizainą ir tiesiog nuvilkti komponentus dizaino erdvėje.

Demonstracija - „Android“ išdėstymo dizaino pamoka - „Edureka“

Komponentus, kuriuos pasirinkote, galite peržiūrėti po komponentų medžiu.

Tai taip pat galite rasti makete.

  1. Paletė : Tai rodinių ir rodinių grupių, kurias galite nuvilkti į maketą, sąrašas.
  2. Komponentas Medis : Susideda iš jūsų maketo rodinio hierarchijos.
  3. Įrankių juosta : Mygtukai, skirti sukonfigūruoti maketo išvaizdą redaktoriuje ir pakeisti kelis maketo atributus.
  4. Dizaino redaktorius : Maketas dizaino ar Blueprint rodinyje arba abu. Taip pat laikoma dizaino erdve.
  5. Atributai : Jis valdo pasirinkto rodinio atributus.

Šiuo tikslu mes baigiame šį straipsnį apie „Android Layout Design Tutorial“. Tikiuosi, kad jums, vaikinai, aišku, kas su jumis buvo pasidalinta šioje pamokoje.Stebėkite kitus tinklaraščius ir „Sėkmės“ su savo „Android“ kūrėjo karjera.

Dabar, kai supratote „Android Layout Design“ pagrindus, patikrinkite sukūrė „Edureka“ - patikima internetinė mokymosi įmonė, turinti daugiau nei 250 000 patenkintų besimokančiųjų tinklą.

„Edureka“ „Android“ programų kūrimo sertifikavimo mokymo kursai skirti studentams ir specialistams, norintiems būti „Android“ kūrėjais. Kursas sukurtas tam, kad galėtumėte pradėti programuoti „Java“ ir išmokyti jus tiek pagrindinėms, tiek pažangioms koncepcijoms kartu su projektu, kuriame tikimasi sukurti „Android“ programą.

Turite mums klausimą? Prašau tai paminėti šio „Android Layout Design Tutorial“ tinklaraščio komentarų skyriuje ir mes kuo greičiau susisieksime su jumis.