先看下效果图:
这个需要用到1个开源的 库,这个后面也会说下的。
工程目录:
1. MainActivity.java
public class MainActivity extends FragmentActivity { private ViewPagerFrameAdapter adapter; //适配器(标题和内容) private ViewPager mPager; private TabPageIndicator tabbPageIndicator; // private UnderlinePageIndicatorEx underlinePageIndicator; private int COUNT = 0; private Listtitles = new ArrayList (); //标题 @Override protected void onCreate(Bundle bundle) { super.onCreate(bundle); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); //标题,这里自己造的假数据 for (int j = 0; j <3 ; j++){ titles.add( "第"+ j +"标签卡"); } mPager = (ViewPager)findViewById(R.id.pager); adapter = new ViewPagerFrameAdapter(getSupportFragmentManager(),titles); mPager.setAdapter(adapter); //得到指示器 tabbPageIndicator = (TabPageIndicator) findViewById(R.id.tab_indicator); tabbPageIndicator.setViewPager(mPager); //下标 underlinePageIndicator = (UnderlinePageIndicatorEx)findViewById(R.id.underline_indicator); underlinePageIndicator.setViewPager(mPager); underlinePageIndicator.setFades(false); //设置指示器 tabbPageIndicator.setOnPageChangeListener(underlinePageIndicator); } //adapter 没啥好说的 跟前面的一样 private class ViewPagerFrameAdapter extends FragmentStatePagerAdapter{ private List title; //页面标题头部数据 public ViewPagerFrameAdapter(FragmentManager fm, List title) { super(fm); this.title = title; } //根据position 返回 fragment @Override public Fragment getItem(int position) { return ArrayFragment.newInstance(position); } //size @Override public int getCount() { return title.size(); } //顶部的title @Override public CharSequence getPageTitle(int position) { if (titles != null){ return titles.get(position).toString(); } return super.getPageTitle(position); } } }
UnderlinePageIndicatorEx.java
//继承这个然后重写 public class UnderlinePageIndicatorEx extends UnderlinePageIndicator{ public UnderlinePageIndicatorEx(Context context) { super(context, null); } public UnderlinePageIndicatorEx(Context context, AttributeSet attrs) { super(context, attrs, R.attr.vpiUnderlinePageIndicatorStyle); } public UnderlinePageIndicatorEx(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } //自身的 ViewPage传递过去 @Override public void setViewPager(ViewPager viewPager) { if (mViewPager == viewPager){ return; } // if (mViewPager != null) { // mViewPager.setOnPageChangeListener(null); // } if (viewPager.getAdapter() == null) { throw new IllegalStateException(" pager 没有 加入 adapter"); } mViewPager = viewPager; // mViewPager.setOnPageChangeListener(this); invalidate(); post(new Runnable(){ @Override public void run() { if (mFades) { post(mFadeRunnable); } } }); } }
ArrayFragment.java
public class ArrayFragment extends Fragment{ private int position; public ArrayFragment(int position){ this.position = position; } // 返回 viwePager 下面滑动的页面 public static ArrayFragment newInstance(int position){ return new ArrayFragment(position); } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public void onDestroy() { super.onDestroy(); } // 根据position 返回不同的view @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.layoutaa, null); return view; } }
好了接下来是 布局xml了。
接下来设置 滑动指示器的style
selector_tab.xml 这个是 选择器 在style中引用的,是用来切换 被选中的背景色的
<&#63;xml version="1.0" encoding="utf-8"&#63;>