Как установить разделитель между вкладками в TabLayout библиотеки поддержки дизайна?

Я использую новый android.support.design.widget.TabLayout на v7-appcompat библиотеки, и нашел проблему, нет никакого способа, чтобы установить разделитель между вкладками, не знаю, есть ли.



я успешно настроил адаптер пейджера, и вкладки выглядят хорошо, но не могу установить разделитель между вкладками.



Я хочу этот тип вкладок



Tab1 | Tab2 | Tab3


но в настоящее время показывает



Tab1  Tab2  Tab3


мой xml-это



<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>


я добавляю вкладки по этому 



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);
689   8  

8 ответов:

есть способ добавить разделитель с помощью 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();
}

вкладка пользовательский макет с разделителем (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>

установите горизонтальное заполнение вкладки TabLayout в 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" />

и селектор для цвета текста заголовка вкладки, когда он выбран (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>
62  
2016-05-14 15:04:20

TabLayout на самом деле HorizontalScrollView и это первый ребенок LinearLayout.

так что просто используйте ниже код, чтобы добавить разделители

    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);
    }

Ниже приведен пример скриншота

экран 1 enter image description here

экран 2 enter image description here

51  
2018-04-25 09:53:12

привет вы можете попробовать это временное решение, что я сделал следующим образом :-

1-создать нормальный tablayout.

2-сделать режим MODE_FIXED

2-добавление его в framellayout и над ним добавить линейный макет horizonytal.

3-Добавить кнопки в горизонтальной компоновке как количество вкладок и сделать кнопки равны по размеру layout_wight=1 для каждой кнопки.

4 - сделайте фон кнопок прозрачным.

3-Добавить spertator между кнопки в horizinoal LinearLayout layout с помощью view или anyview и указать widht как 0.5 dp или то, что когда-либо толщиной вы хотите.

4 - Вы можете добавить yor нажимает на кнопки или изменить кнопку на любой вид oter, который не обрабатывает щелчок, так что вкладка под ним будет принимать действие щелчка :).

это может быть уродливые решения, но он работает идеально и делать свою работу

еще одна подсказка если вы хотите изменить фон выбранной вкладки вы можете сделать индикатор hieght в стиль tablayout равен фактической высоте 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>

и это для стиля 

 <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>
3  
2015-09-06 14:58:46

Я не думаю, что это возможно, хотя, если во время создания вкладки вы не укажете customView и не добавите свой разделитель, например; TextView и вы явно TextView.setCompoundDrawablesWithIntrinsicBounds(0, 0,(int)id_of_a_divider, 0);

как вы пытаетесь обнаружить, если его первый 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);

Я надеюсь, что вам моя идея

1  
2015-09-01 06:47:14

не лучший, но альтернативный способ, который я использовал для тока.

В 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" />

Я использую фрагмент и сделать в onCreate() как

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

Вкладка

private void 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>

пожалуйста, рассмотрите как дополнительный ответ всегда.

1  
2016-05-13 15:38:13

попробуйте это, надеюсь, что он отлично работает для вас.

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  
2015-09-07 08:38:05

попробуйте использовать этот код, чтобы установить divder на TabHostmTabHost.getTabWidget().setDividerDrawable(R.Color.blue);

0  
2016-07-23 08:43:12

один из способов добавить пользовательский разделитель-установить его программно:

tablayout.getTabWidget().setDividerDrawable(R.drawable.yourdivider image name);

убедитесь, однако, что вы вызываете это перед установкой содержимого вкладок. Он обрушится на меня, если я позвоню ему позже.

вы также можете использовать эту строку, если это не работает

if(Build.VERSION.SDK_INT >= 11)
    tablayout.getTabWidget().setShowDividers(TabWidget.SHOW_DIVIDER_MIDDLE);
-2  
2015-08-25 15:44:15

Comments

    Ничего не найдено.
Click here to cancel reply.