2015-06-17 12 views
48

Sto utilizzando il supporto alla progettazione per creare schede. Sto anche usando ViewPager per le schede scorrevoli.Tablayout con solo icone

Ora, non so come utilizzare solo le icone anziché i testi nelle schede. Ho provato a scoprirlo ma non ho avuto alcun successo.

Il mio codice:

Toolbar toolbar; 
private TabLayout tabLayout; 
private ViewPager viewPager; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
    viewPager = (ViewPager) findViewById(R.id.pager); 
    setupViewPager(viewPager); 
    setupTablayout(); 
} 

private void setupTablayout() { 
    tabLayout = (TabLayout) findViewById(R.id.tabLayout); 
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); 
    tabLayout.setupWithViewPager(viewPager); 
} 

class MyPagerAdapter extends FragmentPagerAdapter { 

    private final List<Fragment> mFragmentList = new ArrayList<>(); 
    private final List<String> mFragmentTitleList = new ArrayList<>(); 

    public MyPagerAdapter(FragmentManager manager) { 
     super(manager); 
    } 

    @Override 
    public Fragment getItem(int position) { 
     return mFragmentList.get(position); 
    } 

    @Override 
    public int getCount() { 
     return mFragmentList.size(); 
    } 

    public void addFrag(Fragment fragment, String title) { 
     mFragmentList.add(fragment); 
     mFragmentTitleList.add(title); 
    } 

    @Override 
    public CharSequence getPageTitle(int position) { 
     mFragmentTitleList.get(position) 
    } 
} 

private void setupViewPager(ViewPager viewPager) { 
    MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager()); 
    adapter.addFrag(new frag(), "CAT"); 
    adapter.addFrag(new frag(), "DOG"); 
    adapter.addFrag(new frag(), "BIRD"); 
    viewPager.setAdapter(adapter); 
} 
+0

provare testi scrivibili. prova la mia risposta [qui] (http://stackoverflow.com/questions/29534420/how-can-i-develop-the-pagerslidingtabstrip-with-images-in-android/29535378#29535378). Vota se ti aiuta. – Harry

risposta

133

Un approccio è la creazione di icone dopo TabLayout.setupWithViewPager() metodo.

mTabLayout.setupWithViewPager(mViewPager); 
for (int i = 0; i < mTabLayout.getTabCount(); i++) { 
    mTabLayout.getTabAt(i).setIcon(R.drawable.your_icon); 
} 
+0

grazie, brillante soluzione – IlyaEremin

+0

funzionante buona ... bella –

+1

Grazie - impazzendo fantastico. – Simon

23

Il tutorial mostrato nel seguente link dovrebbe coprire ciò che si desidera. https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout#add-icons-to-tablayout

Ho copiato la sezione pertinente di seguito.

aggiungere icone per TabLayout

Attualmente, la classe TabLayout non prevede un modello di astrazione pulito che permette di icone nella scheda. Ci sono molte soluzioni, una delle quali è di restituire uno SpannableString, contenente l'icona in un ImageSpan, dal metodo getPageTitle (posizione) del PagerAdapter inviato come illustrato nel frammento di codice qui sotto:

private int[] imageResId = { 
     R.drawable.ic_one, 
     R.drawable.ic_two, 
     R.drawable.ic_three 
}; 

// ... 

@Override 
public CharSequence getPageTitle(int position) { 
    // Generate title based on item position 
    // return tabTitles[position]; 
    Drawable image = context.getResources().getDrawable(imageResId[position]); 
    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); 
    SpannableString sb = new SpannableString(" "); 
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); 
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
    return sb; 
} 

Per impostazione predefinita, la scheda creato da TabLayout imposta la proprietà textAllCaps come true, impedendo il rendering di ImageSpans. È possibile ignorare questo comportamento modificando la proprietà tabTestAppearance.

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"> 
     <item name="tabTextAppearance">@style/MyCustomTextAppearance</item> 
    </style> 

    <style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab"> 
     <item name="textAllCaps">false</item> 
    </style> 
