Kuinka toteuttaa navigointilaatikko Android-sovelluksessasi esimerkin avulla

Hei kaikki, tervetuloa takaisin androidhunger.com-sivustoon. Täällä tässä istunnossa aion keskustella navigointilaatikon toteuttamisesta android-sovelluksessasi jonkin malliopiskelijasovelluksen kanssa opiskelijoille.

Esimerkki navigointilaatikosta - androidhunger.com

Tällä sovelluksella on erilaisia ​​osioita, kuten aikataulu, tentti-aikataulu, läsnäolo- ja tulososio, jotka auttavat opiskelijaa saamaan ajan tasalla kaikki yliopiston asiat ja hänen osallistumisensa siihen. Kaikki tässä esitetyt tiedot ovat kuitenkin staattisia tietoja, mutta voit laajentaa tämän ajatusta uudenlaisen tällaisen sovelluksen kehittämiseksi.

Joten aloitetaan.

Sisällys:

  • Luo uusi Navigointilaatikko-sovellus
  • Navigointivalikko
  • Navigointivalikkokohta - KotiFragmentti
  • Navigointivalikkokohta - TimeTableFragment
  • Navigointivalikkokohta - ExamScheduleFragment
  • Navigointivalikkokohta - AttendenceFragment
  • Navigointivalikkokohta - ResultFragment
  • Navigointivalikkokohta - WebViewFragment

Luo uusi Navigointilaatikko-sovellus

Luon uuden android-sovelluksen valitsemalla navigointilaatikkotoiminnon Android Studiossa. Katso kuva alla,

Esimerkki navigointilaatikosta - androidhunger.com

Joten kun Android Studio on tehnyt asiansa ja osoittanut lopulta "Gradle build valmis" (: P vain leikkiä, jos sinulla on hyvä kokoonpano, kaikki latautuu hyvin), voit nähdä joitain asetustiedostoja ja aktiviteetitiedoston (MainActivity.java) johonkin koodiin kirjoitettu. Pohjimmiltaan siinä on navigointivalikko, kuvakkeet, otsikko ja valikkokohteen napsautusten ja kaiken tämän käsitteleminen. Täällä aion käyttää sitä ja laajentaa sitä koodin hyödyntämiseen, jonka Android Studio meille oletuksena antoi: D

Navigointivalikko

Menen askel askeleelta ja kerron sinulle sovelluksesta, jota aiomme rakentaa. Ensin viimeistelen navigointivalikkoasettelun.

Jos avaat activity_main.xml-tiedoston sovellus- / res / asetteluhakemistossa, näet NavigationMenu-koodin.

Yllä olevassa katkelmassa viimeisellä rivisovelluksella: menu = "@ menu / activity_main_drawer", joka kertoo, että tämän valikko sijaitsee res-kansion valikkohakemistossa. Joten nyt muokata valikkokohtia.

Avaa activity_main_drawer.xml-tiedosto ja aseta seuraava koodi siihen.



        
        
        
        
        
    

        
            
            
            
            
            
        
    

Jos tarkastelet yllä olevaa koodia, olen luonut valikon käyttämällä valikkoa, kohdetta ja ryhmää.
valikko, joka on pääelementti ja jossa voi olla alalapsen / alaelementtejä, kuten kohde ja ryhmä.

Kohta, joka on yksittäinen valikkokohta, voimme jakaa / erottaa valikon luomalla toisen valikon alkioelementin alalapsena. Annoin myös alavalikkoon otsikon "Sosiaalinen".

Esimerkki navigointilaatikosta - androidhunger.comEsimerkki navigointilaatikosta - androidhunger.com

Yllä olevissa kuvakaappauksissa voit nähdä kukin valikkokohteen vieressä olevan kuvakkeen, joka voidaan asettaa android-kuvakemääritteellä android: icon = "@ piirrettävä / image_name", nämä kuvakkeet ovat joko androidin oletuskuvia tai voit ladata minkä tahansa kuvakkeen omasta halua ja käytä niitä. Käytetyt sosiaalisen verkoston kuvakkeet ovat osoitteessa https://icons8.com/ muut kuvakkeet ovat android-oletuskuvakkeita.

Joten nyt NaviginationMenu on valmis, nyt yhdistän tämän valikkokohteen napsautukset siihen liittyvään fragmenttiin.

MainActivity.java-tiedostossa

Alustin NavigationView-sovelluksen seuraavilla parilla riveillä,

NavigationView navigationView = (NavigationView) findViewById (R.id.nav_view);
navigationView.setNavigationItemSelectedListener (tämä);

Käsittelen valikon napsautuskohteita seuraavilla rivillä,

