Android TabLayout使用及遇到的问题

TabLayout结合ViewPager的使用

1. 在module的build.gradle下添加依赖：

compile 'com.android.support:design:26.+'

2.在xml中布局

3.java代码

• MainActivity

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private TabLayout mTableLayout;

    List mTitleList = new ArrayList<>();
    List mFragmentList = new ArrayList<>();

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

        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mTableLayout = (TabLayout) findViewById(R.id.tab_layout);

        initView();
    }

    private void initView() {

        //tab栏
        mTitleList.add("首页");
        mTitleList.add("选择车型");
        mTitleList.add("精美图片");
        mTitleList.add("精彩视频");

        // new Fragment实例
        for (String str : mTitleList) {
            mFragmentList.add(newFragmentInstance(str));
        }
        SamplePagerAdapter adapter = new SamplePagerAdapter(getSupportFragmentManager(), mFragmentList, mTitleList);
        mViewPager.setOffscreenPageLimit(1);
        mViewPager.setAdapter(adapter);
        mTableLayout.setupWithViewPager(mViewPager);

    }


    public SampleFragment newFragmentInstance(String str) {
        SampleFragment fragment = new SampleFragment();
        Bundle args = new Bundle();
        args.putString("params", str);
        fragment.setArguments(args);
        return fragment;
    }
}

• SamplePagerAdapter

public class SamplePagerAdapter extends FragmentPagerAdapter {


    private List mFragment;
    private List mTitleList;

    /**
     * 普通，主页使用
     */
    public SamplePagerAdapter(FragmentManager fm, List mFragment) {
        super(fm);
        this.mFragment = mFragment;
    }

    /**
     * 接收传递的标题
     */
    public SamplePagerAdapter(FragmentManager fm, List mFragment, List mTitleList) {
        super(fm);
        this.mFragment = mFragment;
        this.mTitleList = mTitleList;
    }

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

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

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
    }


    /**
     * 显示title，..
     */
    @Override
    public CharSequence getPageTitle(int position) {
        if (mTitleList != null) {
            return mTitleList.get(position);
        } else {
            return "";
        }
    }

    public void addFragmentList(List fragment) {
        this.mFragment.clear();
        this.mFragment = null;
        this.mFragment = fragment;
        notifyDataSetChanged();
    }
}

• SampleFragment

public class SampleFragment extends Fragment {

    private TextView mTextView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle state) {
        View view = inflater.inflate(R.layout.fragment_sample, container, false);
        mTextView = view.findViewById(R.id.text_view);
        return view;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        initData();
    }

    private void initData() {
        Bundle bundle = getArguments();
        String params = bundle.getString("params");
        if (!TextUtils.isEmpty(params)) {
            mTextView.setText(params);
        }
    }
}

4. 效果图

5. 遇到问题

• 使用手机上运行时，使用 app:tabMode="fixed" 属性时，tablayout会占满整列，各tab栏会平均分配控件宽度。但是在平板上运行时，这个属性就不起作用，不再平均分配宽度，并且居中显示，例：

6. 解决办法

• 设置TabLayout的 app:tabMaxWidth="0dp" 可解决此问题

7. github地址： https://github.com/leijiaxq/TabLayoutSample