2016-11-30 13 views
8

Klasa TabLayout w Androidzie udostępnia TabItem, który umożliwia określenie tekstu i ikony. Czy można użyć niestandardowego widoku jako TabItem?Czy niestandardowy widok może być używany jako element TabItem?

Zakładka będzie wyglądać następująco

enter image description here

jak widać oprócz ikony i etykiety tekstowe, mam również symbol zgłoszenia (numer wewnątrz żółtym kółku). jak mogę tworzyć takie karty?

Odpowiedz

17

W niektórych przypadkach zamiast domyślnego widoku kart możemy zastosować niestandardowy układ XML dla każdej karty. Aby to osiągnąć, iteracyjne nad wszystkimi TabLayout.Tabs po podłączeniu zaczepy ślizgowe do pagera:

public class MainActivity extends AppCompatActivity { 

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

     // Get the ViewPager and set it's PagerAdapter so that it can display items 
     ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); 
     SampleFragmentPagerAdapter pagerAdapter = 
      new SampleFragmentPagerAdapter(getSupportFragmentManager(), MainActivity.this); 
     viewPager.setAdapter(pagerAdapter); 

     // Give the TabLayout the ViewPager 
     TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); 
     tabLayout.setupWithViewPager(viewPager); 

     // Iterate over all tabs and set the custom view 
     for (int i = 0; i < tabLayout.getTabCount(); i++) { 
      TabLayout.Tab tab = tabLayout.getTabAt(i); 
      tab.setCustomView(pagerAdapter.getTabView(i)); 
     } 
    } 

    //... 
} 

Następny dodamy metodę getTabView (pozycja) do klasy SampleFragmentPagerAdapter:

public class SampleFragmentPagerAdapter extends FragmentPagerAdapter { 
    private String tabTitles[] = new String[] { "Tab1", "Tab2" }; 
    private int[] imageResId = { R.drawable.ic_one, R.drawable.ic_two }; 

    public View getTabView(int position) { 
     // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView 
     View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null); 
     TextView tv = (TextView) v.findViewById(R.id.textView); 
     tv.setText(tabTitles[position]); 
     ImageView img = (ImageView) v.findViewById(R.id.imgView); 
     img.setImageResource(imageResId[position]); 
     return v; 
    } 

} 

Z w ten sposób można skonfigurować dowolną zawartość karty niestandardowej dla każdej strony w adapterze.

SOURCE

+0

oczywiście! nie mogę uwierzyć, że nie widziałem klasy setCustomView w Tablayout.Tab. Dziękujemy, –

+0

, ale nie działa on na detektorTabChange, aby wyświetlić wybraną kartę z podświetlonym kolorem –

Powiązane problemy