Android Design -tukikirjaston tutkiminen: Pohjanavigointinäkymä

On kulunut jonkin aikaa siitä, kun kirjoitin Android Design Support Library -kirjastosta, ja olin erittäin innoissani herätäkseni tänä aamuna huomatakseni, että Pohjanavigointinäkymä on lisätty Design Support Libraryn versioon 25!

Pohjanavigointinäkymä on ollut materiaalisuunnitteluohjeissa jo jonkin aikaa, mutta meidän ei ole ollut helppoa ottaa sitä käyttöön sovelluksissamme. Jotkut sovellukset ovat rakentaneet omat ratkaisunsa, kun taas toiset ovat luottaneet kolmannen osapuolen avoimen lähdekoodin kirjastoihin saadakseen työn aikaan. Nyt muotoilutuen kirjasto näkee tämän alareunan navigointipalkin lisäämisen, harkitaan kuinka voimme käyttää sitä!

Tein todella yksinkertaisen näytesovelluksen, se on githubissa, jos haluat tarkistaa sen.

Pohjanavigointinäkymän lisääminen asetteluosi

Aluksi meidän on päivitettävä riippuvuutemme!

koota 'com.android.support:design:25.0.0'

Seuraavaksi meidän on vain lisättävä Bottom Navigation View -widget haluttuun asetustiedostoomme. Muista, että tämän tulisi olla linjassa näytön alareunan kanssa kaiken sisällön ollessa sen yläpuolella. Voimme lisätä tämän näkymän seuraavasti:

Huomaat, että widgetissä on asetettu pari määritteitä. Voimme käyttää näitä asettaaksesi valikkokohteet, jotka haluamme näyttää, ja värit, joita käytetään pohjanavigointinäkymässä:

  • app: itemBackground - Alemmassa navigointivalikossa käytettävä taustaväri
  • app: itemIconTint - Sävy, jota käytetään kuvakkeissa alareunassa olevassa navigointivalikossa
  • app: itemTextColor - Tekstin väri, jota käytetään alemmassa navigointivalikossa
  • sovellus: valikko - Valikkoresurssi, jota käytetään kohteiden näyttämiseen alemmassa navigointivalikossa

Voimme myös asettaa nämä arvot ohjelmallisesti käyttämällä seuraavia menetelmiä BottomNavigationView-ilmentymään:

  • inflateMenu (int menuResource) - Täytä valikon alareunaan siirtymisnäkymä valikkoresurssitunnisteen avulla.
  • setItemBackgroundResource (int backgroundResource) - valikkokohteisiin käytettävä tausta.
  • setItemTextColor (ColorStateList colorStateList) - ColorStateList, jota käytetään valikkokohtien tekstin värittämiseen
  • setItemIconTintList (ColorStateList colorStateList) - ColorStateList, jota käytetään valikkokohtien sävyttämiseen.

Jos lisäät tämän sovellukseesi ja ajat sitä laitteellasi, näet seuraavan kaltaisen kiiltävän uuden navigointinäkymän:

Luo näytettävä valikko

Joten viittasimme edellisen osan valikkoon, mutta miltä tämä näyttää? Se näyttää täsmälleen samalta kuin mikä tahansa muu valikko, jota käyttäisimme koko sovelluksessamme!

On tärkeätä huomata, että näytettävien kohteiden enimmäismäärä on 5. Tämä voi muuttua milloin tahansa, joten on tärkeää tarkistaa tämä käyttämällä BottomNavigationView-luokan tarjoamaa getMaxItem () -menetelmää sen sijaan, että itse itse koodata koodausta.

Käytössä käytössä / pois käytöstä

BottomNavigationView-sovelluksella pystymme helposti käsittelemään sekä aktivoitujen että käytöstä poistettujen valikkokohtien näytön. Jotta näkymä voidaan käsitellä näissä tapauksissa, meidän tarvitsee vain tehdä kaksi muutosta:

  • Ensin on luotava valitsintiedosto aktivoiduille / pois käytöstä oleville väreillemme. Jos et ole käyttänyt yhtä näistä aikaisemmin, se antaa meille periaatteessa mahdollisuuden määritellä ulkoasu tuotteen tilan perusteella.
  • Seuraava meidän on

Estetyt ja käytössä olevat tilat näytetään sitten heijastaen valitutiedoston ilmoitettua ulkoasua:

Kuuntele napsautustapahtumia

Nyt olemme ottaneet käyttöön valikkomme, jonka meidän on pystyttävä reagoimaan sen ollessa vuorovaikutuksessa. Voimme käyttää BottomNavigationView setOnNavigationItemSelectedListener () -menetelmää kuuntelijan asettamiseen valikkokohtotapahtumille:

Kun saamme kohteita napsauttamalla tapahtumia, voimme yksinkertaisesti reagoida vastaavasti. Vaihdan näytteessäni vain tällä hetkellä valitun näyttöhakulaitteen, joka näkyy näytöllä.

Ja siinä kaikki!

Ei vaikuta siltä, ​​että paljon se tekee - Toivon, että näet nyt kuinka suoraan eteenpäin on toteuttaa pohjanavigointinäkymä suunnittelun tukikirjaston avulla. Suuri osa sovelluksista käyttää jo suunnittelun tukikirjastoa, joten ulkopuolisten kirjastojen tarpeen poistaminen on melko kätevää Jos sinulla on kysyttävää navigointinäkymän alaosasta, jätä vastaus tai pudota minulle twiitti!

Tutustu muihin projekteihini osoitteessa hitherejoe.com