android - 不同大小的选项卡与 TabLayout android

Question

尝试重新创建与 Instagram 相同的顶级 TabLayout。

主选项卡:

侧边标签:

尝试了很多事情:

• app:tabMode="固定"
• app:tabMode="可滚动"

我设法像这样以编程方式创建它:

View view1 = getLayoutInflater().inflate(R.layout.customtab, null);
view1.findViewById(R.id.icon).setBackgroundResource(R.drawable.my1);
tabLayout.addTab(tabLayout.newTab().setCustomView(view1));


View view2 = getLayoutInflater().inflate(R.layout.customtab, null);
view2.findViewById(R.id.icon).setBackgroundResource(R.drawable.my2);
tabLayout.addTab(tabLayout.newTab().setCustomView(view2));


View view3 = getLayoutInflater().inflate(R.layout.customtab, null);
view3.findViewById(R.id.icon).setBackgroundResource(R.drawable.my3);
tabLayout.addTab(tabLayout.newTab().setCustomView(view3));

center_tab.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:id="@+id/icon"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

side_tabs.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:id="@+id/icon"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

但是在 setupWithViewPager([MY PAGE ADAPTER]) 之后 View 完全改变了。

如何将 ViewPager 和 TabLayout 与不同大小的标签一起使用？

Answer 1

找到解决方案 - 所有需要做的就是像这样在 TabLayout 和页面适配器之间手动连接:

 mViewPager = (ViewPager) findViewById(R.id.container);
        mViewPager.setAdapter(mSectionsPagerAdapter);

        mViewPager.addOnPageChangeListener(
                new ViewPager.SimpleOnPageChangeListener() {
                    @Override
                    public void onPageSelected(int position) {
                        TabLayout.Tab tab = tabLayout.getTabAt(position);
                        tab.select();

                    }
                });


        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                mViewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

        View view1 = getLayoutInflater().inflate(R.layout.side, null);

        tabLayout.addTab(tabLayout.newTab().setCustomView(view1));


        View view2 = getLayoutInflater().inflate(R.layout.center, null);

        tabLayout.addTab(tabLayout.newTab().setCustomView(view2));


        View view3 = getLayoutInflater().inflate(R.layout.side, null);

        tabLayout.addTab(tabLayout.newTab().setCustomView(view3));

side.xml:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="30dp"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/bla"
        android:layout_width="30dp"
        android:src="@mipmap/ic_launcher"
        android:layout_height="wrap_content" />

</LinearLayout>

中心.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="1"
        android:id="@+id/view" />

    <ImageView
        android:id="@+id/bla"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="1"
        android:id="@+id/view2" />

    </LinearLayout>


</LinearLayout>

并且不使用 tabLayout.setupWithViewPager([MY PAGE ADAPTER])