julkinen boolean onNavigationItemSelected (MenuItem-kohde) {
        int id = item.getItemId ();
        Fragmentti fragmentti = nolla;
        Bundle kimppu = uusi kimppu ();
        if (id == R.id.home) {
            fragmentti = uusi HomeFragment ();
        } else if (id == R.id.timeTable) {
            fragmentti = uusi TimeTableFragment ();
        } else if (id == R.id.examSchedule) {
            fragmentti = uusi ExamScheduleFragment ();
        } else if (id == R.id.attendence) {
            fragmentti = uusi AttendenceFragment ();
        } else if (id == R.id.result) {
            fragmentti = uusi ResultFragment ();
        } else if (id == R.id.fb) {
            bundle.putString ("URL", "https://www.facebook.com/androidhungerAH");
            fragmentti = uusi WebViewFragment ();
            fragment.setArguments (nippu);
        } else if (id == R.id.gplus) {
            bundle.putString ("URL", "https://plus.google.com/+Androidhunger");
            fragmentti = uusi WebViewFragment ();
            fragment.setArguments (nippu);
        } else if (id == R.id.twitter) {
            bundle.putString ("URL", "https://www.twitter.com/android_hunger");
            fragmentti = uusi WebViewFragment ();
            fragment.setArguments (nippu);
        } else if (id == R.id.github) {
            bundle.putString ("URL", "https://github.com/avinashn/androidhunger.com");
            fragmentti = uusi WebViewFragment ();
            fragment.setArguments (nippu);
        } else if (id == R.id.youtube) {
            bundle.putString ("URL", "https://www.youtube.com/androidhunger");
            fragmentti = uusi WebViewFragment ();
            fragment.setArguments (nippu);
        }
        if (fragmentti! = nolla) {
            FragmentTransaction ft = getSupportFragmentManager (). BeginTransaction ();
            ft.replace (R.id.sisältökehys, fragmentti);
            ft.commit ();
        }
        DrawerLayout laatikko = (DrawerLayout) findViewById (R.id.drawer_layout);
        drawer.closeDrawer (GravityCompat.START);
        palata totta;
    }

Täältä sain kunkin valikkokohteen tunnuksen ja käytän sitä tunnuksella uuden fragmentin tarkistamiseen ja käynnistämiseen sekä sosiaalisten linkkien lähettämiseen, myös välitän Android Hungerille sopivan sosiaalisen verkoston linkin URL-osoite ja aloitan uuden toiminnan, tässä käytän samaa WebViewFragmenttiä ladata kaikki sosiaalisten verkostojen verkkosivut.

Katsotaanpa nyt jokaista fragmenttia, ja mikä on.

Navigointivalikkokohta - KotiFragmentti

Alustan onCreate-toiminnon HomeFragment.java-tiedostossa tämän fragmentin asettelun (R.layout.home).

julkinen View onCreateView (LayoutInflater -pumppu, ViewGroup-säilö, Bundle savedInstanceState) {
        paluu inflater.inflate (R.layout.home, kontti, väärä);
    }

Katsotaanpa home.xml-tiedosto osoitteessa res / layout / home.xml

Esimerkki navigointilaatikosta - androidhunger.comEsimerkki navigointilaatikosta - androidhunger.com

Edellä olevissa ruutukuvissa sisäkkäin erilaisia ​​asetteluja, sekä vaaka- että pystysuuntaista vieritysnäkymää, mukautetun näkymän avulla, jotta pystyn piirtämään vaakasuoran jakoviivan, ja paljon muuta.

Voit myös tarkastella asettelun komponenttipuuta,

Esimerkki navigointilaatikosta - androidhunger.com

Näytin nimen, lukukauden, osaston ja rekisteröintinumeroa LinearLayout-sovelluksella, asettelu on seuraava,


        

 

Seuraavaksi käytin Näytä-määrittämää näyttääkseni vaakasuoran viivan erottimena,

 

Sitten yksinkertainen TextView, joka kertoo tärkeitä tietoja.

Nyt ScrollView, jossa on joitain TextView-tiedostoja. Koska tiedät, että ScrollView-ohjelmassa pitäisi olla vain yksi lapsi, käytän LinearLayout-sovellusta ja sijoitan kaikki TextView-sovellukset sinne.


Seuraavaksi näyttöön tulee HorizontalScrollView näyttääksesi joitain painikkeita,

<-painike
       android: id = "@ + id / btnTimeTable"
       android: layout_width = "wrap_content"
       android: layout_height = "wrap_content"
       android: layout_margin = "2dip"
       android: tausta = "# ffff4444"
       android: padding = "2dip"
       android: text = "Aikataulu"
       android: textColor = "# FFF" />
