Android Tab大总结 Fragment+TabPageIndicator+ViewPager

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/24740977

Android现在实现Tab类型的界面方式越来越多，今天就把常见的实现方式给大家来个总结。目前写了：

1、传统的ViewPager实现

2、FragmentManager+Fragment实现

3、ViewPager+FragmentPagerAdapter实现

4、TabPageIndicator+ViewPager+FragmentPagerAdapter

1、传统的ViewPager实现

主要就是ViewPager+ViewAdapter这个还是比较常见的，就不多说了

效果图：

代码：

package com.example.mainframework02;  
  
import java.util.ArrayList;  
import java.util.List;  
  
import android.app.Activity;  
import android.os.Bundle;  
import android.support.v4.view.PagerAdapter;  
import android.support.v4.view.ViewPager;  
import android.support.v4.view.ViewPager.OnPageChangeListener;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
import android.widget.ImageButton;  
import android.widget.ImageView;  
import android.widget.LinearLayout;  
  
public class TraditionalViewPagerAcvitity extends Activity  
{  
  
    /** 
     * ViewPager 
     */  
    private ViewPager mViewPager;  
    /** 
     * ViewPager的适配器 
     */  
    private PagerAdapter mAdapter;  
    private List<View> mViews;  
    private LayoutInflater mInflater;  
      
    private int currentIndex;  
  
    /** 
     * 底部四个按钮 
     */  
    private LinearLayout mTabBtnWeixin;  
    private LinearLayout mTabBtnFrd;  
    private LinearLayout mTabBtnAddress;  
    private LinearLayout mTabBtnSettings;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState)  
    {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        mInflater = LayoutInflater.from(this);  
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
          
        /** 
         * 初始化View 
         */  
        initView();  
          
        mViewPager.setAdapter(mAdapter);  
  
        mViewPager.setOnPageChangeListener(new OnPageChangeListener()  
        {  
  
            @Override  
            public void onPageSelected(int position)  
            {  
                resetTabBtn();  
                switch (position)  
                {  
                case 0:  
                    ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
                            .setImageResource(R.drawable.tab_weixin_pressed);  
                    break;  
                case 1:  
                    ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
                            .setImageResource(R.drawable.tab_find_frd_pressed);  
                    break;  
                case 2:  
                    ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
                            .setImageResource(R.drawable.tab_address_pressed);  
                    break;  
                case 3:  
                    ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
                            .setImageResource(R.drawable.tab_settings_pressed);  
                    break;  
                }  
  
                currentIndex = position;  
            }  
  
            @Override  
            public void onPageScrolled(int arg0, float arg1, int arg2)  
            {  
  
            }  
  
            @Override  
            public void onPageScrollStateChanged(int arg0)  
            {  
            }  
        });  
  
    }  
  
    protected void resetTabBtn()  
    {  
        ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
                .setImageResource(R.drawable.tab_weixin_normal);  
        ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
                .setImageResource(R.drawable.tab_find_frd_normal);  
        ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
                .setImageResource(R.drawable.tab_address_normal);  
        ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
                .setImageResource(R.drawable.tab_settings_normal);  
    }  
  
    private void initView()  
    {  
  
        mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);  
        mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);  
        mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);  
        mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);  
  
        mViews = new ArrayList<View>();  
        View first = mInflater.inflate(R.layout.main_tab_01, null);  
        View second = mInflater.inflate(R.layout.main_tab_02, null);  
        View third = mInflater.inflate(R.layout.main_tab_03, null);  
        View fourth = mInflater.inflate(R.layout.main_tab_04, null);  
        mViews.add(first);  
        mViews.add(second);  
        mViews.add(third);  
        mViews.add(fourth);  
  
        mAdapter = new PagerAdapter()  
        {  
            @Override  
            public void destroyItem(ViewGroup container, int position, Object object)  
            {  
                container.removeView(mViews.get(position));  
            }  
  
            @Override  
            public Object instantiateItem(ViewGroup container, int position)  
            {  
                View view = mViews.get(position);  
                container.addView(view);  
                return view;  
            }  
  
            @Override  
            public boolean isViewFromObject(View arg0, Object arg1)  
            {  
                return arg0 == arg1;  
            }  
  
            @Override  
            public int getCount()  
            {  
                return mViews.size();  
            }  
        };  
    }  
  
}

