Android 仿淘宝淘抢购导航栏Tablayout自定义Tab

1布局界面

首先导入XTabLayout依赖

 

implementation 'com.androidkun:XTabLayout:1.1.4'

2 Activity界面

private XTabLayout tabLayout;
private ViewPager viewPager;
private TextView textView;
private List fragmentList = new ArrayList<>();//fragment列表
private List stringList = new ArrayList<>();//tab名的列表
private TabFragmentAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tab);
    initView();
}

    private void initView() {
//初始化
        tabLayout = (XTabLayout) findViewById(R.id.tabLayout);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        getData();

//添加数据给Tablayout
        for (int i = 0; i < stringList.size(); i++) {
            tabLayout.addTab(tabLayout.newTab().setText(stringList.get(i)));
        }

//关联适配器和Viewpager
        adapter = new TabFragmentAdapter(getSupportFragmentManager(),  stringList,TabActivity.this,fragmentList);
        viewPager.setAdapter(adapter);
        tabLayout.setxTabDisplayNum(5);
        tabLayout.setupWithViewPager(viewPager);
//注意 此方法必须得在Viewpage和Tablayut关联之后才使用
        for (int i = 0; i < tabLayout.getTabCount(); i++){
            XTabLayout.Tab tab = tabLayout.getTabAt(i);
            if (tab != null) {
                tab.setCustomView(adapter.getTabView(i));
            }
        }
        //让Tablayout默认选中第四个
        View view=tabLayout.getTabAt(4).getCustomView();
//获取TextView的值并通过SpannableString 来设置TextView上下不同大小值
        TextView textView=view.findViewById(R.id.tv_header);
        String s = textView.getText().toString();
        SpannableString sStr = new SpannableString(s);
        sStr.setSpan(new AbsoluteSizeSpan(38), 0, 5, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        int length = sStr.length();
        sStr.setSpan(new AbsoluteSizeSpan(32), 6, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        textView.setText(sStr);
        textView.setTextColor(Color.parseColor("#ffa500"));
//让Viewpager默认选中第四个
        viewPager.setCurrentItem(4);

//Tablayut滑动监听
        tabLayout.addOnTabSelectedListener(new XTabLayout.OnTabSelectedListener() {
            @SuppressLint("ResourceAsColor")
            @Override
            public void onTabSelected(XTabLayout.Tab tab) {
                //选中了tab的逻辑
 
                View view=tab.getCustomView();
                TextView textView=view.findViewById(R.id.tv_header);
                String s = textView.getText().toString();
                SpannableString sStr = new SpannableString(s);
                sStr.setSpan(new AbsoluteSizeSpan(38), 0, 5, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                int length = sStr.length();
                sStr.setSpan(new AbsoluteSizeSpan(32), 6, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                textView.setText(sStr);
                textView.setTextColor(Color.parseColor("#ffa500"));
            }

            @SuppressLint("ResourceAsColor")
            @Override
            public void onTabUnselected(XTabLayout.Tab tab) {
                //未选中tab的逻辑

                View view=tab.getCustomView();
                TextView textView=view.findViewById(R.id.tv_header);
                String s = textView.getText().toString();
                SpannableString sStr = new SpannableString(s);
                sStr.setSpan(new AbsoluteSizeSpan(32), 0, 5, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                int length = sStr.length();
                sStr.setSpan(new AbsoluteSizeSpan(22), 6, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                textView.setText(sStr);
                textView.setTextColor(Color.parseColor("#ffffff"));
            }

            @Override
            public void onTabReselected(XTabLayout.Tab tab) {
                //再次选中tab的逻辑
                Log.i("TAG","======我再次被选中====");
            }
        });
}

//模拟的假数据

private void getData() {
    fragmentList.add(new SpikeFragment());
    fragmentList.add(new SpikeFragment());
    fragmentList.add(new SpikeFragment());
    fragmentList.add(new SpikeFragment());
    fragmentList.add(new SpikeFragment());
    fragmentList.add(new SpikeFragment());
    fragmentList.add(new SpikeFragment());
    fragmentList.add(new SpikeFragment());


    stringList.add("16:00\n已开抢");
    stringList.add("17:00\n已开抢");
    stringList.add("18:00\n抢购中");
    stringList.add("19:00\n即将开场");
    stringList.add("20:00\n即将开场");
    stringList.add("21:00\n即将开场");
    stringList.add("22:00\n即将开场");


}

//Fragemnt的适配器

public class TabFragmentAdapter extends FragmentPagerAdapter {

    private List titles;
    private Context mContext;
    private List mFragments;

    public TabFragmentAdapter(@NonNull FragmentManager fm, List titles, Context mContext, List mFragments) {
        super(fm);
        this.titles = titles;
        this.mContext = mContext;
        this.mFragments = mFragments;
    }


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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }

    public View getTabView(int position) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.item_headerone, null);
        TextView textView=view.findViewById(R.id.tv_header);
        String s = titles.get(position);
        SpannableString sStr = new SpannableString(s);
//      AbsoluteSizeSpan(35,true/false); true返回的事dp false返回的px
        sStr.setSpan(new AbsoluteSizeSpan(32), 0, 5, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        int length = sStr.length();
        sStr.setSpan(new AbsoluteSizeSpan(22), 6, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        textView.setText(sStr);
        return view;
    }
}

item_headerone的Xml