Peut une vue personnalisée être utilisé comme un TabItem?

La TabLayout classe dans android vous offre une TabItem qui peut vous permettre de spécifier un texte et une icône.
Est-il possible d'utiliser un affichage personnalisé comme un TabItem?

Mon onglet ressemblerait à ceci

comme vous pouvez le voir en plus une icône et un texte de l'étiquette, j'ai également une notification symbole (un nombre à l'intérieur d'un cercle jaune). comment puis-je faire des onglets comme ça?

OriginalL'auteur Denny George | 2016-11-30

Dans certains cas, au lieu de la valeur par défaut de l'onglet vue, on peut décider d'appliquer une custom XML de mise en page pour chaque onglet. Pour atteindre cet objectif, une itération sur tous les TabLayout.Les onglets après la fixation de l'coulissantes onglets pour le 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 les getTabView(position) méthode de la SampleFragmentPagerAdapter classe:

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 programmer le contenu de l'onglet personnalisé pour chaque page de la carte.

SOURCE

bien sûr! ne peux pas croire que je n'ai pas voir le setCustomView dans Tablayout.Onglet de classe. Merci
mais sa ne fonctionne pas onTabChange à l'écoute, pour afficher l'Onglet sélectionné avec la couleur claire
Pour modifier l'onglet couleur du texte vous pouvez créer un customView et remplacer le setSelected(boolean sélectionné) méthode pour modifier ses propres couleurs en conséquence.

OriginalL'auteur Asym

Essayer cette

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>

Comment accédez-vous à la vue dans la customView de la onTabSelected appel de la méthode pour appliquer un style?

OriginalL'auteur Ashwin H

Vous devez vous connecter pour publier un commentaire.