自定义TabLayout布局+Viewpager

最近新做一个APP、UI设计是别的公司的、很是严格、一个tablayout要自定义才能实现,也怪自己渣、这个功能搞了一上午、趁热打铁、抽出个demo

自定义TabLayout布局+Viewpager_第1张图片

private void initTab() {
    mFragmentList = new ArrayList<>();
    mFragmentList.add(HomeFragment.newInstance());
    mFragmentList.add(HomeFragment.newInstance());
    mFragmentList.add(HomeFragment.newInstance());
    mFragmentList.add(HomeFragment.newInstance());

    Adapter adapter = new Adapter(getSupportFragmentManager());
    mCustomViewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(mCustomViewPager);

    one = tabLayout.getTabAt(0);
    two = tabLayout.getTabAt(1);
    three = tabLayout.getTabAt(2);
    four = tabLayout.getTabAt(3);

    View view1 = View.inflate(getApplicationContext(), R.layout.tablayout_tabitem_view, null);
    one.setCustomView(view1);
    TextView text = (TextView) view1.findViewById(R.id.tv_title);
    TextView ivDot = (TextView) view1.findViewById(R.id.iv_dot);
    text.setText("购物");
    text.setTextSize(18);
    text.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));//加粗
    ivDot.setVisibility(View.VISIBLE);

    View view2 = View.inflate(getApplicationContext(), R.layout.tablayout_tabitem_view, null);
    two.setCustomView(view2);
    TextView text2 = (TextView) view2.findViewById(R.id.tv_title);
    text2.setText("发现");

    View view3 = View.inflate(getApplicationContext(), R.layout.tablayout_tabitem_view, null);
    three.setCustomView(view3);
    TextView text3 = (TextView) view3.findViewById(R.id.tv_title);
    text3.setText("推荐");

    View view4 = View.inflate(getApplicationContext(), R.layout.tablayout_tabitem_view, null);
    four.setCustomView(view4);
    TextView text4 = (TextView) view4.findViewById(R.id.tv_title);
    text4.setText("热点");

    //添加tabLayout选中监听
    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            if (tab.getCustomView() != null) {
                tab.getCustomView().findViewById(R.id.iv_dot).setVisibility(View.VISIBLE);
                TextView text = tab.getCustomView().findViewById(R.id.tv_title);
                text.setTextSize(18);
                text.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));//加粗
            }
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            if (tab.getCustomView() != null) {
                tab.getCustomView().findViewById(R.id.iv_dot).setVisibility(View.GONE);
                TextView text = tab.getCustomView().findViewById(R.id.tv_title);
                text.setTextSize(14);
                text.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));//常规
            }
        }

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

        }
    });
    mCustomViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
}
private class Adapter extends FragmentPagerAdapter {

    public Adapter(FragmentManager fm) {
        super(fm);
    }

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

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

}

完整demo:https://download.csdn.net/download/ssssxy/12016571

 

你可能感兴趣的:(自定义TabLayout布局+Viewpager)