评价：所有的代码都集中在一个Activity中，显得代码比较乱。

2、FragmentManager+Fragment实现

主要利用了Fragment在主内容界面对Fragment的add,hide等事务操作。

效果图：

代码：

主Activity

package com.example.mainframework02.fragment;  
  
import android.annotation.SuppressLint;  
import android.app.Activity;  
import android.app.FragmentManager;  
import android.app.FragmentTransaction;  
import android.os.Bundle;  
import android.view.View;  
import android.view.View.OnClickListener;  
import android.widget.ImageButton;  
import android.widget.LinearLayout;  
  
import com.example.mainframework02.R;  
  
public class FragmentMainActivity extends Activity implements OnClickListener  
{  
    private MainTab02 mTab02;  
    private MainTab01 mTab01;  
    private MainTab03 mTab03;  
    private MainTab04 mTab04;  
  
    /** 
     * 底部四个按钮 
     */  
    private LinearLayout mTabBtnWeixin;  
    private LinearLayout mTabBtnFrd;  
    private LinearLayout mTabBtnAddress;  
    private LinearLayout mTabBtnSettings;  
    /** 
     * 用于对Fragment进行管理 
     */  
    private FragmentManager fragmentManager;  
  
    @SuppressLint("NewApi")  
    @Override  
    protected void onCreate(Bundle savedInstanceState)  
    {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.fragment_main);  
        initViews();  
        fragmentManager = getFragmentManager();  
        setTabSelection(0);  
    }  
  
      
  
    private void initViews()  
    {  
  
        mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);  
        mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);  
        mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);  
        mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);  
  
        mTabBtnWeixin.setOnClickListener(this);  
        mTabBtnFrd.setOnClickListener(this);  
        mTabBtnAddress.setOnClickListener(this);  
        mTabBtnSettings.setOnClickListener(this);  
    }  
  
    @Override  
    public void onClick(View v)  
    {  
        switch (v.getId())  
        {  
        case R.id.id_tab_bottom_weixin:  
            setTabSelection(0);  
            break;  
        case R.id.id_tab_bottom_friend:  
            setTabSelection(1);  
            break;  
        case R.id.id_tab_bottom_contact:  
            setTabSelection(2);  
            break;  
        case R.id.id_tab_bottom_setting:  
            setTabSelection(3);  
            break;  
  
        default:  
            break;  
        }  
    }  
  
    /** 
     * 根据传入的index参数来设置选中的tab页。 
     *  
     */  
    @SuppressLint("NewApi")  
    private void setTabSelection(int index)  
    {  
        // 重置按钮  
        resetBtn();  
        // 开启一个Fragment事务  
        FragmentTransaction transaction = fragmentManager.beginTransaction();  
        // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况  
        hideFragments(transaction);  
        switch (index)  
        {  
        case 0:  
            // 当点击了消息tab时，改变控件的图片和文字颜色  
            ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
                    .setImageResource(R.drawable.tab_weixin_pressed);  
            if (mTab01 == null)  
            {  
                // 如果MessageFragment为空，则创建一个并添加到界面上  
                mTab01 = new MainTab01();  
                transaction.add(R.id.id_content, mTab01);  
            } else  
            {  
                // 如果MessageFragment不为空，则直接将它显示出来  
                transaction.show(mTab01);  
            }  
            break;  
        case 1:  
            // 当点击了消息tab时，改变控件的图片和文字颜色  
            ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
                    .setImageResource(R.drawable.tab_find_frd_pressed);  
            if (mTab02 == null)  
            {  
                // 如果MessageFragment为空，则创建一个并添加到界面上  
                mTab02 = new MainTab02();  
                transaction.add(R.id.id_content, mTab02);  
            } else  
            {  
                // 如果MessageFragment不为空，则直接将它显示出来  
                transaction.show(mTab02);  
            }  
            break;  
        case 2:  
            // 当点击了动态tab时，改变控件的图片和文字颜色  
            ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
                    .setImageResource(R.drawable.tab_address_pressed);  
            if (mTab03 == null)  
            {  
                // 如果NewsFragment为空，则创建一个并添加到界面上  
                mTab03 = new MainTab03();  
                transaction.add(R.id.id_content, mTab03);  
            } else  
            {  
                // 如果NewsFragment不为空，则直接将它显示出来  
                transaction.show(mTab03);  
            }  
            break;  
        case 3:  
            // 当点击了设置tab时，改变控件的图片和文字颜色  
            ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
                    .setImageResource(R.drawable.tab_settings_pressed);  
            if (mTab04 == null)  
            {  
                // 如果SettingFragment为空，则创建一个并添加到界面上  
                mTab04 = new MainTab04();  
                transaction.add(R.id.id_content, mTab04);  
            } else  
            {  
                // 如果SettingFragment不为空，则直接将它显示出来  
                transaction.show(mTab04);  
            }  
            break;  
        }  
        transaction.commit();  
    }  
  
    /** 
     * 清除掉所有的选中状态。 
     */  
    private void resetBtn()  
    {  
        ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
                .setImageResource(R.drawable.tab_weixin_normal);  
        ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
                .setImageResource(R.drawable.tab_find_frd_normal);  
        ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
                .setImageResource(R.drawable.tab_address_normal);  
        ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
                .setImageResource(R.drawable.tab_settings_normal);  
    }  
  
    /** 
     * 将所有的Fragment都置为隐藏状态。 
     *  
     * @param transaction 
     *            用于对Fragment执行操作的事务 
     */  
    @SuppressLint("NewApi")  
    private void hideFragments(FragmentTransaction transaction)  
    {  
        if (mTab01 != null)  
        {  
            transaction.hide(mTab01);  
        }  
        if (mTab02 != null)  
        {  
            transaction.hide(mTab02);  
        }  
        if (mTab03 != null)  
        {  
            transaction.hide(mTab03);  
        }  
        if (mTab04 != null)  
        {  
            transaction.hide(mTab04);  
        }  
          
    }  
  
}