<-painike
       ......
       ......
       ......

Käsittelen nyt tämän painikkeen napsautuksia sen osassa (HomeFragment).

Alusta painikkeet viewCreated () -menetelmässä, aseta seuraavat rivit.

Painike btn = (painike) getView (). FindViewById (R.id.btnID);

Aion asettaa sen napsauttamaan kuuntelijaa,

btn.setOnClickListener (tämä);

Joten nyt annan fragmentin toteuttaa napsautuskuuntelijat.

julkisen luokan HomeFragment laajentaa fragmentti-toteutuksia View.OnClickListener {
....}

Nyt se luo uuden menetelmän onClick,

public void onClick (Näytä v) {
        Fragmentti fragmentti = nolla;
        kytkin (v.getId ()) {
            tapaus R.id.btnTimeTable:
                fragmentti = uusi TimeTableFragment ();
                tauko;
            ......
            ......
        }
        getActivity (). getSupportFragmentManager (). beginTransaction ()
                .korvaa (R.id.sisältökehys, fragmentti)
                .addToBackStack (null)
                .commit ();
    }

Joten nyt kun nappia napsautetaan, aloitan siihen liittyvän fragmentin.

Navigointivalikkokohta - TimeTableFragment

Alustan onCreate-toiminnon TimeTableFragment.java-tiedostossa tämän fragmentin asettelun (R.layout.timetable).

julkinen View onCreateView (LayoutInflater -pumppu, ViewGroup-säilö, Bundle savedInstanceState) {
        paluu inflater.inflate (R.layout.timetable, container, false);
    }

Katsokaamme aikataulu.xml-tiedosto osoitteessa res / layout / aikataulu.xml

Esimerkki navigointilaatikosta - androidhunger.com

Asettelun komponenttipuu,

Esimerkki navigointilaatikosta - androidhunger.com

Täällä pääosa on TableLayout, jossa näen aikataulun aiheista ja ajasta ja sen alapuolella LinearLayout näyttääkseni aiheiden nimet.

Asetin nämä kaksi asettelua myös ScrollView-tiedostoon, ja tehdäkseni ScrollView-keskuksen RelativeLayout-toiminnolla asettamaan android: layout_centerVertical = "true" ScrollView-määritteeksi.

TableLayout -sovelluksessa on useita TableRow-alaelementtejä, ja tässä sijoitin riviin joitain TextView-elementtejä.

.....

Seuraavaksi LinearLayout of TextView, joka näyttää kunkin kohteen nimen.

Navigointivalikkokohta - ExamScheduleFragment

Alustan onCreate-toiminnon ExamScheduleFragment.java-tiedostossa tämän fragmentin asettelun (R.layout.examschedule).

julkinen View onCreateView (LayoutInflater -pumppu, ViewGroup-säilö, Bundle savedInstanceState) {
        return inflater.inflate (R.layout.examschedule, container, false);
    }

Katsokaamme examschedule.xml-tiedosto osoitteessa res / layout / examschedule.xml

Esimerkki navigointilaatikosta - androidhunger.com

Tämä asettelu on melko yksinkertainen, se koostuu vain TextView-tiedoista ScrollView-tiedostossa

Esimerkki navigointilaatikosta - androidhunger.com

Alla on layout-katkelma,


 
             ...
             ...

Navigointivalikkokohta - AttendenceFragment

Alustan onCreate-toiminnon AttendenceFragment.java-tiedostossa tämän fragmentin asettelun (R.layout.attendence).

julkinen View onCreateView (LayoutInflater -pumppu, ViewGroup-säilö, Bundle savedInstanceState) {
        return inflater.inflate (R.layout.attendence, container, false);
    }

Katsokaamme examschedule.xml-tiedosto osoitteessa res / layout / attendence.xml

Esimerkki navigointilaatikosta - androidhunger.comEsimerkki navigointilaatikosta - androidhunger.comEsimerkki navigointilaatikosta - androidhunger.com

Joten tässä, valitsin vain yksinkertaisen kehrän valita lukukauden ja sitten näyttää sen lukukauden osallistumisen TextView-ohjelmaan. Spinner on jotain, jota voit kutsua siitä myös pudotusvalikkona. Spinnerissä on joitain menetelmiä, kuten onItemSelected, joten voimme tehdä jotain, kun Spinner-tuotteessa oleva tuote vaihdetaan. Katsotaanpa nyt kaikki hienot asiat.

Joten AttendenceFragmentissa alustain tämän kehrän,

Spinner-kehruu = (Spinner) view.findViewById (R.id.semSpinner);

