ViewPager适配器学习记要（ pageAdapter和FragmentPagerAdapter/FragmentStatePagerAdapter)）

ViewPager适配器学习记录（ pageAdapter和FragmentPagerAdapter/FragmentStatePagerAdapter)）

1、概述

ViewPager，顾名思义实现控件的滚动功能，是Support-v4的包中类，使用前要先导包。使用的时候跟listView有点相似，需要设置对应的适配器，通常有俩大类

【pageAdapter】

【FragmentPagerAdapter/FragmentStatePagerAdapter】

fragment有着自己的生命周期，谷歌官方也推荐使用ViewPage+fragment的形式，一般简单的也可以使用ViewPage+pageAdapter形式

这里用这俩种适配器来搭个框架学习使用一下，先上使用FragmentPagerAdapter的效果图





1、FragmentPagerAdapter/FragmentStatePagerAdapter

首先他们都是继承自PagerAdapter，FragmentPagerAdapter适合使用在固定的数量较少的场景，比如本例的4个tab的fragment滑动界面，而FragmentStatePagerAdapter适合适合用在多个tab场景下，并且会保存当前界面以及下一个界面和上一界面，最多可以保留3个（具体源码分析参见http://blog.csdn.net/jackrex/article/details/9885469?utm_source=tuicool&utm_medium=referral）他们的使用方式一致，这里以FragmentPagerAdapter来看

在使用FragmentPagerAdapter时我们首先要实现它的俩个方法，如下

//初始化Adapter这里使用FragmentPagerAdapter
mAdpter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {

return mFragments.get(position);
}

@Override
public int getCount() {
return mFragments.size();
}

};

方法一目了然，getCount()返回的是ViewPager页面的数量，getItem()返回的是要显示的fragent对象。

从这里看到我们管理的对象是不同的fragment对应不同的布局

2、pageAdapter

使用pageradapter，至少必须重写下面的四个方法

【 instantiateItem(ViewGroup, int)】

这个函数的实现的功能是创建指定位置的页面视图。适配器有责任增加即将创建的View视图到这里给定的container中，这是为了确保在finishUpdate(viewGroup)返回时这个已经完成

返回值：返回一个代表新增视图页面的Object

【public void destroyItem (ViewGroup container, int position, Object object)】

该方法实现的功能是移除一个给定位置的页面。适配器有责任从容器中删除这个视图。这是为了确保在finishUpdate(viewGroup)返回时视图能够被移除。

【 public int getCount()】

返回当前有效视图的个数。

【isViewFromObject(View, Object)】

功能：该函数用来判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View)

返回值：如果对应的是同一个View，返回True，否则返回False。

3、viewpager+fragment demo代码实现

主要目录结构如下



主布局文件activity_main.xml如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="vertical">

<include layout="@layout/topbar_layout"/>

<android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>

<include layout="@layout/bottom"/>

</LinearLayout>

可以看出这里通过include包含一头一尾，中间是V4包中的ViewPager

bottom.xml代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="5dp"
android:background="@color/mainpage_mycrircle_leftview_item_auth_name"
>

<LinearLayout
android:id="@+id/id_tab_mycircle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<!-- android:clickable="false" 是为了防止ImageButton截取了触摸事件 ，这里事件要给它的上一级linearlayout-->
<Im
d00d
ageButton
android:id="@+id/id_tab_mycirlceImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@drawable/mainpage_tab_mycircle_selected"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的圈子"
/>
</LinearLayout>

<LinearLayout
android:id="@+id/id_tab_discovery"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">

<ImageButton
android:id="@+id/id_tab_discovery_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@drawable/mainpage_tab_discovery_normal"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发现"
/>
</LinearLayout>

<LinearLayout
android:id="@+id/id_tab_message"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">

<ImageButton
android:id="@+id/id_tab_message_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"

android:src="@drawable/mainpage_tab_message_normal"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="消息"
/>
</LinearLayout>

<LinearLayout
android:id="@+id/id_tab_setting"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">

<ImageButton
android:id="@+id/id_tab_setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@drawable/mainpage_tab_setting_normal"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="个人中心"
/>
</LinearLayout>
</LinearLayout>

通过权重这里也可以使用RadioGroup来做这个底部

然后是MainActivity处理逻辑函数

package com.elvis.gachatest;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
//定义控件
private ViewPager mViewPager;
private FragmentPagerAdapter mAdpter;
private List<Fragment> mFragments = new ArrayList<>();

//四个Tab每个Tab都有一个按钮
private LinearLayout mTabMyCircle;
private LinearLayout mTabMyDiscovery;
private LinearLayout mTabMyMsg;
private LinearLayout mTabMyCenter;
//四个按钮
private ImageButton myCircleImg;
private ImageButton myDiscoveryImg;
private ImageButton myMsgImg;
private ImageButton myCenterImg;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

