web-dev-qa-db-fra.com

Comment définir le séparateur entre les onglets dans TabLayout de la bibliothèque de support de conception?

J'utilise le nouveau Android.support.design.widget.TabLayout de v7-appcompat _ bibliothèque, et trouvé un problème, il n'y a aucun moyen de définir le séparateur entre les onglets, ne sais pas s'il y a.

J'ai configuré avec succès l'adaptateur de pageur et les onglets ont une belle apparence, mais je ne peux pas définir le séparateur entre les onglets.

Je veux ce type d'onglets

Tab1 | Tab2 | Tab3

mais actuellement sa projection

Tab1  Tab2  Tab3

mon xml est

<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" >

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

        <include layout="@layout/toolbar" />

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tablayout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@drawable/shape_tabbar_background"
            app:tabIndicatorColor="@Android:color/white"
            app:tabIndicatorHeight="4dp" />
    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</Android.support.design.widget.CoordinatorLayout>

J'ajoute des onglets par ceci

viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setOffscreenPageLimit(2);
    adapter = new TabAdapterLoginActivity(getSupportFragmentManager(),
            titles);
    viewPager.setAdapter(adapter);
    tabLayout = (TabLayout) findViewById(R.id.tablayout);
    tabLayout.setupWithViewPager(viewPager);
androidandroiddesignsupport
60
Gopal Singh Sirvi

Il existe un moyen d’ajouter un diviseur en utilisant la méthode Tab setCustomView:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(viewPager);

for (int i = 0; i < tabLayout.getTabCount(); i++) {
      TabLayout.Tab tab = tabLayout.getTabAt(i);
      RelativeLayout relativeLayout = (RelativeLayout) 
            LayoutInflater.from(this).inflate(R.layout.tab_layout, tabLayout, false);

      TextView tabTextView = (TextView) relativeLayout.findViewById(R.id.tab_title);
      tabTextView.setText(tab.getText());
      tab.setCustomView(relativeLayout);
      tab.select();
}

Onglet personnalisé avec séparateur (tab_layout.xml):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" >

<!-- Tab title -->
<TextView
    Android:id="@+id/tab_title"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:gravity="center"
    Android:textColor="@drawable/tab_item_selector"/>

<!-- Tab divider -->
<View
    Android:layout_width="1dp"
    Android:layout_height="match_parent"
    Android:layout_alignParentLeft="true"
    Android:background="@Android:color/black" />
</RelativeLayout>

Définissez le remplissage horizontal de l'onglet TabLayout sur 0dp:

<Android.support.design.widget.TabLayout
        Android:id="@+id/tablayout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@drawable/shape_tabbar_background"
        app:tabIndicatorColor="@Android:color/white"
        app:tabIndicatorHeight="4dp"

        app:tabPaddingStart="0dp"
        app:tabPaddingEnd="0dp" />

Et un sélecteur pour la couleur du texte du titre de l'onglet lorsqu'il est sélectionné (tab_item_selector.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_selected="true" Android:color="@color/abc_primary_text_material_dark" />
    <item Android:state_focused="true" Android:color="@color/abc_primary_text_material_dark" />
    <item Android:state_pressed="true" Android:color="@color/abc_primary_text_material_dark" />
    <item Android:color="@color/abc_secondary_text_material_dark" />
</selector>
65
Aryan Najafi

TabLayout est en fait HorizontalScrollView et son premier enfant est LinearLayout.

Il suffit donc d'utiliser le code ci-dessous pour ajouter des séparateurs

    View root = tabLayout.getChildAt(0);
    if (root instanceof LinearLayout) {
        ((LinearLayout) root).setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
        GradientDrawable drawable = new GradientDrawable();
        drawable.setColor(getResources().getColor(R.color.separator));
        drawable.setSize(2, 1);
        ((LinearLayout) root).setDividerPadding(10);
        ((LinearLayout) root).setDividerDrawable(drawable);
    }

Ci-dessous l'exemple de capture d'écran

Écran 1 enter image description here

Écran 2 enter image description here

62
Jimit Patel

salut tu peux essayer comme solution de contournement ce que j'ai fait comme suit: -

1-créer un tablayout normal.

2-font le mode MODE_FIXED

2-en l'ajoutant dans framellayout et au-dessus, il ajoute une disposition linéaire à l'horizon.

3-ajouter des boutons dans la disposition horizontale que le nombre de vos onglets et rendre les boutons égale à la taille layout_wight = 1 pour chaque bouton.

4-rendre le fond des boutons transparent.

Ajoutez 3-spertator entre les boutons dans la disposition de l'horizontal linélayout via view ou anyview et spécifiez la largeur comme 0.5dp ou quelle que soit l'épaisseur que vous voulez.

4-Vous pouvez ajouter vos clics sur les boutons ou changer le bouton pour n’importe quelle vue qui ne gère pas les clics afin que l’onglet en dessous effectue l’action de clic :).

