Anche se probabilmente un po 'tardi per rispondere a questa domanda ora, mi sono reso conto che ho scritto an answer on a similar question che copre sia utilizzando la libreria di supporto Disegno e prima del Google I/O.
Dal Android Developers' Blogspot post on the Android Design Support Library:
Tabs:
Passare da diversi punti di vista nella vostra applicazione tramite tabs non è un concetto nuovo per la progettazione di materiale e sono ugualmente nel paese come un top level navigation pattern o per organizzare diversi raggruppamenti di contenuti all'interno della tua app (ad esempio, diversi generi di musica).
TabLayout attrezzi della biblioteca design entrambe le linguette fisse, in cui la larghezza della visualizzazione è suddivisa equamente tra tutte le schede, così come linguette scorrevoli, in cui le linguette non sono di dimensioni uniformi e possono scorrere orizzontalmente. Le schede possono essere aggiunte a livello di codice:
TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
Tuttavia, se si utilizza un ViewPager per la paginazione orizzontale tra le schede, è possibile creare schede direttamente da s' getPageTitle() e quindi collegare i due insieme utilizzando le PagerAdaptersetupWithViewPager()
. Ciò garantisce che gli eventi di selezione delle schede aggiornino ViewPager e le modifiche alle pagine aggiornino la scheda selezionata.
Se non si utilizza la Design Library di supporto, è invece necessario effettuare le seguenti operazioni:
1. Scaricare i file SlidingTabLayout.java
e SlidingTabStrip.java
della Conferenza di I/O di Google app su GitHub. Queste sarebbero le viste che verrebbero utilizzate nel layout delle schede, quindi ho creato una cartella con le altre mie attività Java denominate 'Visualizza' e le ho posizionate lì.
2. Modificare il layout per includere il SlidingTabLayout
: un altro file XML
<LinearLayout
android:orientation="vertical"
... >
<!-- This is the Toolbar with the tabs underneath -->
<LinearLayout
android:orientation="vertical"
... >
<include android:id="@+id/my_toolbar" layout="@layout/toolbar" />
<com.mycompany.myapp.SlidingTabLayout
android:id="@+id/sliding_tabs"
android:background="?attr/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<!-- This is the ViewPager (which you already should have if you have
used tabs before) -->
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
...
</LinearLayout>
La linea che fa riferimento al Toolbar
(<include android:id="@+id/detail_toolbar" layout="@layout/toolbar" />
), fa riferimento avevo usato per fare il Toolbar
.
3. Cambiare i nomi dei pacchetti in SlidingTabLayout.java
e SlidingTabStrip.java
corrispondente al punto in cui sono stati collocati. Nel mio caso, ho usato qualcosa di simile a: package com.mycompany.myapp.view;
per entrambi questi file. Organizza le importazioni e aggiungi qualsiasi cosa necessaria, come indicato dall'IDE che stai utilizzando.
4. Nel vostro Activity
(che stava estendendo AppCompatActivity
), impostare il Toolbar
nel metodo onCreate
:
Toolbar toolbar = (Toolbar) findViewById(R.id.detail_toolbar);
setSupportActionBar(toolbar);
5. Setup i ViewPager
e SlidingTabLayout
parti:
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.tab_line));
mSlidingTabLayout.setDistributeEvenly(true);
mSlidingTabLayout.setViewPager(mViewPager);
Il colore 'tab_line
' era un colore che avevo dichiarato in color.xml
che sarebbe il colore dell'indicatore di tabulazione. Si noti inoltre che le variabili di cui sopra sono stati globale che ho definito in precedenza in questa attività:
SlidingTabLayout mSlidingTabLayout;
ViewPager mViewPager;
6. Infine, impostare il ViewPagerAdapter
che avevo chiamato prima. Questo sarebbe responsabile della modifica della pagina a seconda della scheda selezionata. Ho usato il codice seguente:
public class ViewPagerAdapter extends FragmentPagerAdapter {
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public int getCount() {
// Returns the number of tabs
return 3;
}
@Override
public Fragment getItem(int position) {
// Returns a new instance of the fragment
switch (position) {
case 0:
return new FragmentOne();
case 1:
return new FragmentTwo();
case 2:
return new FragmentThree();
}
return null;
}
@Override
public CharSequence getPageTitle(int position) {
Locale l = Locale.getDefault();
switch (position) {
case 0:
return getString(R.string.title_section1).toUpperCase(l);
case 1:
return getString(R.string.title_section2).toUpperCase(l);
case 2:
return getString(R.string.title_section3).toUpperCase(l);
}
return null;
}
}
Come già accennato, ulteriori dettagli in queste soluzioni sono disponibili su another question I answered, about using Sliding Tabs with the Toolbar.
Cosa fare se non ho bisogno del ViewPager e voglio le schede? – Noundla
@noundla Probabilmente è possibile utilizzare RadioGroup + RadioButton e modificarli in modo che sembrino come schede –
Ho la stessa idea se non trovo nulla. Sto cercando le schede della barra degli strumenti se c'è qualcosa come Actionbar con schede. Grazie per il suggerimento. – Noundla