web-dev-qa-db-ja.com

TabLayout（Android設計サポートライブラリ）でタブの背景色を変更しても、タブスペース全体が占有されない

3つのタブを含むViewPagerに関連付けられているTabLayout（デザインサポートライブラリ）があります。カスタムレイアウトを設計し、TabLayoutの各タブに設定しました。現在選択されているタブの背景色を変更しようとしています。色はタブ内のテキストの周りだけをラップしますが、タブスペース全体を占めるわけではありません。

以下は、私のアクティビティのコードスニペットとカスタムレイアウトファイルです。

アクティビティコード

public class CustomTabLayoutActivity extends AppCompatActivity {

private TabLayout tabLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_custom_tab_layout);
    tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
    setupViewPager(viewPager);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    setupTabLayout();
    viewPager.setCurrentItem(0);
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            for (int i = 0; i < tabLayout.getTabCount(); i++) {
                if (i == position) {
                    tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#198C19"));
                } else {
                    tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#f4f4f4"));
                }
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
}


private void setupViewPager(ViewPager viewPager) {
    CustomViewPagerAdapter pagerAdapter = new CustomViewPagerAdapter(getSupportFragmentManager());
    pagerAdapter.addFragments(new OneFragment(), "ONE");
    pagerAdapter.addFragments(new OneFragment(), "TWO");
    pagerAdapter.addFragments(new OneFragment(), "THREE");
    viewPager.setAdapter(pagerAdapter);
}

private void setupTabLayout() {

    TextView customTab1 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    TextView customTab2 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    TextView customTab3 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    customTab1.setText("ONE");
    tabLayout.getTabAt(0).setCustomView(customTab1);
    customTab2.setText("TWO");
    tabLayout.getTabAt(1).setCustomView(customTab2);
    customTab3.setText("THREE");
    tabLayout.getTabAt(2).setCustomView(customTab3);
}
}

各タブのカスタムレイアウトファイル

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:Android="http://schemas.Android.com/apk/res/Android"
   Android:id="@+id/tab"
   Android:layout_width="match_parent"
   Android:layout_height="match_parent"
   Android:layout_gravity="center"
   Android:background="#ffffff"
   Android:text="Test"
   Android:textColor="@Android:color/black"
   Android:textSize="20sp" />

上記のコードを実行した後のタブのスクリーンショットを次に示します。

enter image description here

あなたが見ることができるように、色はタブ全体ではなくタブ内のテキストのみを占めます。これを達成する方法は？どんなアイデア/提案でも私を大いに助けます。前もって感謝します。

androidandroid-design-libraryandroid-tablayout
28
Itapu Vinay

セレクターをドロアブルとして定義し、選択/非選択状態のドロアブルも用意します。

このソリューションでは、 this answer のコードから始め、現在のタブの背景色を変更する機能を追加しました。

まず、セレクターtab_background.xmlがドロアブルフォルダーにあります：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/tab_background_selected" Android:state_selected="true" />
    <item Android:drawable="@drawable/tab_background_unselected" Android:state_selected="false" Android:state_focused="false" Android:state_pressed="false" />
</selector>

次に、ドローアブルフォルダーのtab_background_selected.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <solid Android:color="#d13fdd1a" />
</shape>

次に、ドローアブルフォルダーのtab_background_unselected.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <solid Android:color="#3F51B5" />
</shape>

最後に、styles.xmlで、使用するセレクタを指定し、TabLayoutのapp:tabIndicatorColorプロパティが無視されるようになるため、タブインジケーターのスタイルも指定します。

<style name="Base.Widget.Design.TabLayout" parent="Android:Widget">
    <item name="tabBackground">@drawable/tab_background</item>
    <item name="tabIndicatorColor">#ff00ff</item>
    <item name="tabIndicatorHeight">2dp</item>
</style>

上記の例の色の結果：

enter image description here

enter image description here

追記：

サポートライブラリコンポーネントの23.3.0バージョンでテスト済み：

dependencies {
    compile 'com.Android.support:appcompat-v7:23.3.0'
    compile 'com.Android.support:cardview-v7:23.3.0'
    compile 'com.Android.support:recyclerview-v7:23.3.0'
    compile 'com.Android.support:design:23.3.0'
    compile 'com.Android.support:support-v4:23.3.0'
}
78
Daniel Nugent

使用する必要があります：

app:tabBackground="@drawable/tab_selector"
Android:background="@color/colorNormal"

tab_selector.xml（Drawable Folder内）：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_selected="true" Android:drawable="@color/colorSelected"/>
    <item Android:state_selected="false" Android:drawable="@color/colorNormal"/>
</selector>
2
milad jalali

リップル効果のあるタブ： Daniel Nugentの答えに加えて、タブにリップル効果を追加するのは美しいでしょう。これを実現するには、次の2つのドロアブルをdrawable-v21フォルダーに追加する必要があります。

tab_background_selected.xml：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="#63D25B"> <!-- ripple color -->
    <item Android:drawable="#d13fdd1a" /> <!-- normal color -->
</ripple>

tab_background_unselected.xml：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="#606FC7"> <!-- ripple color -->
    <item Android:drawable="#3F51B5" /> <!-- normal color -->
</ripple>
1
Milad Faridnia

私はこの質問に答えるのがかなり遅いことを知っていますが、新しい背景やセレクターを作成せずに別の簡単な答えを持っています。 Tab-Layoutの開始と終了のデフォルトのパディングは12dpです。設定するだけ

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

タブの色を塗りつぶします。

1
Ashish John