闲话不多说,先上效果图
可以看到我们要实现的效果有两个:
1.滑动ViewPager的时候,顶部的黄色横条跟着一起滑动。当滑动完毕的时候,ViewPager对应的标题的颜色发生改变。
2.当点击一个标题的时候,ViewPager显示对应的Fragment,然后颜色也跟着改变,横条位置也跟着改变。
横条跟着ViewPager滑动的原理是动态地设置它的leftMargin。这个设置是在ViewPager的OnPagerChangedListener的onPageScrolled方法中实现的。关键代码如下
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) tabLine.getLayoutParams(); params.leftMargin = (int) ((positionOffset+ position )* lineWidth); tabLine.setLayoutParams(params);
改变颜色其实是先全部回复初始的颜色,然后再根据相应的位置改变颜色。当点击标题的时候,通过ViewPager的setCurrentItem(position)来改变ViewPager。注意的是position是从0开始的。我们来看看具体的实现代码
/** * 初始化FragmentPagerAdapter */ private void initAdapter() { fragmentList = new ArrayList<Fragment>(); fragment1 = new PagerFragment1(); fragment2 = new PagerFragment2(); fragment3 = new PagerFragment3(); fragmentList.add(fragment1); fragmentList.add(fragment2); fragmentList.add(fragment3); mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { return fragmentList.get(position); } @Override public int getCount() { return fragmentList.size(); } }; } private void initView() { tab1Text = (TextView) findViewById(R.id.tab1); tab2Text = (TextView) findViewById(R.id.tab2); tab3Text = (TextView) findViewById(R.id.tab3); onClickListener = new TabOnClickListener(); tab1Text.setOnClickListener(onClickListener); tab2Text.setOnClickListener(onClickListener); tab3Text.setOnClickListener(onClickListener); tabLine = findViewById(R.id.tab_line); //初始化ViewPager,并且设置ViewPager的监听器 mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(mPagerAdapter); mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { //因为这里只有三个Tab,所有横条的宽带应该是屏幕的1/3 int lineWidth = getLineWidth(3); //横条随着ViewPager一起滑动 RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) tabLine.getLayoutParams(); params.leftMargin = (int) ((positionOffset+ position )* lineWidth); tabLine.setLayoutParams(params); } @Override public void onPageSelected(int position) { //当ViewPager滑动完毕,改变标题颜色 changeTabColor(position); } @Override public void onPageScrollStateChanged(int state) { } }); } /** * 根据标题的个数获取横条应该设置的宽度 * @param tabCount * @return */ public int getLineWidth(int tabCount){ DisplayMetrics metric = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(metric); int lineWidth = metric.widthPixels/tabCount; return lineWidth; } /** * * 根据ViewPager的位置改变对应标题的 * @param position */ private void changeTabColor(int position){ resetTabColor(); if(0 == position) { tab1Text.setTextColor(Color.parseColor("#ffec00")); } if(1 == position) { tab2Text.setTextColor(Color.parseColor("#ffec00")); } if(2 == position) { tab3Text.setTextColor(Color.parseColor("#ffec00")); } } /** * 重置标题的颜色 */ private void resetTabColor(){ tab1Text.setTextColor(Color.parseColor("#ffffff")); tab2Text.setTextColor(Color.parseColor("#ffffff")); tab3Text.setTextColor(Color.parseColor("#ffffff")); } /** * 标题点击事件的监听接口实现类 */ private class TabOnClickListener implements View.OnClickListener{ @Override public void onClick(View v) { resetTabColor(); switch (v.getId()){ case R.id.tab1: //设置当前的页面 mViewPager.setCurrentItem(0); //改变相应的Tab的字体颜色 tab1Text.setTextColor(Color.parseColor("#ffec00")); break; case R.id.tab2: //设置当前的页面 mViewPager.setCurrentItem(1); //改变相应的Tab的字体颜色 tab2Text.setTextColor(Color.parseColor("#ffec00")); break; case R.id.tab3: //设置当前的页面 mViewPager.setCurrentItem(2); tab3Text.setTextColor(Color.parseColor("#ffec00")); break; } } }
布局代码:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.sanisy.study.MainActivity" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:background="@color/colorPrimary" android:layout_height="64dp"> <LinearLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="62dp" android:orientation="horizontal"> <TextView android:id="@+id/tab1" android:layout_width="0dp" android:layout_weight="1" android:layout_height="62dp" android:gravity="center" android:textColor="#ffec00" android:text="页面1"/> <TextView android:id="@+id/tab2" android:layout_width="0dp" android:layout_weight="1" android:layout_height="62dp" android:textColor="#ffffff" android:gravity="center" android:text="页面2"/> <TextView android:id="@+id/tab3" android:layout_width="0dp" android:layout_weight="1" android:layout_height="62dp" android:textColor="#ffffff" android:gravity="center" android:text="页面3"/> </LinearLayout> <View android:id="@+id/tab_line" android:layout_width="122dp" android:layout_height="5dp" android:layout_below="@id/tab_layout" android:background="#ffec00"/> </RelativeLayout> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout>