android - 在Fragment中使用TabLayout和ViewPager时，发现TabLayout没有出现文字，是空白的。

Question

package com.masterzhang.www.fragment;

import android.app.Activity;
import android.net.Uri;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.masterzhang.www.ecourier.R;
import com.masterzhang.www.fragmentPagerAdapter.TrackGetFragmentPagerAdapter;

/**
 * 领取追踪主页面
 */
public class TrackGetMain extends Fragment {
    private static TrackGetMain tractGetMain = null;
    private TrackGetFragmentPagerAdapter mAdapter;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private View mainView;
    public static TrackGetMain newInstance() {
        if( tractGetMain == null )
        {
            synchronized (TrackGetMain.class)
            {
                if( tractGetMain == null)
                {
                    tractGetMain = new TrackGetMain();
                }
            }
        }
        return tractGetMain;
    }

    public TrackGetMain() {
        // Required empty public constructor
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        mainView = inflater.inflate(R.layout.fragment_tract_get_main, container, false);
        return mainView;
    }

    // TODO: Rename method, update argument and hook method into UI event
    public void onButtonPressed(Uri uri) {

    }

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
    }

    @Override
    public void onDetach() {
        super.onDetach();
    }

    @Override
    public void onStart() {
        super.onStart();
        mAdapter = new TrackGetFragmentPagerAdapter(getActivity().getSupportFragmentManager());
        tabLayout = (TabLayout) mainView.findViewById(R.id.tabs);
        viewPager = (ViewPager) mainView.findViewById(R.id.vp_view);
        viewPager.setAdapter(mAdapter);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
    }
}

package com.masterzhang.www.fragmentPagerAdapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;

import com.masterzhang.www.fragment.PersonMessage;
import com.masterzhang.www.fragment.TalkList;
import com.masterzhang.www.fragment.TrackGet;

public class TrackGetFragmentPagerAdapter extends FragmentPagerAdapter {
    final int PAGE_COUNT = 3;
    private String titles[] = new String[]{"未配送","未送达","未评价"};

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


    @Override
    public int getCount() {
        return PAGE_COUNT;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }

    @Override
    public Fragment getItem(int position) {
        if( position == 0)
        {
            return TrackGet.newInstance();
        }
        else if( position == 1 )
        {
            return PersonMessage.newInstance();
        }
        else
        {
            return TalkList.newInstance();
        }
    }
}

效果如图所示

Answer 1

Override the getTitle method in adapter

Answer 2

Just manually add title to TAB after tabLayout.setupWithViewPager(viewPager);

tabLayout.getTabAt(0).setText(titles[0]);
tabLayout.getTabAt(1).setText(titles[1]);
tabLayout.getTabAt(2).setText(titles[2]);
           
 

Answer 3

Add a name to each Tab

tabLayout.addTab(tabLayout.newTab().setText(xxx));

Answer 4

Usually there are two ways to use TabLayout with ViewPager:

• The title displayed by the Tab in TabLayout is determined by TabLayout

    viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));
    tablayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewpager));

• The title displayed by the Tab in TabLayout is determined by the getPageTitle method in the Adapter set by ViewPager

tablayout.setupWithViewPager(viewpager);

Answer 5

Still using tablayout? Try magicindicator