android Tab 类型切换界面
实现方案:viewpager + fragment + FragmentPagerAdapter
效果图:
可以左右滑动切换选项卡,或者点击;
如果想使用fragment的时候又想可以左右滑动,就可以使用这种方式。主要的部分就在viewpager的适配器。它的适配器继承FragmentPagerAdapter.
import java.util.ArrayList; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; public class FragmentAdapter extends FragmentPagerAdapter { private ArrayList<Fragment> list; public FragmentAdapter(FragmentManager fm, ArrayList<Fragment> list) { super(fm); this.list = list; } @Override public Fragment getItem(int arg0) { return list.get(arg0); } @Override public int getCount() { return list.size(); } }
需要传入FragmentManager对象和一个存放fragment的list对象。
/** * 初始化viewpager */ private void initViewPager() { viewPager = (ViewPager) findViewById(R.id.third_vp); fragmentsList = new ArrayList<Fragment>(); Fragment fragment = new Tab1Fragment(); fragmentsList.add(fragment); fragment = new Tab2Fragment(); fragmentsList.add(fragment); fragment = new Tab3Fragment(); fragmentsList.add(fragment); viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), fragmentsList)); viewPager.setCurrentItem(0); viewPager.setOnPageChangeListener(this); }
对button添加点击事件
@Override public void onClick(View v) { switch (v.getId()) { case R.id.tab1_tv: viewPager.setCurrentItem(0); break; case R.id.tab2_tv: viewPager.setCurrentItem(1); break; case R.id.tab3_tv: viewPager.setCurrentItem(2); break; } }
我在布局文件中添加了一个imageview作为指示器。如果想第一种tab类型界面的实现方式那样在onPageSelected()
方法中进行设置,效果是只能当页面完全切换过来之后才能把指示器移动过去。
要想实现滑动页面的时候同时移动指示器,就需要在onPageScrolled()方法中进行设置。
@Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { offset = (screen1_3 - cursorImg.getLayoutParams().width) / 2; Log.d("111", position + "--" + positionOffset + "--" + positionOffsetPixels); final float scale = getResources().getDisplayMetrics().density; if (position == 0) {// 0<->1 lp.leftMargin = (int) (positionOffsetPixels / 3) + offset; } else if (position == 1) {// 1<->2 lp.leftMargin = (int) (positionOffsetPixels / 3) + screen1_3 +offset; } cursorImg.setLayoutParams(lp); currentIndex = position; }
onPageScrolled中的三个参数比较重要。第一个参数是position。它的含义是表示当前显示的界面中的第一个界面。意思就是的当滑动的时候,有可能出现两个界面,position指的是左边的界面。第二个参数是positionOffset指的是偏移量的比例,取值范围是[0, 1)。第三个参数是positionOffsetPixels是指偏移的像素值。后两个参数都相对页面(一个page)来说的。
我之前有看到过设置指示器的时候用的前两个参数的,我也试了一下,OK的。不过感觉比较复杂,看了一下官方api,用第三个参数更简单。关键就是理解第一个参数position。用这种方法我只在代码里有两个判断就可以完成了。