Android TabLayout使用及遇到的问题

TabLayout结合ViewPager的使用

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

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

2.在xml中布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.leijiaxq.tablayoutsample.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorPrimaryDark"
        app:tabGravity="fill"
        app:tabIndicatorColor="#fff"
        app:tabIndicatorHeight="1dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#fff"
        app:tabTextAppearance="@android:style/TextAppearance.Holo.Small"
        app:tabTextColor="#ccffffff">

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

3.java代码

• MainActivity

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private TabLayout mTableLayout;

    List<String> mTitleList = new ArrayList<>();
    List<Fragment> 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<String> mTitleList;

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

    /**
     * 接收传递的标题
     */
    public SamplePagerAdapter(FragmentManager fm, List<?> mFragment, List<String> 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