Aseta myös sovitin siihen, jotta jotkut esineet näkyvät Spinnerissä.

ArrayAdapter  sovitin = ArrayAdapter.createFromResource (getContext (),
        R.array.semisters ja android.R.layout.simple_spinner_item);
adapter.setDropDownViewResource (android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter (sovitin);

Tallensin täällä Spinner-tuotteiden luettelon erilliseen tiedostoon nimeltä `srings.xml`, johon voimme tallentaa kaikki sovelluksessamme käytetyt merkkijonot.

Avaa /app/res/values/strings.xml ja lisää seuraava merkkijono.


     Semister 1 
     Semister 2 
     Semister 3 

Joten käytin tätä taulukkoa R.array.semisters -sovelluksen asettamiseen.

Joten nyt esitin Spinner -tuotteen joidenkin esineiden kanssa, minun on myös kuunneltava esineiden muutosta Spinnerissä. Joten käytän kohdevalittua kuuntelijaa tässä Spinnerissä.

spinner.setOnItemSelectedListener (tämä);

ja menetelmä käytettäväksi AdapterView.OnItemSelectedListener-sovelluksen toteuttamisessa

@Ohittaa
public void onItemSelected (AdapterView  vanhempi, View view, int position, long id) {
    Merkkijonon lukukausi = parent.getItemAtPosition (sijainti) .toString ();
if (semester.equals ("Semister 1")) {
        textView.setText ("Sinun osallistumisesi tähän Semisteriin on 82%");
    } else if (semester.equals ("Semister 2")) {
        textView.setText ("Sinun osallistumisesi tähän Semisteriin on 86,8%");
    } else if (semester.equals ("Semister 3")) {
        textView.setText ("Osallistuvuutesi tähän Semisteriin on 73,8% nykyisestä.");
    }

}
Joten kun lukukausi muuttuu, päivitin vain TextView-ohjelmaa staattisella arvolla osallistumiselle.

Navigointivalikkokohta - ResultFragment

Tulosnäyttö on hyvin samanlainen kuin aiempi näytön osallistuminen, tässä käytän samaa asettelua, ainoa muutos on TextView, kun Spinner-kohtaa vaihdetaan.

Katso seuraava katkelma,

@Ohittaa
public void onItemSelected (AdapterView  vanhempi, View view, int position, long id) {
    Merkkijonon lukukausi = parent.getItemAtPosition (sijainti) .toString ();
if (semester.equals ("Semister 1")) {
        textView.setText ("SGPA: 6.2");
    } else if (semester.equals ("Semister 2")) {
        textView.setText ("SGPA: 6.6 CGPA: 6.4");
    } else if (semester.equals ("Semister 3")) {
        textView.setText ("Ei vielä saatavana");
    }
}

Navigointivalikkokohta - WebViewFragment

Navigointivalikossa on joitain sosiaalisia linkkejä, kuten Facebook, G +, Twitter, YouTube ja Github. Joten kun näitä kohteita painetaan, lataan siihen liittyvän verkkosivun. Yksityiskohtainen selitys WebView-sovelluksen käyttöönottamisesta Androidissa käydään läpi edellisessä viestissani.

Joten onNavigationIemSelected -menetelmässä inMainActivity, josta juuri keskustelin, välitän vain vastaavan sosiaalisen verkoston sivuston URL-osoitteen WebViewFragmentille, joka sitten lataa verkkosivun.

Joten luen WebViewFragmentissa lähetetyn URL-osoitteen,

Merkkijono gurl = this.getArguments (). GetString ("url");

ja siirrä se funktiokutsulleWebClient, joka soittaa WebViewClientille,

callWebClient (gurl);

ja callWebClient (gurl); toimia,

yksityinen tyhjäsoittoWebClient (merkkijono URL) {
    wv.setWebViewClient (uusi myWebViewClient ());
    wv.getSettings (). setLoadsImagesAutomatically (tosi);
    wv.getSettings (). setJavaScriptEnabled (tosi);
    wv.setScrollBarStyle (View.SCROLLBARS_INSIDE_OVERLAY);
    wv.loadUrl (urll);
}
Esimerkki navigointilaatikosta - androidhunger.comEsimerkki navigointilaatikosta - androidhunger.comEsimerkki navigointilaatikosta - androidhunger.com

Se on tämä viesti. Voit vapaasti katsoa joitain aiempia viestejä täällä.

Viesti: http://androidhunger.com/implement-navigation-drawer-with-example/

GitHub: https://github.com/avinashn/navigation_drawer_example_android

Sovelluksen esittely: https://www.youtube.com/watch?v=-IVrNgFzV6g