Android tablayout カスタマイズ

Question

Androidのtablayoutを使用してスマートニュースのような画面を作りたいと考えています。

        mPager = (ViewPager) findViewById(R.id.viewpager);
        mPager.setAdapter(new NewsCategoryPageAdapter(getSupportFragmentManager(), ListnewsActivity.this, ""));

        mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                util.log(TAG, "SelectTab:" + position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(mPager);

        mCategory = session.getCategoryList();
        LinearLayout tabsContainer = (LinearLayout) tabLayout.getChildAt(0);

        for(int i = 0; i < mCategory.size(); i++) {
            LinearLayout childLayout = (LinearLayout) tabsContainer.getChildAt(i);
            LinearLayout tabView = (LinearLayout) childLayout.getChildAt(0).getParent();

            Drawable drawable = tabView.getBackground();

            String color = mCategory.get(i).getColor();
            //drawable.setColorFilter(Color.parseColor(color), PorterDuff.Mode.SRC_ATOP);
            drawable.setTint(Color.parseColor(color));

            tabView.setBackground(drawable);
            
            util.log(TAG, "TabHeight: " + tabView.getHeight());
        }
    }
コード

現在はViewPagerで個々のタブ色とページの切り替えは出来るようになっています。
が、タブを選択した時に未選択のタブよりも一段高くしたいと考えておりますが、どうしても出来ません。

そもそもtabLayoutをしよすると個々のタブで高さを変えるなど出来ないのでしょうか？

お知恵をお貸し頂ければ幸いです。

Answer 1

TabLayoutのアイテムにはカスタムレイアウトを使用できるので、柔軟なカスタマイズが可能です。これを利用して選択時に余白サイズを切り替えるViewを実装すれば実現可能です。

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mPager);

// カスタムレイアウトを各タブに設定
for (int i = 0; i < tabLayout.getTabCount(); ++i) {
    tabLayout.getTabAt(i).setCustomView(R.layout.tab_item);
}

• res/layout/tab_item.xml

<?xml version="1.0" encoding="utf-8"?>
<xxx.widget.TabItemLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <TextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        />
</xxx.widget.TabItemLayout>

• TabItemLayout.java

// 選択状態により余白サイズを切り替えるViewの実装例
class TabItemLayout extends LinearLayout {

    // コンストラクタ...

    @Override
    public void setSelected(boolean selected) {
        super.setSelected(selected);

        LayoutParams params = getLayoutParams();
        if (params instanceOf MarginLayoutParams) {
            if (selected) {
                ((MarginLayoutParams) params).topMargin = 0;
            } else {
                ((MarginLayoutParams) params).topMargin = 10;
            }
        }
        setLayoutParams(params);
    }
}

Comments

[WestField]

ありがとう御座います。
大変参考になりました。