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

来源：互联网发布：nginx 禁止ip访问网站编辑：程序博客网时间：2024/05/17 04:14

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-->        <ImageButton            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

0 0