ce sont peut-être des solutions laides, mais cela fonctionne parfaitement et fait le travail

autre astuce Si vous souhaitez modifier l'arrière-plan de l'onglet sélectionné, vous pouvez adapter la hauteur de l'indicateur dans le style de tablayout à la hauteur réelle du tablayout.

<FrameLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@Android:color/transparent"
    Android:orientation="vertical">


    <FrameLayout
        Android:id="@+id/content_parent"

        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent">


        <Android.support.v4.view.ViewPager
            Android:id="@+id/viewpager"
            Android:layout_width="match_parent"
            Android:layout_height="fill_parent"
            Android:layout_weight="1"

            Android:background="@Android:color/transparent" />




        <Android.support.design.widget.TabLayout
            Android:id="@+id/sliding_tabs"
            style="@style/MyCustomTabLayout"
            Android:layout_width="match_parent"
            Android:layout_height="60dp"
            Android:layout_gravity="bottom"
            Android:background="#99888888"
            Android:clickable="false"
            Android:layoutDirection="rtl"

              />


        <LinearLayout
            Android:layout_width="fill_parent"
            Android:layout_height="0.5dp"
            Android:layout_gravity="bottom"
            Android:layout_marginBottom="60dp"
            Android:background="#60ffffff"></LinearLayout>

        <LinearLayout
            Android:layout_width="fill_parent"
            Android:layout_height="60dp"
            Android:layout_gravity="bottom|right"
            Android:background="@Android:color/transparent"
            Android:orientation="horizontal">


            <Button
                Android:id="@+id/button1"
                Android:layout_width="match_parent"
                Android:layout_height="60dp"
                Android:layout_weight="1"
                Android:background="@Android:color/transparent"
                Android:clickable="true" />



            <LinearLayout
                Android:layout_width="0.5dp"
                Android:layout_height="60dp"
                Android:background="#60ffffff"></LinearLayout>

            <Button
                Android:id="@+id/button2"
                Android:layout_width="match_parent"
                Android:layout_height="60dp"
                Android:layout_weight="1"
                Android:background="@Android:color/transparent"
                Android:clickable="true"

                />

            <LinearLayout
                Android:layout_width="0.5dp"
                Android:layout_height="60dp"
                Android:background="#60ffffff"></LinearLayout>

            <Button
                Android:id="@+id/button3"
                Android:layout_width="match_parent"
                Android:layout_height="60dp"
                Android:layout_weight="1"
                Android:background="@Android:color/transparent"
                Android:clickable="true"

                />

            <LinearLayout
                Android:layout_width="0.5dp"
                Android:layout_height="60dp"
                Android:background="#60ffffff"></LinearLayout>

            <Button
                Android:id="@+id/button4"
                Android:layout_width="match_parent"
                Android:layout_height="60dp"
                Android:layout_weight="1"
                Android:background="@Android:color/transparent"
                Android:clickable="true"

                />

            <LinearLayout
                Android:layout_width="0.5dp"
                Android:layout_height="60dp"
                Android:background="#60ffffff"></LinearLayout>

            <Button
                Android:id="@+id/button5"
                Android:layout_width="match_parent"
                Android:layout_height="60dp"
                Android:layout_weight="1"
                Android:background="@Android:color/transparent"
                Android:clickable="true"

                />

        </LinearLayout>

    </FrameLayout>

et c'est pour le style

 <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorColor">#50000000</item>
        <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
        <item name="tabIndicatorHeight">60dp</item>
        <item name="tabSelectedTextColor">#222222</item>
2
Ziad Gholmish

Je ne pense pas que ce soit possible, sauf si, lors de la création de l'onglet, vous spécifiez un customView et ajoutez votre diviseur, par exemple; un TextView et vous explicitement TextView.setCompoundDrawablesWithIntrinsicBounds(0, 0,(int)id_of_a_divider, 0);

comme vous essayez de détecter si c'est le premier Tab,