+3

Tab non mostrerà alcuna icona, anche impostando' textAllCaps = false' non fa nulla – pnavk

+0

Funziona bene. Grazie! – Ziem

+1

Quando provo a creare il mio codice, ottengo questo errore: Nessun identificatore di risorsa trovato per l'attributo "tabTextAppearance" nel pacchetto "android" – larrytech

3

In TabLayout, impostando icona è facile:

getPageTitle(position) dovrebbe restituire null (se non si vuole il titolo per mostrare).

successivo:

tabLayout.getTabAt(0).setIcon(resId); 

tabLayout.getTabAt(1).setIcon(resId); 

...... 
+1

Ho provato questo e l'icona è nella parte superiore del testo. Come fare l'icona a sinistra del testo? – HelloSilence

+0

nel mio caso, se lascio getPageTitle() come è allora ... l'icona viene visualizzata accanto al titolo ... Può essere che il testo del titolo è troppo grande nel tuo caso. – Bhuwan

4

Il modo più semplice che ho trovato per usare le icone è quello di utilizzare Tablayout.Tab.setIcon (disegnabile). Ciò semplifica anche l'evidenziazione dell'icona selezionata. Se si desidera eseguire questa operazione, attenersi alla seguente procedura.

Passaggio 1. Aggiungere le immagini alle cartelle res.mipmap. (mipmap-mdpi, hdpi, ecc.) A giudicare dalle altre risposte qui va bene anche inserirle nelle cartelle res.drawable.

Passaggio 2. Chiama setIcon su tutte le schede dopo aver configurato TabLayout e ViewPager. Ho fatto questo nel mio AdapterTabs per mantenere l'attività in ordine. Quindi nella vostra attività fare questo: il metodo

tablayout = (TabLayout) findViewById(R.id.tab_layout); 
    viewPager = (ViewPager) findViewById(R.id.viewPager); 
    adapterTabs = new AdapterTabs(this, getSupportFragmentManager(), fragments, tablayout, viewPager); 

    viewPager.setAdapter(adapterTabs); 
    tablayout.setupWithViewPager(viewPager); 
    adapterTabs.setTabIcons(); 

e nelle vostre AdapterTabs, che dovrebbe estendersi FragmentPagerAdapter, mettere le setTabIcons().

public void setTabTitlesToIcons() { 
    Drawable icon1 = context.getResources().getDrawable(R.mipmap.ic_1); 
    Drawable icon2 = context.getResources().getDrawable(R.mipmap.ic_2); 
    Drawable icon3 = context.getResources().getDrawable(R.mipmap.ic_3); 
    Drawable icon1Hilighted = context.getResources().getDrawable(R.mipmap.ic_1_selected); 
    Drawable icon2Hilighted = context.getResources().getDrawable(R.mipmap.ic_2_selected); 
    Drawable icon3Hilighted = context.getResources().getDrawable(R.mipmap.ic_3_selected); 

    icons.add(icon1); 
    icons.add(icon2); 
    icons.add(icon3); 
    iconsHilighted.add(icon1Hilighted); 
    iconsHilighted.add(icon2Hilighted); 
    iconsHilighted.add(icon3Hilighted); 

    for(int i = 0; i < icons.size(); i++) { 
     if(i == 0) { 
      //noinspection ConstantConditions 
      tabLayout.getTabAt(i).setIcon(iconsSelected.get(i)); 
     } 
     else { 
      //noinspection ConstantConditions 
      tabLayout.getTabAt(i).setIcon(icons.get(i)); 
     } 
    } 
} 

Assicurarsi di memorizzare un riferimento alle due icone "Icone" e "Icone HD". Ne avrai bisogno in seguito. Memorizza anche un riferimento a TabLayout e al ViewPager che hai passato dall'attività.

Punto 3. Assicurarsi che AdapterTabs.getPageTitle() restituisca null. A questo punto, se lo si esegue si dovrebbe vedere che la prima icona è evidenziata.