initViews();//初始化控件
initEvent();//监听逻辑事件

initViewPages();//初始化viewpager
}

private void initViews() {

mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
//初始化四个布局
mTabMyCircle = (LinearLayout) findViewById(R.id.id_tab_mycircle);
mTabMyDiscovery = (LinearLayout) findViewById(R.id.id_tab_discovery);
mTabMyMsg = (LinearLayout) findViewById(R.id.id_tab_message);
mTabMyCenter = (LinearLayout) findViewById(R.id.id_tab_setting);
//初始化四个按钮
myCircleImg = (ImageButton) findViewById(R.id.id_tab_mycirlceImg);
myDiscoveryImg = (ImageButton) findViewById(R.id.id_tab_discovery_img);
myMsgImg = (ImageButton) findViewById(R.id.id_tab_message_img);
myCenterImg = (ImageButton) findViewById(R.id.id_tab_setting_img);
}

private void initViewPages() {
//初始化四个布局
Fragment01 tab01 = new Fragment01();
Fragment02 tab02 = new Fragment02();
Fragment03 tab03 = new Fragment03();
Fragment04 tab04 = new Fragment04();
mFragments.add(tab01);
mFragments.add(tab02);
mFragments.add(tab03);
mFragments.add(tab04);
//初始化Adapter这里使用FragmentPagerAdapter
mAdpter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {

return mFragments.get(position);
}

@Override
public int getCount() {
return mFragments.size();
}

};
mViewPager.setAdapter(mAdpter);

}

private void initEvent() {
//设置监听器
myCircleImg.setOnClickListener(this);
myDiscoveryImg.setOnClickListener(this);
myMsgImg.setOnClickListener(this);
myCenterImg.setOnClickListener(this);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
//当viewPager滑动的时候
int currentPage = mViewPager.getCurrentItem();
switch (currentPage) {
case 0:
reSetImg();
myCircleImg.setImageResource(R.drawable.mainpage_tab_mycircle_selected);
break;
case 1:
reSetImg();
myDiscoveryImg.setImageResource(R.drawable.mainpage_tab_discovery_selected);
break;
case 2:
reSetImg();
myMsgImg.setImageResource(R.drawable.mainpage_tab_message_selected);
break;
case 3:
reSetImg();
myCenterImg.setImageResource(R.drawable.mainpage_tab_setting_selected);
break;
default:
break;
}

}

@Override
public void onPageScrollStateChanged(int state) {

}
});

}

private void reSetImg() {
myCircleImg.setImageResource(R.drawable.mainpage_tab_mycircle_normal);
myDiscoveryImg.setImageResource(R.drawable.mainpage_tab_discovery_normal);
myMsgImg.setImageResource(R.drawable.mainpage_tab_message_normal);
myCenterImg.setImageResource(R.drawable.mainpage_tab_setting_normal);

}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.id_tab_mycirlceImg:
mViewPager.setCurrentItem(0);
reSetImg();
myCircleImg.setImageResource(R.drawable.mainpage_tab_mycircle_selected);
break;
case R.id.id_tab_discovery_img:
mViewPager.setCurrentItem(1);
reSetImg();
myDiscoveryImg.setImageResource(R.drawable.mainpage_tab_discovery_selected);
break;
case R.id.id_tab_message_img:
mViewPager.setCurrentItem(2);
reSetImg();
myMsgImg.setImageResource(R.drawable.mainpage_tab_message_selected);
break;
case R.id.id_tab_setting_img:
mViewPager.setCurrentItem(3);
reSetImg();
myCenterImg.setImageResource(R.drawable.mainpage_tab_setting_selected);
break;
default:
break;

}

}

}

这里要注意使用Fragment时统统使用V4包下的fragment，否则会出错

要是使用pageAdapter方式核心代码如下

private void initViewPages() {
//初始化四个布局
LayoutInflater mLayoutInflater = LayoutInflater.from(this);
View tab1 = mLayoutInflater.inflate(R.layout.tab01, null);
View tab2 = mLayoutInflater.inflate(R.layout.tab02, null);
View tab3 = mLayoutInflater.inflate(R.layout.tab03, null);
View tab4 = mLayoutInflater.inflate(R.layout.tab04, null);
//加入到list中
mViews.add(tab1);
mViews.add(tab2);
mViews.add(tab3);
mViews.add(tab4);

//初始化ViewPager适配器
mPagerAdapter = new PagerAdapter() {
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//从container中删除指定position的View
container.removeView(mViews.get(position));
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
//将当前视图添加到View中
View view = mViews.get(position);
container.addView(view);
//返回当前视图
return view;
}

@Override
public int getCount() {
//返回要滑动的View个数
return mViews.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}

};
//设置adapter
mViewPager.setAdapter(mPagerAdapter);

}

demo地址 http://download.csdn.net/detail/xsf50717/9259105
版权声明：如有转载请注明出处，谢谢~