各个TabFragment，一共四个TabFragment，下面贴出两个，基本都一样。

package com.example.mainframework02.fragment;  
  
import android.annotation.SuppressLint;  
import android.app.Fragment;  
import android.os.Bundle;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
  
@SuppressLint("NewApi")  
public class MainTab01 extends Fragment  
{  
  
    @Override  
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
    {  
        return inflater.inflate(com.example.mainframework02.R.layout.main_tab_01, container, false);  
  
    }  
  
}

package com.example.mainframework02.fragment;  
  
import android.annotation.SuppressLint;  
import android.app.Fragment;  
import android.os.Bundle;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
  
import com.example.mainframework02.R;  
  
@SuppressLint("NewApi")  
public class MainTab02 extends Fragment  
{  
  
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
    {  
        return inflater.inflate(R.layout.main_tab_02, container, false);  
  
    }  
  
}

评价：每个Fragment中的控件的处理，都是独立到各自的类中，相对来说主Activity简化了不少，可惜没有左右滑动的效果了。

3、ViewPager+Fragment实现

主要通过ViewPager和FragmentPagerAdapter一起来实现。

效果图：

代码：

主Activity

package com.example.mainframework03;  
  
import java.util.ArrayList;  
import java.util.List;  
  
import android.os.Bundle;  
import android.support.v4.app.Fragment;  
import android.support.v4.app.FragmentActivity;  
import android.support.v4.app.FragmentPagerAdapter;  
import android.support.v4.view.ViewPager;  
import android.support.v4.view.ViewPager.OnPageChangeListener;  
import android.widget.ImageButton;  
import android.widget.LinearLayout;  
  
public class MainActivity extends FragmentActivity  
{  
  