Fase 4. Implementare ViewPager.OnPageChangeListener in AdapterTabs e aggiungere che chi ascolta al vostro viewPager

public AdapterTabs(Context context, FragmentManager fragmentManager, List<Fragment> fragments, TabLayout tabLayout, ViewPager viewPager) { 
    super(fragmentManager); 
    this.context = context; 
    this.tabLayout = tabLayout; 
    this.viewPager = viewPager; 
    this.viewPager.addOnPageChangeListener(this); 

    tabs.add(fragments.get(0)); 
    tabs.add(fragments.get(1)); 
    tabs.add(fragments.get(2)); 
} 

Fase 5. Aggiornare le icone nelle schede nella richiamata onPageSelected nelle AdapterTabs.

@Override 
public void onPageSelected(int position) { 
    for (int i = 0; i < tabs.size(); i++) { 
     if(i == position) { 
      //noinspection ConstantConditions 
      tabLayout.getTabAt(i).setIcon(iconsSelected.get(i)); 
     } 
     else { 
      //noinspection ConstantConditions 
      tabLayout.getTabAt(i).setIcon(icons.get(i)); 
     } 
    } 
} 

Ora si dovrebbe vedere l'icona hilighted che si aggiorna quando si cambiano le schede.

+1

Sono disponibili speciali drawable per questo chiamato selettori in cui è possibile configurare diversi stati. – Roel

13

provare questo

public class GlobalActivity extends AppCompatActivity { 
    Toolbar toolbar; 
    ViewPager viewPager; 
    TabLayout tabLayout; 
    ViewPagerAdapter adapter; 
    private int[] tabIcons = { 
      R.drawable.home_ic, 
      R.drawable.biz_ic, 
      R.drawable.network_ic, 
      R.drawable.offers_ic, 
      R.drawable.message_ic_b 
    }; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_global_hub); 
     tab(); 
    } 
    public void tab(){ 
     viewPager = (ViewPager) findViewById(R.id.viewpager); 
     setupViewPager(viewPager); 
     tabLayout = (TabLayout) findViewById(R.id.tablayout); 
     tabLayout.setupWithViewPager(viewPager); 
     setupTabIcons(); 

    } 
    private void setupTabIcons() { 
     tabLayout.getTabAt(0).setIcon(tabIcons[0]); 
     tabLayout.getTabAt(1).setIcon(tabIcons[1]); 
     tabLayout.getTabAt(2).setIcon(tabIcons[2]); 
     tabLayout.getTabAt(3).setIcon(tabIcons[3]); 
     tabLayout.getTabAt(4).setIcon(tabIcons[4]); 

    } 
    public void setupViewPager(ViewPager viewPager){ 
     adapter = new ViewPagerAdapter(getSupportFragmentManager()); 
     adapter.addFrag(new GlHubFragment(),"HOME"); 
     adapter.addFrag(new BizForumFragment(), "BIZ FORUM"); 
     adapter.addFrag(new NetworkFragment(), "NETWORK"); 
     adapter.addFrag(new MessagesFragment(), "MESSAGEs"); 
     adapter.addFrag(new OfferFragmentActivity(), "OFFER"); 
     viewPager.setAdapter(adapter); 
    } 

    public class ViewPagerAdapter extends FragmentPagerAdapter{ 
     private final List<Fragment> mfragmentlist =new ArrayList<>(); 
     private final List<String> mFragmentTitleList = new ArrayList<>(); 
     public ViewPagerAdapter(FragmentManager fm) { 
      super(fm); 
     } 

     @Override 
     public Fragment getItem(int position) { 
      return mfragmentlist.get(position); 
     } 

     @Override 
     public int getCount() { 
      return mfragmentlist.size(); 
     } 
     public void addFrag(Fragment fragment,String title){ 
      mfragmentlist.add(fragment); 
      mFragmentTitleList.add(title); 
     } 
     @Override 
     public CharSequence getPageTitle(int position){ 
      return mFragmentTitleList.get(position); 
     } 
    } 
} 
22

