Android TabLayout控件的使用(一)

TabLayout常规使用

Android原生TabLayout使用的超全解析(看这篇就够了) - 爱码帮™分享编程知识和开发经验

1、xml布局

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="@dimen/common_dp_40"
                app:tabBackground="@null" 
                app:tabGravity="center"
                app:tabIndicatorColor="@color/colorAccent" 
                app:tabIndicatorHeight="@dimen/common_dp_0" 
                app:tabMaxWidth="@dimen/common_dp_200"
                app:tabMinWidth="@dimen/common_dp_20"
                app:tabMode="scrollable" 
                app:tabPaddingEnd="@dimen/common_dp_15" 
                app:tabPaddingStart="@dimen/common_dp_12" 
                app:tabSelectedTextColor="@color/common_white" 
                app:tabTextAppearance="@style/CommonTabLayoutTextStyle"
                app:tabTextColor="@color/common_white" /> 

            <android.support.v4.view.ViewPager
                android:id="@+id/vpContent"
                android:layout_width="match_parent"
                android:layout_height="@dimen/common_dp_0"
                android:layout_marginTop="@dimen/common_dp_14"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tvLimitTime" />
        </LinearLayout>

CommonTabLayoutTextStyle.xml

    <style name="CommonTabLayoutTextStyle">
        <item name="android:textSize">@dimen/common_textSize15</item>
        <!--下面两句没个顶用-->
        <item name="android:alpha">0.6</item>
        <item name="android:textAllCaps">false</item>
    </style>

TabLayout一些常用属性：        

        app:tabBackground="@null"//去掉背景，点击时候有阴影
        app:tabRippleColor="@android:color/transparent"//去掉背景，点击时候有阴
        app:tabGravity="center"
        app:tabIndicatorColor="@color/colorAccent"//指示器的颜色=透明
        app:tabIndicatorHeight="@dimen/common_dp_0"//指示器的高度=0 
        app:tabMaxWidth="@dimen/common_dp_200"
        app:tabMinWidth="@dimen/common_dp_20"
        app:tabMode="scrollable"//有两种scrollable 滚动，fixed 固定不滚动
        app:tabPaddingEnd="@dimen/common_dp_15"//每个item右边距离
        app:tabPaddingStart="@dimen/common_dp_12"每个item左边距离
        app:tabSelectedTextColor="@color/common_white"//选中tab文本颜色
        app:tabTextAppearance="@style/CommonTabLayoutTextStyle"//修改item文字大小吧
        app:tabTextColor="@color/common_white" />//tab文本的默认颜色

2、SeckillFragmentPagerAdapter

public class SeckillFragmentPagerAdapter extends FragmentPagerAdapter {

    private List<String> mTitles = new ArrayList<>();
    private List<BaseFragment> mFragments = new ArrayList<>();
    private List<String> tags = new ArrayList<>();//标示fragment的tag
    private FragmentManager fragmentManager;

    public SeckillFragmentPagerAdapter(FragmentManager fm, Collection<SeckillFragment> fragments, List<String> titles) {
        super(fm);
        fragmentManager = fm;
        mTitles.clear();
        mTitles.addAll(titles);
        mFragments.addAll(fragments);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        if (mTitles != null && mTitles.size() > 0) {
            return mTitles.get(position);
        } else {
            return mFragments.get(position).getPageTitle();
        }
    }

    //返回PagerAdapter.POSITION_NONE保证调用notifyDataSetChanged刷新Fragment。
    @Override
    public int getItemPosition(Object object) {
        return POSITION_NONE;//必须返回的是POSITION_NONE，否则不会刷新
    }

    //这个就不说了
    private String makeFragmentName(int viewId, long id) {
        return "android:switcher:" + viewId + ":" + id;
    }

    //必须重写此方法，添加tag一一做记录
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        tags.add(makeFragmentName(container.getId(), getItemId(position)));
        Fragment fragment = (Fragment) super.instantiateItem(container, position);
        if(fragmentManager!=null)
        this.fragmentManager.beginTransaction().show(fragment).commit();
        return fragment;
    }

    //根据tag查找缓存的fragment，移除缓存的fragment，替换成新的
    public void setNewFragments() {
        if (this.tags != null) {
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
            for (int i = 0; i < tags.size(); i++) {
                fragmentTransaction.remove(fragmentManager.findFragmentByTag(tags.get(i)));
            }
            fragmentTransaction.commit();
            fragmentManager.executePendingTransactions();
            tags.clear();
        }
        notifyDataSetChanged();
    }
}

3、初始化

        SeckillFragmentPagerAdapter mPagerAdapter = new SeckillFragmentPagerAdapter(mFragmentManager, fragments, titles);
        mBinding.vpContent.setOffscreenPageLimit(titles.size());
        mBinding.vpContent.setAdapter(mPagerAdapter);
        if (isReset) mPagerAdapter.setNewFragments();//这是我在FragmentPagerAdapter中定义的刷新方法，

        mBinding.tabLayout.setupWithViewPager(mBinding.vpContent, false);

4、TabLayout 切换的监听

        mBinding.tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                setSelectTab(tab.getPosition(), true);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                setSelectTab(tab.getPosition(), false);
            }

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


    /**
     * @param position
     * @param select
     */
    private void setSelectTab(int position, boolean select) {
        TextView title = (TextView) (((LinearLayout) ((LinearLayout) mBinding.tabLayout.getChildAt(0)).getChildAt(position)).getChildAt(1));
        if (select) {
            title.setAlpha(1.0f);
            title.setTypeface(Typeface.DEFAULT_BOLD);
            title.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18);
            mBinding.tabLayout.getTabAt(position).select();
        } else {
            title.setAlpha(0.6f);
            title.setTypeface(Typeface.DEFAULT);
            title.setTextSize(TypedValue.COMPLEX_UNIT_SP, 15);
        }
    }

6、自定义布局两种方式

可以动态添加

private void getView() {
        for (int i = 0; i < tableLayout.getTabCount(); i++) {
            View view = LayoutInflater.from(this).inflate(R.layout.item, null);
            ((TextView) view.findViewById(R.id.tv)).setText(title[i]);
            tableLayout.getTabAt(i).setCustomView(view);
        }
        ((TextView) tableLayout.getTabAt(0).getCustomView().findViewById(R.id.tv)).setTextColor(Color.RED);
        tableLayout.getTabAt(0).getCustomView().findViewById(R.id.iv).setVisibility(View.VISIBLE);
    }

    /**
     * 设置tablayout选中状态
     *
     * @param tab
     */
    private void setStatus(TabLayout.Tab tab) {
        for (int i = 0; i < tableLayout.getTabCount(); i++) {
            if (i == tab.getPosition()) {
                ((TextView) tableLayout.getTabAt(i).getCustomView().findViewById(R.id.tv)).setTextColor(Color.RED);
                tableLayout.getTabAt(i).getCustomView().findViewById(R.id.iv).setVisibility(View.VISIBLE);
            } else {
                ((TextView) tableLayout.getTabAt(i).getCustomView().findViewById(R.id.tv)).setTextColor(Color.BLACK);
                tableLayout.getTabAt(i).getCustomView().findViewById(R.id.iv).setVisibility(View.INVISIBLE);
            }
        }
    }