    private ViewPager mViewPager;  
    private FragmentPagerAdapter mAdapter;  
    private List<Fragment> mFragments = new ArrayList<Fragment>();  
      
      
    /** 
     * 底部四个按钮 
     */  
    private LinearLayout mTabBtnWeixin;  
    private LinearLayout mTabBtnFrd;  
    private LinearLayout mTabBtnAddress;  
    private LinearLayout mTabBtnSettings;  
  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState)  
    {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
  
          
        initView();  
          
          
  
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())  
        {  
  
            @Override  
            public int getCount()  
            {  
                return mFragments.size();  
            }  
  
            @Override  
            public Fragment getItem(int arg0)  
            {  
                return mFragments.get(arg0);  
            }  
        };  
          
        mViewPager.setAdapter(mAdapter);  
          
          
        mViewPager.setOnPageChangeListener(new OnPageChangeListener()  
        {  
  
            private int currentIndex;  
  
            @Override  
            public void onPageSelected(int position)  
            {  
                resetTabBtn();  
                switch (position)  
                {  
                case 0:  
                    ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
                            .setImageResource(R.drawable.tab_weixin_pressed);  
                    break;  
                case 1:  
                    ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
                            .setImageResource(R.drawable.tab_find_frd_pressed);  
                    break;  
                case 2:  
                    ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
                            .setImageResource(R.drawable.tab_address_pressed);  
                    break;  
                case 3:  
                    ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
                            .setImageResource(R.drawable.tab_settings_pressed);  
                    break;  
                }  
  
                currentIndex = position;  
            }  
  
            @Override  
            public void onPageScrolled(int arg0, float arg1, int arg2)  
            {  
  
            }  
  
            @Override  
            public void onPageScrollStateChanged(int arg0)  
            {  
            }  
        });  
  
    }  
      
    protected void resetTabBtn()  
    {  
        ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
                .setImageResource(R.drawable.tab_weixin_normal);  
        ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
                .setImageResource(R.drawable.tab_find_frd_normal);  
        ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
                .setImageResource(R.drawable.tab_address_normal);  
        ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
                .setImageResource(R.drawable.tab_settings_normal);  
    }  
  
    private void initView()  
    {  
  
        mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);  
        mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);  
        mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);  
        mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);  
  
        MainTab01 tab01 = new MainTab01();  
        MainTab02 tab02 = new MainTab02();  
        MainTab03 tab03 = new MainTab03();  
        MainTab04 tab04 = new MainTab04();  
        mFragments.add(tab01);  
        mFragments.add(tab02);  
        mFragments.add(tab03);  
        mFragments.add(tab04);  
    }  
}

还有4个TabFragment，下面贴一个，四个基本一样

package com.example.mainframework03;  
  
import android.os.Bundle;  
import android.support.v4.app.Fragment;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
  
public class MainTab01 extends Fragment  
{  
  
    @Override  
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
    {  
        return  inflater.inflate(R.layout.main_tab_01, container, false);  
      
    }  
  
}

评价：实现效果和第一种效果一模一样，每个Fragment独自处理自己内部的逻辑，代码整洁很多，并且支持左右滑动。感觉是第一种和第二种的结合版本。

4、TabPageIndicator+ViewPager+FragmentPagerAdapter

实现方式和3是一致的，但是使用了TabPageIndicator作为tab的指示器，效果还是不错的，这个之前写过，就不再贴代码了。

效果图：

参考：Android 使用Fragment，ViewPagerIndicator 制作csdn app主要框架

好了，就总结了这么多，肯定还有很多别的实现方式，大家可以留言，有时间会继续完善这篇总结的。

时间： 2024-10-28 15:41:00

Android Tab大总结 Fragment+TabPageIndicator+ViewPager的相关文章

Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24740977 Android现在实现Tab类型的界面方式越来越多,今天就把常见的实现方式给大家来个总结.目前写了: 1.传统的ViewPager实现 2.FragmentManager+Fragment实现 3.ViewPager+FragmentPagerAdapter实现 4.TabPageIndicator+ViewPager+FragmentPagerAdapter 1

Android Tab类型主界面 Fragment+TabPageIndicator+ViewPager

文章地址: Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager 1.使用ViewPager + PagerAdapter 每个页面的内容都在一个Activity中,维护起来会比较麻烦 2.FragmentManager + Fragment 每个页面的内容分开,但是只能点击按钮换页 3.ViewPager + FragmentPagerAdapter 综合前两种方式,比较好 4.TabPageIndicator + ViewPager