Nella nuova versione del TabLayout, Google ha aggiunto TabItem che può facilmente aggiungere Icona attraverso il vostro XML con seguente codice:

<android.support.design.widget.TabLayout 
     app:tabTextColor="@color/gray" 
     app:tabMode="fixed" 
     app:tabBackground="@color/red" 
     app:tabIndicatorHeight="4dp" 
     app:tabIndicatorColor="@color/purple" 
     app:tabPadding="2dp" 
     app:tabSelectedTextColor="@color/white" 
     app:tabMinWidth="64dp" 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent"> 

    <!--add height and width to TabItem --> 
    <android.support.design.widget.TabItem 
      android:text="@string/tab_text"/> 

    <android.support.design.widget.TabItem 
      android:icon="@drawable/ic_android"/> 

</android.support.design.widget.TabLayout> 

Tutte here.

+1

questo è il modo effettivo di aggiungere icone :) –

+2

Se utilizzato con un cercapersone di vista, visualizza le chiamate cercapersone removeAllTabs() che rimuove qualsiasi elemento di tabulazione aggiunto tramite il file di layout. – JDL

3

Nessuno di questi metodi è elegante quando si utilizza TabLayout come scenario "Decor" di ViewPager. TabLayout Documentation Ecco una semplice estensione di TabLayout e PagerAdapter che fornisce una semplice sostituzione in sostituzione di TabLayout che dovrebbe essere possibile utilizzare in entrambi gli scenari senza aggiungere manualmente icone all'esterno della classe TabLayout e seguendo l'utilizzo di PagerAdapter per ottenere le informazioni della scheda.

/** 
* Created by JDL on 1/18/2017. 
*/ 
public class TabLayoutExt extends TabLayout { 

    protected ViewPager mViewPager; 

    public abstract static class TabLayoutViewPagerAdapter extends PagerAdapter { 
     public TabLayoutViewPagerAdapter() { 
     } 

     /** 
     * This method may be called by the TabLayout to obtain an icon drawable 
     * to for the specified tab. This method may return null 
     * indicating no tab icon for this page. The default implementation returns 
     * null. 
     * 
     * @param position The position of the title requested 
     * @return A drawable icon for the requested page 
     */ 
     public Drawable getPageIcon(Context context, int position) { 
      return null; 
     } 
    } 

    public TabLayoutExt(Context context) { 
     super(context); 
    } 

    public TabLayoutExt(Context context, AttributeSet attrs) { 
     super(context, attrs); 
    } 

    public TabLayoutExt(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
    } 

    @Override 
    protected void onAttachedToWindow() { 
     //Cover the implicit setup in TabLayout 
     if (mViewPager == null) { 
      final ViewParent vp = getParent(); 
      if (vp instanceof ViewPager) { 
       mViewPager = (ViewPager)vp; 
      } 

     } 
     super.onAttachedToWindow(); 
    } 

    public void addTab(@NonNull Tab tab, int position, boolean setSelected) { 
     if (mViewPager != null && mViewPager.getAdapter() instanceof TabLayoutViewPagerAdapter) { 
      Drawable icon = ((TabLayoutViewPagerAdapter) mViewPager.getAdapter()).getPageIcon(getContext(),position); 
      tab.setIcon(icon); 
     } 
     super.addTab(tab,position,setSelected); 

    } 

    @Override 
    public void setupWithViewPager(@Nullable ViewPager viewPager, boolean autoRefresh) { 
     mViewPager = viewPager; 
     super.setupWithViewPager(viewPager, autoRefresh); 
    } 
} 

Quindi, tutto ciò che deve essere fatto è estendere TabLayoutViewPagerAdapter invece di PageAdapter e implementare getPageIcon(Context,int) in sostituzione o in aggiunta al titolo. Il calo di TabLayoutExt nel file XML, invece del normale TabLayout. Questo potrebbe essere esteso per modificare ulteriormente la scheda, sia con una vista personalizzata che con qualcos'altro.

