实际开发中,ViewPager经常结合Fragment来使用,然后再使用三方开源的PagerSlidingTabStrip去实现类似选项卡滑动效果。我之前那个APP的首页就是这样搭建的。
如果我们想要实现tabLayout也滑动的效果,那么只需要设置:
//下面这行可以设置tab可以滑动的效果 mTabs.setTabMode(TabLayout.MODE_SCROLLABLE);
就可以实现:
主XML文件如下:
<android.support.design.widget.TabLayout android:id="@+id/square_tabs" android:layout_width="match_parent" android:layout_height="40dp" android:background="@color/white" app:tabBackground="@android:color/transparent" app:tabIndicatorColor="@color/tabIndicatorColor" app:tabSelectedTextColor="@color/colorViewPager" app:tabTextColor="@color/search_tab_gray" app:tabIndicatorHeight="2dp" /> <com.choicelean.superwinner.component.ToggleViewPager android:layout_marginTop="10dp" android:id="@+id/square_viewpager" android:layout_width="match_parent" android:layout_height="match_parent"> </com.choicelean.superwinner.component.ToggleViewPager>
下面的是项目源代码中主界面的,采用工厂设计模式实现不同的Fragment在ViewPager中滑动。
public class SquareActivity extends BaseFragmentActivity implements View.OnClickListener { public static final String SQUARE_KEY = "order_type"; public static final int SQUARE_ALL = 0; public static final int SQUARE_HOT = 1; public static final int SQUARE_RECOMMEND = 2; public static final int SQUARE_YUER = 3; public static final int SQUARE_BABY = 4; public static final int SQUARE_HEALTH = 5; public static final int SQUARE_LIFE = 6; private ImageView squareBack; private SquareActivity.SquareAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_square); initView(); setCurrentItem(getIntent().getIntExtra(SQUARE_KEY, SQUARE_ALL)); } private ArrayList<String> title = new ArrayList<>(); private TabLayout mTabs; private ToggleViewPager fragPager; public void setCurrentItem(int position) { fragPager.setCurrentItem(position, false); } @Override protected void onDestroy() { FragmentFactory.clearSquareFragment(); super.onDestroy(); } private void initView() { squareBack=findViewById(R.id.square_back); mTabs =findViewById(R.id.square_tabs); fragPager = findViewById(R.id.square_viewpager); title.add("热门"); title.add("推荐"); title.add("育儿"); title.add("晒娃"); title.add("健康"); title.add("生活"); for (int i = 0; i < title.size(); i++) { mTabs.addTab(mTabs.newTab().setText(title.get(i))); } adapter = new SquareActivity.SquareAdapter(getSupportFragmentManager()); fragPager.setAdapter(adapter); fragPager.setOffscreenPageLimit(4); fragPager.setCanScroll(true); ViewUtils.reflex(mTabs, false); mTabs.setupWithViewPager(fragPager); //下面这行可以设置tab可以滑动的效果 mTabs.setTabMode(TabLayout.MODE_SCROLLABLE); squareBack.setOnClickListener(this); } @Override public void onClick(View view) { switch (view.getId()) { case R.id.square_back: finish(); overridePendingTransition(R.anim.close_x_enter, R.anim.close_x_exit); break; default: break; } } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK) { finish(); overridePendingTransition(R.anim.close_x_enter, R.anim.close_x_exit); return true; } return super.onKeyDown(keyCode, event); } private class SquareAdapter extends FragmentPagerAdapter { public SquareAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return FragmentFactory.createSquareFragment(position); } @Override public int getCount() { return 6; } @Override public CharSequence getPageTitle(int position) { return title.get(position); } } /** * 由全部、已收货、待评价页面更新数据 */ public void sureGet() { for (int i = 0; i < adapter.getCount(); i++) { ((SquareBaseFragment) adapter.getItem(i)).sureGet(); } } }