带有TabLayout android的不同大小的标签 [英] Different sized tabs with TabLayout android

问题描述

尝试重新创建与Instagram相同的顶部TabLayout.

Trying to recreate same top TabLayout as Instagram.

主标签:

Main tab:

侧边标签:

Side tabs:

尝试了多种方法:

• app:tabMode ="fixed"
• app:tabMode ="scrollable"

我设法以编程方式创建了该代码，如下所示:

I managed to create this programmatically like so:

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:

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:

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])之后，视图将完全改变.

but after setupWithViewPager([MY PAGE ADAPTER]) the view get completely changed.

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

How can i use ViewPager and TabLayout with different sized tab?

推荐答案

找到了解决方案-所有要做的就是手动在TabLayout和Page适配器之间进行连接，如下所示:

Found the solution - all need to be done is to manually connect between the TabLayout and the Page adapter like so:

 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>

center.xml:

center.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])

and not use tabLayout.setupWithViewPager([MY PAGE ADAPTER])

这篇关于带有TabLayout android的不同大小的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！