-1

Questa potrebbe non essere la risposta migliore per tutti i casi, ma ciò che ho trovato non ha ancora risolto il mio problema.

Dopo aver esaminato l'implementazione di Androids di tabLayout.setupWithViewPager(ViewPager pager), ho trovato una soluzione che utilizza solo gli ascoltatori.

La struttura del layout:

| LinearLayout (vertical) 
|-- TabLayout (width: match_parent) 
|---- TabItem (without text, just icons) 
|---- TabItem 
|---- ... 
|-- ViewPager 

Codice per gli ascoltatori entrambi:

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
    @Override 
    public void onTabSelected(TabLayout.Tab tab) { 
     pager.setCurrentItem(tab.getPosition()); 
    } 

    @Override 
    public void onTabUnselected(TabLayout.Tab tab) { 
    } 

    @Override 
    public void onTabReselected(TabLayout.Tab tab) { 
    } 
}); 
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
    @Override 
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
     tabLayout.setScrollPosition(position, positionOffset, false); 
    } 

    @Override 
    public void onPageSelected(int position) { 
     TabLayout.Tab tab = tabLayout.getTabAt(position); 
     if (tab != null) { 
      tab.select(); 
     } 
    } 

    @Override 
    public void onPageScrollStateChanged(int state) { 
    } 
}); 

Date un'occhiata al tabLayout.setScrollPosition chiamata all'interno OnPageChangeListener.onPageScrolled per lo spostamento più o meno buone dell'indicatore durante lo scorrimento.

Questo potrebbe non funzionare se la larghezza di TabLayout non è impostata su match_parent (o deve essere scorrevole).

Saluti

0

il modo più semplice è creare nuova tabella impostando Icon su tablayout. sotto il codice verranno create due schede con solo l'icona. utilizzare questo codice sul metodo onCreate()

tablayout = (TabLayout) findViewById(R.id.order_tablayout); 
tablayout.addTab(tablayout.newTab().setIcon(getResources().getDrawable(R.mipmap.ic_shopping_cart_white_24dp))); 
tablayout.addTab(tablayout.newTab().setIcon(getResources().getDrawable(R.mipmap.ic_like2_fille_white_24dp))); 
0

Provare questo funzionerà sicuramente.

private TabLayout tabLayout; 
private ViewPager viewPager; 
private int[] tabIcons = { 
     R.drawable.single, 
     R.drawable.multiple}; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_contact_picker); 

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
    toolbar.setTitle("Choose contact"); 
    setSupportActionBar(toolbar); 
    getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
    tab(); 
} 


public void tab(){ 
    viewPager = (ViewPager) findViewById(R.id.viewpager); 
    setupViewPager(viewPager); 
    tabLayout = (TabLayout) findViewById(R.id.tabs); 
    tabLayout.setupWithViewPager(viewPager); 
    setupTabIcons(); 
} 

private void setupTabIcons() { 
    tabLayout.getTabAt(0).setIcon(tabIcons[0]); 
    tabLayout.getTabAt(1).setIcon(tabIcons[1]); 

} 

private void setupViewPager(ViewPager viewPager) { 
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); 
    adapter.addFragment(new Login()); 
    adapter.addFragment(new Register()); 
    viewPager.setAdapter(adapter); 
} 

class ViewPagerAdapter extends FragmentPagerAdapter { 
    private final List<Fragment> mFragmentList = new ArrayList<>(); 

    public ViewPagerAdapter(FragmentManager manager) { 
     super(manager); 
    } 

    @Override 
    public Fragment getItem(int position) { 
     return mFragmentList.get(position); 
    } 

    @Override 
    public int getCount() { 
     return mFragmentList.size(); 
    } 

    public void addFragment(Fragment fragment) { 
     mFragmentList.add(fragment); 

    } 


}