Android流行界面结构——Fragment通过ViewPager（带指示器）嵌套Fragment结构的创建方法详解

原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6287213.html 当前Android流行界面结构的一种--Fragment通过ViewPager嵌套Fragment结构目前非常常用,在本篇文章中, 我们一步一步将其创建出来,非常详细的让大家看到这个界面是如何实现的,下面我们开始吧. 首先我们看一下最终的效果动画,以便大家有个最初的印象. 本文章专注于功能的实现,并没有着重于界面的美观,所以大家看到的效果一般,UI效果需要大家进一步修改.

Fragment和ViewPager的使用和比较

Fragment是一种可以嵌入在活动当中的UI 片段,它能让程序更加合理和充分地利用大屏幕的空间,因而在平板上应用的非常广泛.拥有自己的生命周期和接收.处理用户的事件.你可以动态的添加.替换和移除某个Fragment. Fragment使用非常广泛,在此不介绍Fragment的生命周期,本例子将使用Fragment实现如下效果: Message Friend Setting 图一 Message Friend Setting 图二 Message Friend Setti

处女男学Android（十一）---Gallery、ViewPager和ViewPager+Fragment实现的Tab导航

一.前言有阵子没更新博客了,主要是最近公司接了个P2P的金融借贷项目没人做,被拉去写服务端,所以迟迟没时间继续学习大安卓,想了想自己的安卓水平和公司的专业安卓璟博比起来依旧差距挺大,于是乎我要加把劲赶上才行,所以继续翻开李刚疯狂讲义系列,看到Gallery这个控件了,大致功能是横向滚动查看列表项,再仔细看了一下居然过时了,官方推荐用ViewPager来替代,还没学就过时了,有点不爽,干脆新的旧的一起学习一下,也好进行一下比较吧.废话不多说,首先是已经过时的Gallery. 二.画廊视图Gall

Android tab导航的几种方法:ActionBar tab +fragment,Viewpager+pagerTitleStrip,开源框架ViewPageIndicator 和 ViewPager

action来实现tab标签并跟fragment结合因为要写新闻客户端这个tab导航是必须的这里我写几个小练习,希望大家融会贯通. 1actionbar设置tab +fragment 布局是个layout 什么layout都可以加个Id 叫container package com.example.demoforactionbar; import android.app.ActionBar; import android.app.Activity; import android.app.

tab界面实现方式之ViewPager+TabPageIndicator

今天我来说说ViewPager+tabPageIndicator来实现tab界面.首先tabPageIndicator是在第三方的library包里面-- viewPagerlibrary,在githup上可以下载,我们需要将它导入eclipse中,然后在关联它.当我们使用这个包的时候,有一个问题需要注意:可能主工程中会报错,但是我们又不知道是哪里错了,最好看看libs下的v4包,一定要保证主工程和library中的v4包要么一模一样,要么只有一个,所以要么将其中一个v4包用另一个v4覆盖,或者

Android中Fragment和ViewPager那点事儿

在之前的博文<Android中使用ViewPager实现屏幕页面切换和引导页效果实现>和<Android中Fragment的两种创建方式>以及<Android中Fragment与Activity之间的交互(两种实现方式)>中我们介绍了ViewPager以及Fragment各自的使用场景以及不同的实现方式. 那如果将他们两结合起来,会不会擦出点火花呢,答案是肯定的.之前在介绍ViewPager时,我们实现了多个ImageView的切换,并配合更新导航原点的状态.那我们现在

Tab 滑动标签，综合ViewPager+Fragment+自定义Tab+ActionBar内容

1.效果图第二个菜单TAB1,TAB2,TAB3是参照网上的例子,第一个菜单是在它的基础之上改变而来. 2.菜单这里的菜单是通过两种方式来实现,一种是通过布局文件,一种是通过自定义组件LinearLayout.自定义只需要传入菜单的名字即可,切换时需要监听事件.下面是一个viewpager+fragment实现,在滑动时改变tab的选中项. 自定义tab底部线是采用TranslateAnimation动画来实现滚动,布局文件采用viewpager的方法onPageScrolled和onPag