Näite abil navigeerimissahtli rakendamine oma Androidi rakenduses

Tere, kõik, tere tulemast tagasi saidile androidhunger.com. Siin ses istungjärgus kavatsen arutada mõne Androidi rakenduses navigeerimissahtli rakendamise üle mõne üliõpilaste kolledžirakenduse näidisega.

Navigeerimissahtli näide - androidhunger.com

Sellel rakendusel on erinevad lõigud, näiteks ajakava, eksamite ajakava, osavõtu ja tulemuste osa, mis aitab üliõpilasel saada teavet kogu kolledži värvide ja tema kaasamise kohta selles. Kõik siin kuvatavad andmed on siiski staatilised andmed, kuid võite laiendada selle ideed, et töötada välja uus selline rakendus.

Alustame siis.

Sisu:

  • Looge uus navigeerimissahtli rakendus
  • Navigeerimismenüü
  • Navigeerimismenüü üksus - kodufragment
  • Navigeerimismenüü üksus - TimeTableFragment
  • Navigeerimismenüü üksus - ExamScheduleFragment
  • Navigeerimismenüü üksus - AttendenceFragment
  • Navigeerimismenüü üksus - tulemusfragment
  • Navigeerimismenüü üksus - WebViewFragment

Looge uus navigeerimissahtli rakendus

Loon uue android-rakenduse, valides rakenduses Navigeerimissahtli tegevuse rakenduses Android Studio. Vaadake pilti allpool,

Navigeerimissahtli näide - androidhunger.com

Nii et pärast seda, kui Android Studio on teinud oma asja ja näidanud teile lõpuks „Gradli ehitamine valmis” (: P ainult nalja, kui teil on hea konfiguratsioon, laeb kõik hästi), näete mõnda paigutusfaili ja tegevusfaili (MainActivity.java) millesse on kirjutatud mingi kood. Põhimõtteliselt on sellel navigeerimismenüü, ikoonid, päis ning menüüelemendi klikkide ja kogu muu kraami käsitlemine. Siinkohal kasutan seda ja laiendan seda koodi, mille Android Studio meile vaikimisi andis: D

Navigeerimismenüü

Ma lähen samm-sammult ja räägin teile rakendusest, mida me ehitama hakkame. Esiteks lõpetan navigeerimismenüü paigutuse.

Kui avate tegevuse_main.xml faili rakenduse / res / paigutuse kataloogis, näete NavigationMenu koodi.

Ülaltoodud viimase rea rakenduse katkendis: menu = "@ menu / activity_main_drawer", mis ütleb, et selle menüü asub res kausta menüü kataloogis. Nüüd lubage meil menüü üksusi redigeerida.

Avage fail activity_main_drawer.xml ja pange sinna järgmine kood.



        <üksus
            android: id = "@ + id / kodu"
            android: icon = "@ joonistatav / ic_school_black_24dp"
            android: pealkiri = "Kodu" />
        <üksus
            android: id = "@ + id / timeTable"
            android: icon = "@ joonistatav / ic_chrome_reader_mode_black_24dp"
            android: title = "Ajatabel" />
        <üksus
            android: id = "@ + id / examSchedule"
            android: icon = "@ joonistatav / ic_schedule_black_24dp"
            android: title = "Eksamite ajakava" />
        <üksus
            android: id = "@ + id / kohalolu"
            android: icon = "@ joonistatav / ic_assessment_black_24dp"
            android: title = "Attendence" />
        <üksus
            android: id = "@ + id / tulemus"
            android: icon = "@ joonistatav / ic_timeline_black_24dp"
            android: title = "Tulemused" />
    
<üksus android: title = "Social">
        
            <üksus
                android: id = "@ + id / fb"
                android: icon = "@ joonistatav / facebook"
                android: title = "Faacebook" />
            <üksus
                android: id = "@ + id / gplus"
                android: icon = "@ joonistatav / googleplus"
                android: title = "Google +" />
            <üksus
                android: id = "@ + id / twitter"
                android: icon = "@ joonistatav / twitter"
                android: pealkiri = "Twitter" />
            <üksus
                android: id = "@ + id / youtube"
                android: icon = "@ joonistatav / youtube"
                android: title = "Youtube" />
            <üksus
                android: id = "@ + id / github"
                android: icon = "@ joonistatav / github"
                android: pealkiri = "Github" />
        
    

