Android常用的ViewPager

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) {
}
});