if(firstTab){
    tabLayout.getTabAt(0).getCustomView()
    .setCompoundDrawablesWithIntrinsicBounds(0, 0,(int)id_of_a_divider, 0);
    //some little casting
}else if(lastTab){
  //dont get any
   tabLayout.getTabAt(index).getCustomView()
    .setCompoundDrawablesWithIntrinsicBounds(0,0,0, 0);
 else{
    //the rest takes two sides,
     tabLayout.getTabAt(index).getCustomView()
    .setCompoundDrawablesWithIntrinsicBounds((int)id_of_a_divider
       , 0,(int)id_of_a_divider, 0);

j'espère que vous avez mon idée

1
Elltz

Pas le meilleur mais moyen alternatif que j'ai utilisé pour le courant.

Dans Main.Xml

<Android.support.design.widget.TabLayout
    Android:id="@+id/tabs"
    style="@style/Base.Widget.Design.TabLayout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="@color/master_color"
    app:elevation="0dp"
    app:tabMode="scrollable"
    app:tabPaddingEnd="2dp"
    app:tabPaddingStart="0dp"
    app:tabSelectedTextColor="@color/white"
    app:tabTextColor="#82c6e6" />

j'utilise fragment et fais dans onCreate() comme

if (savedInstanceState == null) {
    replaceFragment(fragmentOne);
}

Set Tab

void privé setupTabLayout () {

    fragmentOne = new FragmentOne();
    fragmentTwo = new FragmentTwo();

    allTabs.addTab(allTabs.newTab().setText("CURRENT YEAR"), true);
    allTabs.addTab(allTabs.newTab().setText("2015"));
    allTabs.addTab(allTabs.newTab().setText("2014"));
    allTabs.addTab(allTabs.newTab().setText("2013"));
    allTabs.addTab(allTabs.newTab().setText("2012"));
    allTabs.addTab(allTabs.newTab().setText("2011"));

    //Hide Indicator
    allTabs.setSelectedTabIndicatorColor(getResources().getColor(Android.R.color.transparent));
    //Set Custom tab Background
    for (int i = 1; i < allTabs.getTabCount(); i++) {
        TabLayout.Tab tab = allTabs.getTabAt(i);
        RelativeLayout relativeLayout = (RelativeLayout)
                LayoutInflater.from(getActivity()).inflate(R.layout.tab_layout, allTabs, false);
        tvTabText = (TextView) relativeLayout.findViewById(R.id.tab_title);
        View view = (View) relativeLayout.findViewById(R.id.deviderView);

        tvTabText.setText(tab.getText());
        tab.setCustomView(relativeLayout);

        if (i == 0) {
            view.setVisibility(View.GONE);
            tab.select();
        }
    }

}

tab_layout.xml

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <!-- Tab title -->
    <TextView
        Android:id="@+id/tab_title"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_centerInParent="true"
        Android:gravity="center_horizontal"
        Android:padding="10dp"
        Android:text="sdasd"
        Android:textColor="@drawable/tab_item_selector"
        Android:textSize="@dimen/text_size_normal"
        Android:textStyle="bold" />

    <!-- Tab divider -->

    <View
        Android:id="@+id/deviderView"
        Android:layout_width="1dp"
        Android:layout_height="wrap_content"
        Android:layout_gravity="right"
        Android:layout_marginBottom="15dp"
        Android:layout_marginTop="15dp"
        Android:background="@Android:color/white"
        Android:gravity="right" />

</RelativeLayout>

tab_item_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_selected="true" Android:color="@Android:color/white" />
    <item Android:state_focused="true" Android:color="@Android:color/white" />
    <item Android:state_pressed="true" Android:color="@Android:color/white" />
    <item Android:color="#82c6e6" />
</selector>

S'il vous plaît considérer comme une réponse facultative toujours.

1
RaRa

essayez d'utiliser ce code pour définir divder dans TabHostmTabHost.getTabWidget().setDividerDrawable(R.Color.blue);

0
Amey Bawiskar

essayez ceci, espérons que cela fonctionne bien pour vous.

tab_activity.xml

<TabHost
        Android:id="@Android:id/tabhost"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" >

        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical" >

            <TabWidget
                Android:id="@Android:id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content" >
            </TabWidget>

            <View
                Android:layout_width="match_parent"
                Android:layout_height="2dp"
                Android:background="@color/edt_footer_bg" />

            <FrameLayout
                Android:id="@Android:id/tabcontent"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:layout_marginTop="15dp"
                Android:background="@Android:color/transparent" >
            </FrameLayout>
        </LinearLayout>
    </TabHost>

home_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    xmlns:mytextview="http://schemas.Android.com/apk/res/com.bne"
    Android:layout_height="50dp"
    Android:layout_marginRight="2dp"
    Android:background="@color/app_bg_inner"
    Android:gravity="center"
    Android:padding="10dp" >

    <TextView
        Android:id="@+id/text"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:textColor="@drawable/tab_selector"
        Android:textSize="@dimen/txt_12"
        mytextview:txt_custom_font="@string/RobotoRegular" />

</LinearLayout>
0
Parth Bhayani