デザインサポートライブラリのTabLayoutでタブ間の仕切りを設定する方法

Question

新しいAndroid.support.design.widget.TabLayout of 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);

Answer 1

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>

Answer 2

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

画面2

Answer 3

こんにちは、次のように回避策としてこれを試すことができます：-

1-通常のタブレイアウトを作成します。

2モードMODE_FIXEDを作成します

2をframellayoutに追加し、その上に水平レイアウトを追加します。

タブの数として3つのボタンを水平レイアウトに追加し、各ボタンのサイズがlayout_wight = 1になるようにします。

4-ボタンの背景を透明にします。

viewまたはanyviewを使用して、水平線レイアウトのボタンの間に3つのスペルターを追加し、幅を0.5dpまたは必要な厚さに指定します。

4-ボタンのクリックを追加するか、ボタンをクリックを処理しない他のビューに変更して、その下のタブがクリック操作を実行できるようにします:)。

それはい解決策かもしれませんが、完璧に機能し、仕事をします

選択したタブの背景を変更する場合の別のヒントとして、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>

Answer 4

ただし、タブの作成中に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);

あなたが私のアイデアを得ることを願っています

Answer 5

最良ではなく、現在使用されている代替方法。

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>

常にオプションの回答として考慮してください。

Answer 6

このコードを使用してdivderをTabHostに設定してみてくださいmTabHost.getTabWidget().setDividerDrawable(R.Color.blue);

Answer 7

これを試して、それがあなたのためにうまくいくことを願っています。

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>