La classe TabLayout dans Android vous fournit un TabItem qui vous permet de spécifier un texte et une icône. Est-il possible d'utiliser une vue personnalisée en tant que TabItem?
Mon onglet ressemblerait à ceci
comme vous pouvez le voir à côté d'une icône et d'une étiquette de texte, j'ai aussi un symbole de notification (un nombre à l'intérieur d'un cercle jaune). comment puis-je faire des onglets comme ça?
Dans certains cas, au lieu de la vue par défaut, nous souhaiterons peut-être appliquer une présentation XML personnalisée à chaque onglet. Pour ce faire, parcourez tous les TabLayout.Tabs après avoir attaché les onglets coulissants au pager:
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));
}
}
//...
}
Ensuite, nous ajoutons la méthode getTabView (position) à la classe 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;
}
}
Avec cela, vous pouvez configurer n'importe quel contenu d'onglet personnalisé pour chaque page de l'adaptateur.
Essaye ça
private View mCustomView;
private ImageView mImageViewCustom;
private TextView mTextViewCustom;
private int count = 0;
public View getCustomTab() {
mCustomView = LayoutInflater.from(NewHomePageActivity.this).inflate(R.layout.custom_tab, null);
mImageViewCustom = (ImageView) mCustomView.findViewById(R.id.custom_tab_imageView);
mTextViewCustom = (TextView) mCustomView.findViewById(R.id.custom_tab_textView_count);
if (count > 0) {
mTextViewCustom.setVisibility(View.VISIBLE);
mTextViewCustom.setText(String.valueOf(count));
} else {
mTextViewCustom.setVisibility(View.GONE);
}
return mCustomView;
}
private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(R.mipmap.ic_home_gray_48);
tabLayout.getTabAt(1).setIcon(R.mipmap.ic_follow_gray_48);
tabLayout.getTabAt(2).setIcon(R.mipmap.ic_follower_gray_48);
tabLayout.getTabAt(3).setIcon(R.mipmap.ic_news_event_gray_48);
tabLayout.getTabAt(4).setCustomView(getCustomTab());
tabLayout.getTabAt(5).setIcon(R.mipmap.ic_menu_gray_48);
}
XML
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:background="@color/colorPrimary">
<ImageView
Android:id="@+id/custom_tab_imageView"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:background="@mipmap/ic_bell_gray_48"
Android:contentDescription="@string/image_dsc" />
<TextView
Android:id="@+id/custom_tab_textView_count"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="right"
Android:layout_marginEnd="5dp"
Android:layout_marginRight="5dp"
Android:layout_marginBottom="5dp"
Android:background="@drawable/shape_circle"
Android:padding="2dp"
Android:text="1"
Android:textColor="@color/colorWhite"
Android:textSize="11sp" />
</FrameLayout>