Kui vaatate ülaltoodud koodi, lõin menüü, kasutades menüüd, üksust ja rühma.
menüü, mis on juurelement ja millel võivad olla alamlapsed / alamelemendid, näiteks üksus ja rühm.

Üksus, mis on üks menüüelement, saame menüü jagada / eraldada, luues teise elemendi, mis on elemendi alamlaps. Andsin alammenüüle pealkirja ka „Sotsiaalne”.

Navigeerimissahtli näide - androidhunger.comNavigeerimissahtli näide - androidhunger.com

Ülaltoodud ekraanipiltidel näete iga menüüelemendi kõrval ikooni, mille saab seada androidi ikooni atribuudil android: ikoon = "@ joonistatav / pildi_nimi", need ikoonid on kas androidi vaikepildid või saate alla laadida oma ikooni soovida ja kasutada neid. Minu kasutatud sotsiaalvõrgustiku ikoonid on pärit saidilt https://icons8.com/ ülejäänud ikoonid on androidide vaikimisi ikoonid.

Nüüd on NaviginationMenu lõpule jõudnud, nüüd lingin selle menüüelemendi klõpsud sellega seotud fragmendiga.

Failis MainActivity.java

Initsialiseerisin NavigationView järgmise paari rea abil,

NavigationView navigationView = (NavigationView) findViewById (R.id.nav_view);
navigationView.setNavigationItemSelectedListener (see);

Käsitlen menüüklõpsude üksusi järgmistel koodiridadel,

avalik boolean onNavigationItemSelected (üksus MenuItem) {
        int id = item.getItemId ();
        Fragmendi fragment = null;
        Kimpude kimp = uus kimp ();
        if (id == R.id.kodu) {
            fragment = uus kodufragment ();
        } else if (id == R.id.timeTable) {
            fragment = uus TimeTableFragment ();
        } else if (id == R.id.examSchedule) {
            fragment = uus ExamScheduleFragment ();
        } else if (id == R.id.attendence) {
            fragment = uus AttendenceFragment ();
        } else if (id == R.id.result) {
            fragment = uus ResultFragment ();
        } else if (id == R.id.fb) {
            bundle.putString ("url", "https://www.facebook.com/androidhungerAH");
            fragment = uus WebViewFragment ();
            fragment.setArguments (kimp);
        } else if (id == R.id.gplus) {
            bundle.putString ("url", "https://plus.google.com/+Androidhunger");
            fragment = uus WebViewFragment ();
            fragment.setArguments (kimp);
        } else if (id == R.id.twitter) {
            bundle.putString ("url", "https://www.twitter.com/android_hunger");
            fragment = uus WebViewFragment ();
            fragment.setArguments (kimp);
        } else if (id == R.id.github) {
            bundle.putString ("url", "https://github.com/avinashn/androidhunger.com");
            fragment = uus WebViewFragment ();
            fragment.setArguments (kimp);
        } else if (id == R.id.youtube) {
            bundle.putString ("url", "https://www.youtube.com/androidhunger");
            fragment = uus WebViewFragment ();
            fragment.setArguments (kimp);
        }
        if (fragment! = null) {
            FragmentTransaction ft = getSupportFragmentManager ().
            ft.replace (R.id.sisaldusraam, fragment);
            ft.commit ();
        }
        DrawerLayout drawer = (DrawerLayout) findViewById (R.id.drawer_layout);
        drawer.closeDrawer (GravityCompat.START);
        tagasi tõsi;
    }

Siin sain iga menüüelemendi ID ja kasutan seda ID-ga uue fragmendi kontrollimiseks ja käivitamiseks ning sotsiaalsete linkide jaoks, edasin ka Android Hungerile vastava sotsiaalse võrgustiku lingi URL-i ja alustan uut tegevust, siin kasutan sama WebViewFragment kõigi oma erinevate sotsiaalsete võrgustike veebilehtede laadimiseks.

Vaatame nüüd iga fragmenti ja seda, mis on.

Navigeerimismenüü üksus - kodufragment

Funktsiooni onCreate failis HomeFragment.java initsialiseerin selle fragmendi paigutuse (R.layout.home).

avalik vaade onCreateView'is (LayoutInflater inflater, ViewGroup konteiner, Bundle savedInstanceState) {
        return inflater.inflate (R.layout.kodu, konteiner, vale);
    }

Vaadakem faili home.xml aadressil res / layout / home.xml

Navigeerimissahtli näide - androidhunger.comNavigeerimissahtli näide - androidhunger.com

