Android-快速实现ViewPager+Tablayout的联动效果
Android-快速实现ViewPager+Tablayout的联动效果
在项目开发中很多场景都会碰到tab栏切换的效果,实现的思路也有很多种,tabhost+fragment,radionbtton+viewpager等方式都可以实现,这里就说下tablayout+viewpager的实现方式;tablayout是android5.0推出来的一个MaterialDesign风格的控件,是专门用来实现tab栏效果的;功能强大,使用方便灵活;
引入依赖库:
implementation 'com.android.support:support-v4:26.1.0'
implementation 'com.android.support:design:26.1.0'
布局文件:
<?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" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/bg" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="top|center" app:tabMode="fixed" app:tabGravity="fill" app:tabTextColor="@color/black999" app:tabSelectedTextColor="@color/orange" app:tabIndicatorColor="@color/orange" app:tabIndicatorHeight="4dp"/> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white"> </android.support.v4.view.ViewPager>
</LinearLayout>
tablayout提供了很多的属性可以设置:
app:tabIndicatorColor 指示器颜色
app:tabTextColor tab栏字体颜色
app:tabSelectedTextColor tab栏字体被选颜色
app:tabIndicatorHeight 指示器高度
app:tabBackground tab背景颜色
app:tabMaxWidth tab栏最大宽度
app:tabTextAppearance tab栏字体样式
app:tabMinWidth tab栏最小宽度
这些属性可以下xml中设置,也可以使用代码进行设置;需要注意这两个属性:
app:tabMode="";有scrollable和fixed两个属性值
scrollable:可滑动;
fixed:不能滑动,平分tabLayout宽度;
app:tabGravity="";有center和fill两个属性值
fill:tabs平均填充整个宽度;
center:tab居中显示;
页面实现方式:
public static final String[] tabTitles = new String[]{"全部", "代付款", "代发货", "配送中"};
private TabLayout mTabLayout; private ViewPager mViewPager; private List<MyOrderFragment> mFragments = new ArrayList<MyOrderFragment>();
mTabLayout = (TabLayout) findViewById(R.id.tablayout);
mViewPager = (ViewPager) findViewById(R.id.viewpager); tv_title.setText("所有订单"); for (int i = 0; i < tabTitles.length; i++) { mFragments.add(MyOrderFragment.createFragment(tabTitles[i],activity)); } //为ViewPager设置FragmentPagerAdapter mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } /** * 为TabLayout中每一个tab设置标题 */ @Override public CharSequence getPageTitle(int position) { return tabTitles[position]; } }); //TabLaout和ViewPager进行关联 mTabLayout.setupWithViewPager(mViewPager);
其中MyOrderFragment就是我们装载的页面 ,这样就可以快速的实现tablayout和viewpager相互关联。
做个简单的记录~