android v7 tablayout,Android TabLayout使用及遇到的问题

TabLayout结合ViewPager的使用

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

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

2.在xml中布局

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: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:id="@+id/view_pager"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

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" 可解决此问题