Ülaltoodud ekraanipiltidesse pesin erinevad paigutused, nii horisontaalse kui vertikaalse kerimisvaate, kohandatud vaate horisontaalse eraldusjoone joonistamiseks ja palju muud.

Võite vaadata ka paigutuse komponentpuud,

Navigeerimissahtli näide - androidhunger.com

Kasutasin nime, poolaasta, osakonna ja registreerimisnumbri kuvamiseks LinearLayout'i, paigutus on järgmine,


        

 

Järgmisena kasutasin atribuuti Vaata, et näidata horisontaalset joont eraldajana,

 

Siis lihtne TextView, mis ütleb olulist teavet.

Nüüd ScrollView, milles on mõned tekstivaated. Kuna teate, et ScrollView'l peaks olema ainult üks laps, siis kasutan LinearLayout'i ja paigutan kogu TextView sinna.


Järgmisena kuvatakse mõne nupu kuvamiseks HorizontalScrollView,



Käsitlen nüüd selle nupu klikkide fragmenti (HomeFragment).

Alustage nupud, kasutades meetodit viewCreated (), järgmised read.

Button btn = (Button) getView (). FindViewById (R.id.btnID);

Ma määran sellele ühe kuulaja,

btn.setOnClickListener (see);

Nüüd lasen fragmendil klõpsu kuulajaid rakendada.

avaliku klassi kodufragment laiendab fragmendirakendusi View.OnClickListener {
....}

Nüüd loob see uue meetodi onClickil,

avalik tühine onClick (vaade v) {
        Fragmendi fragment = null;
        lüliti (v.getId ()) {
            juhtum R.id.btnTimeTable:
                fragment = uus TimeTableFragment ();
                vaheaeg;
            ......
            ......
        }
        getActivity (). getSupportFragmentManager (). beginTransaction ()
                .replace (R.id.sisusraam, fragment)
                .addToBackStack (null)
                .koostama ();
    }

Nüüd, kui nupule klõpsatakse, alustan sellega seotud fragmenti.

Navigeerimismenüü üksus - TimeTableFragment

Funktsioonis onCreate failis TimeTableFragment.java initsialiseerin selle fragmendi paigutuse (R.layout.timetable).

avalik vaade onCreateView'is (LayoutInflater inflater, ViewGroup konteiner, Bundle savedInstanceState) {
        return inflater.inflate (R.layout.tähtajaline, konteiner, vale);
    }

Vaadakem faili timetable.xml faili aadressil res / layout / timetable.xml

Navigeerimissahtli näide - androidhunger.com

Paigutuse komponentpuu,

Navigeerimissahtli näide - androidhunger.com

Siin on põhiosa TableLayout, kus kuvatakse ajakava koos subjektide ja ajaga ning selle all LinearLayout subjektide täisnimede kuvamiseks.

Samuti paigutasin need kaks paigutust ScrollView'sse ja ScrollView 'keskpunkti tegemiseks kasutasin androidide seadistamiseks RelativeLayout: layout_centerVertical = "true" kui ScrollView atribuut.

TableLayout'il on mitu alamelementi TableRow ja siin paigutasin mõned TextView'd selle ridadesse.

.....

Järgmisena tekstivaate lineaarne paigutus iga subjekti nime kuvamiseks.

Navigeerimismenüü üksus - ExamScheduleFragment

Funktsiooni onCreate failis ExamScheduleFragment.java initsialiseerin selle fragmendi paigutuse (R.layout.examschedule).

avalik vaade onCreateView'is (LayoutInflater inflater, ViewGroup konteiner, Bundle savedInstanceState) {
        return inflater.inflate (R.layout.examschedule, konteiner, false);
    }

Vaatame faili examschedule.xml aadressil res / layout / examschedule.xml

Navigeerimissahtli näide - androidhunger.com

See paigutus on üsna lihtne, see koosneb lihtsalt tekstvaates kõigist ScrollView-vormingus

Navigeerimissahtli näide - androidhunger.com

Allpool on paigutuse fragment,


 
             ...
             ...

Navigeerimismenüü üksus - AttendenceFragment

Funktsiooni onCreate failis AttendenceFragment.java initsialiseerin selle fragmendi paigutuse (R.layout.attendence).

avalik vaade onCreateView'is (LayoutInflater inflater, ViewGroup konteiner, Bundle savedInstanceState) {
        return inflater.inflate (R.layout.attendence, konteiner, false);
    }

