Android常用的ViewPager

发表于 | 更新于 | 评论数：
本文字数： 7k | 阅读时长 ≈ 6 分钟

ViewPager

PagerAdapter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
public class MainActivity extends AppCompatActivity {
    private ViewPager mVp;
    private List<View> mViewList=new ArrayList<>();
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mVp = (ViewPager) findViewById(R.id.m_vp);
        mViewList.add(getLayoutInflater().inflate(R.layout.view1,null));
        mViewList.add(getLayoutInflater().inflate(R.layout.view2,null));
        mViewList.add(getLayoutInflater().inflate(R.layout.view3,null));
        mVp.setAdapter(new MyPagerAdapter());
    }
    class MyPagerAdapter extends PagerAdapter{
        @Override
        public int getCount() {//数量
            return  mViewList.size();
        }
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
            /*判断容器里的View是否与一个key值相关联，
            但ViewPager并不是直接与View关联，而是关联一个key。
            我们实现这个方法也很简单谷歌推荐我们只需一句——return view == object;*/
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {//实例化item，PagerAdapter将选择将这个对象填充到在当前ViewPager里
              container.addView(mViewList.get(position));
              return mViewList.get(position);
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {//将item从指定的位置移出容器
              container.removeView(mViewList.get(position));
        }
    }
}

FragmentPagerAdapter&&FragmentStatePagerAdapter

setOffscreenPageLimit() 设置缓存页数，默认为1

FragmentPagerAdapter和FragmentStatePagerAdapter区别：

前者对于不需要的fragment只会onDestroyView销毁视图实例还保留在FragmentManager中。
而后者则是直接走onDetach，FragmentManager 中的fragment会被彻底移除，可在onSaveInstanceState(Bundle)方法中保存fragment的 Bundle 信息。用户切换回来时，保存的实例状态可用来恢复生成新的fragment。

FragmentPagerAdapter适用于那些相对静态的页，数量也比较少的那种。而多数量的可选择 FragmentStatePagerAdapter。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
public class MainActivity extends AppCompatActivity {
    private ViewPager mVp;
    private List<Fragment> mFragmentList=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mVp = (ViewPager) findViewById(R.id.m_vp);
        mFragmentList.add(new Fragment1());
        mFragmentList.add(new Fragment2());
        mFragmentList.add(new Fragment3());
        mVp.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager()));
    }
    class MyFragmentPagerAdapter extends FragmentPagerAdapter{
        public MyFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public Fragment getItem(int position) {
            return  mFragmentList.get(position);
        }
        @Override
        public int getCount() {
            return  mFragmentList.size();
        }
    }
}

禁止滑动效果的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
public class MyViewPager extends ViewPager {
    public MyViewPager(Context context) {
        super(context);
    }
    public MyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return false;
    }
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return false;
    }
    @Override
    public void setCurrentItem(int item) {
        super.setCurrentItem(item, false);
    }
}

TabLayout

compile 'com.android.support:design:25.3.1'  
记得要和com.android.support:appcompat版本一样

一些属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<android.support.design.widget.TabLayout
    android:id="@+id/m_ty"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
	
	<!--
    app:tabBackground 设置Tabs的背景
    app:tabGravity 设为center，Tabs就居中显示，fill 就充满TabLayout 
    app:tabIndicatorColor 设置指示器的颜色（就是下面的横线 默认为colorAccent 透明@color/transparent）
	app:tabIndicatorHeight 设置指示器的高度，默认是2dp
	app:tabMaxWidth 设置 Tab 的最大宽度
	app:tabMinWidth 设置 Tab 的最小宽度
	app:tabMode 设置Tabs的显示模式 是否能滚动  Tab个数少的时候用 fixed,当Tab个数较多（大于四个或者5个）时用scrollable
	app:tabPadding 设置Tab padding 还有Top  Bottom Start End
	app:tabSelectedTextColor 设置Tab选中后，文字显示的颜色
    app:tabTextColor 设置Tab未选中，文字显示的颜色
	app:tabTextAppearance 字体样式
    -->

定义文字图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//手动设置 图片在上文字再下
 TabLayout mTy = (TabLayout) findViewById(R.id.m_ty);
 mTy.addTab(mTy.newTab().setText("3").setIcon(R.mipmap.collection_namol));
 
 //自定义view
 private void setTabs(TabLayout tabLayout, LayoutInflater inflater, int[] tabTitlees, int[] tabImgs) {
        for (int i = 0; i < tabImgs.length; i++) {
            TabLayout.Tab tab = tabLayout.newTab();
            View view = inflater.inflate(R.layout.tab_custom, null);
            tab.setCustomView(view);
            TextView tvTitle = view.findViewById(R.id.tv_tab);
            tvTitle.setText(tabTitlees[i]);
            ImageView imgTab = view.findViewById(R.id.img_tab);
            imgTab.setImageResource(tabImgs[i]);
            tabLayout.addTab(tab);
        }
    }
 
....

布局文件设置

1
2
3
4
5
6
7
8
9
10
11
<android.support.design.widget.TabLayout
    android:id="@+id/m_ty"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="附近"
        android:icon="@mipmap/collection_namol"
        />
</android.support.design.widget.TabLayout>

配合ViewPager

第一种方法 setupWithViewPager()

优点：方便。缺点：使用setupWithViewPager就不能单独使用addTab设置TabLayout 的每个item的文字图片，布局文件设置也无效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
mTy.setupWithViewPager(mVp);
.....
  class MyFragmentPagerAdapter extends FragmentPagerAdapter {
       public MyFragmentPagerAdapter(FragmentManager fm) {
           super(fm);
       }
       @Override
       public Fragment getItem(int position) {
           return  mFragmentList.get(position);
       }
       @Override
       public int getCount() {
           return  mFragmentList.size();
       }
   @Override
   public CharSequence getPageTitle(int position) {//对应TabLayout的标题 图片貌似也可以不过我无法实现 个人感觉灵活性差
       return "文字";
   }

第二种方法 手动结合

这种灵活性高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
mVp.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTy));
mTy.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
           @Override
           public void onTabSelected(TabLayout.Tab tab) {
               mVp.setCurrentItem(tab.getPosition());
           }
           @Override
           public void onTabUnselected(TabLayout.Tab tab) {
           }
           @Override
           public void onTabReselected(TabLayout.Tab tab) {
           }
       });