Vaatame faili examschedule.xml aadressil res / layout / attendence.xml

Navigeerimissahtli näide - androidhunger.comNavigeerimissahtli näide - androidhunger.comNavigeerimissahtli näide - androidhunger.com

Nii et ma kasutasin semestri valimiseks lihtsalt lihtsat ketrajat ja seejärel selle semestri osavõtu kuvamiseks TextView'is. Spinner on midagi sellist, mida saate ka rippmenüüks nimetada. Spinneris on mõned meetodid, nagu näiteks saidil OnItemSelected, nii et saaksime midagi teha, kui Spinneris olev element on muutunud. Vaatame nüüd kõike seda lahedat kraami.

Initsialiseerin AttendenceFragmentis selle Spinneri,

Spinner spinner = (Spinner) view.findViewById (R.id.semSpinner);

määrake sellele ka adapter, et Spinneris mõnda eset kuvada.

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

Siin hoidsin Spinneri loendit eraldi failis nimega `srings.xml`, kuhu saame salvestada kõik meie rakenduses kasutatavad stringid.

Avage /app/res/values/strings.xml ja lisage järgmine stringimassiiv.


     Semister 1 
     Semister 2 
     Semister 3 

Nii et ma kasutasin seda massiivi adapterina R.array.semisters.

Nii et nüüd näitasin Spinnerit mõne esemega, samuti pean kuulama esemevahetust Spinneris. Nii et ma kasutan sellel Spinneril valitud kuulajat.

spinner.setOnItemSelectedListener (see);

ja meetodit, mida kasutada AdapterView.OnItemSelectedListeneri rakendamisel

@Ülesõit
public void onItemSelected (AdapterView  vanem, vaade vaade, int positsioon, pikk id) {
    Keelsemester = parent.getItemAtPosition (positsioon) .toString ();
if (semester.equals ("Semister 1")) {
        textView.setText ("Teie osalus sellel Seminaril on 82%");
    } else if (semester.equals ("Semister 2")) {
        textView.setText ("Teie osavõtt sellest Seminarist on 86,8%");
    } else if (semester.equals ("Semister 3")) {
        textView.setText ("Teie osalus selles Seminis on praeguse seisuga 73,8%.");
    }

}
Nii et kui poolaasta muutub, värskendasin just TextView'd osalemise staatilise väärtusega.

Navigeerimismenüü üksus - tulemusfragment

Ekraan Tulemus on väga sarnane eelmise ekraanikülastusega, siin kasutan sama paigutust, ainus muudatus on TextView, kui üksust Spinner muudetakse.

Vaadake järgmist katkendit

@Ülesõit
public void onItemSelected (AdapterView  vanem, vaade vaade, int positsioon, pikk id) {
    Keelsemester = parent.getItemAtPosition (positsioon) .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 ("Pole veel saadaval");
    }
}

Navigeerimismenüü üksus - WebViewFragment

Navigeerimismenüüs on mõned sotsiaalsed lingid, nagu Facebook, G +, Twitter, YouTube ja Github. Nii et kui neid üksusi vajutada, laadin selle seotud veebilehe üles. WebView'i Androidi rakenduse üksikasjalikku selgitust käsitletakse minu eelmises postituses.

Nii et edastasin äsja arutatud meetodi onMainActivity veebisaidil onNavigationIemSelected vastava sotsiaalvõrgustiku saidi URL-i WebViewFragment'ile, mis seejärel veebilehe laadib.

Nii et loen WebViewFragmentis saadetud URL-i,

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

ja edastage see funktsioonile callWebClient, mis kutsub WebViewClienti,

callWebClient (gurl);

ja callWebClient (gurl); funktsioon,

privaatne tühine kõneWebClient (stringi URL) {
    wv.setWebViewClient (uus myWebViewClient ());
    wv.getSettings (). setLoadsImagesAutomatically (true);
    wv.getSettings (). setJavaScriptEnabled (tõene);
    wv.setScrollBarStyle (vaade.SCROLLBARS_INSIDE_OVERLAY);
    wv.loadUrl (urll);
}
Navigeerimissahtli näide - androidhunger.comNavigeerimissahtli näide - androidhunger.comNavigeerimissahtli näide - androidhunger.com

See on selle postituse jaoks, palun vaadake julgelt mõnda eelmist postitust siin.

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

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

Rakenduse demo: https://www.youtube.com/watch?v=-IVrNgFzV6g