ViewPager以及Fragment学习笔记

一、ViewPager实现Tab

1.ViewPager的简介和作用
ViewPager是android扩展包v4包中的类，这个类可以让用户左右切换当前的view
1）ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。
2）ViewPager类需要一个PagerAdapter适配器类给它提供数据。
3）ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

2.ViewPager的适配器
简介中提到了PagerAdapter，和ListView等控件使用一样,需要ViewPager设置PagerAdapter来完成页面和数据的绑定，这个PagerAdapter是一个基类适配器，我们经常用它来实现app引导图，它的子类有FragmentPagerAdapter和FragmentStatePagerAdapter,这两个子类适配器用于和Fragment一起使用，在安卓应用中它们就像listview一样出现的频繁。

实现一个最基本的PagerAdapter,必须实现以下四个方法：

int getCount()：返回显示多少个页面 boolean isViewFromObject(View view, Object object)：判断初始化返回的Object是不是一个View对象 void destroyItem(ViewGroup container, int position, Object object)：销毁条目对象 Object instantiateItem(ViewGroup container, int position)：初始化显示的条目对象

下面是一个实现微信的例子(简单的布局文件就不多讲了)：

顶部标题栏 top.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical" android:layout_width="match_parent"     android:layout_height="45dp"     android:gravity="center"     android:background="@drawable/title_bar">     <TextView         android:gravity="center"         android:layout_width="match_parent"         android:layout_height="45dp"         android:text="Hello World"         android:textSize="20sp"         android:textStyle="bold"/> </LinearLayout>

底部选项卡

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="horizontal" android:layout_width="match_parent"     android:layout_height="55dp"     android:background="@drawable/bottom_bar">     <LinearLayout         android:id="@+id/id_tab_weixin"         android:layout_width="0dp"         android:layout_height="fill_parent"         android:layout_weight="1"         android:gravity="center"         android:orientation="vertical">         <ImageButton             android:id="@+id/id_tab_weixin_img"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:src="@drawable/tab_weixin_pressed"             android:clickable="false"             android:background="#0000"/>         <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="微信"             android:textColor="#ffffff" />     </LinearLayout>     <LinearLayout         android:id="@+id/id_tab_frd"         android:layout_width="0dp"         android:layout_height="fill_parent"         android:layout_weight="1"         android:gravity="center"         android:orientation="vertical">         <ImageButton             android:id="@+id/id_tab_frd_img"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:src="@drawable/tab_find_frd_normal"             android:clickable="false"             android:background="#0000"/>         <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="朋友"             android:textColor="#ffffff" />     </LinearLayout>     <LinearLayout         android:id="@+id/id_tab_address"         android:layout_width="0dp"         android:layout_height="fill_parent"         android:layout_weight="1"         android:gravity="center"         android:orientation="vertical">         <ImageButton             android:id="@+id/id_tab_address_img"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:src="@drawable/tab_address_normal"             android:clickable="false"             android:background="#0000"/>         <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="通讯录"             android:textColor="#ffffff" />     </LinearLayout>     <LinearLayout         android:id="@+id/id_tab_settings"         android:layout_width="0dp"         android:layout_height="fill_parent"         android:layout_weight="1"         android:gravity="center"         android:orientation="vertical">         <ImageButton             android:id="@+id/id_tab_settings_img"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:src="@drawable/tab_settings_normal"             android:clickable="false"             android:background="#0000"/>         <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="设置"             android:textColor="#ffffff" />     </LinearLayout> </LinearLayout>

主布局文件 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="match_parent"     android:orientation="vertical">     <include layout="@layout/top"/>     <android.support.v4.view.ViewPager         android:id="@+id/id_viewpager"         android:layout_width="fill_parent"         android:layout_height="0dp"         android:layout_weight="1"/>     <include layout="@layout/bottom"/> </LinearLayout>

主类MainActivity.java

public class MainActivity extends Activity implements View.OnClickListener{     private ViewPager mViewPager;     private PagerAdapter mAdapter;     private List<View> mViews = new ArrayList<View>();     private List<String> lists;     private LinearLayout mTabWeixin;     private LinearLayout mTabFrd;     private LinearLayout mTabAdress;     private LinearLayout mTabSetting;     private ImageButton mWeixinImg;     private ImageButton mFrdImg;     private ImageButton mAddressImg;     private ImageButton mSettingImg;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         requestWindowFeature(Window.FEATURE_NO_TITLE);         setContentView(R.layout.activity_main);         lists = new ArrayList<>();         lists.add("android");         lists.add("java");         lists.add("c++");         lists.add("php");         initview();         initEvent();     }     private void initEvent() {         mTabWeixin.setOnClickListener(this);         mTabFrd.setOnClickListener(this);         mTabAdress.setOnClickListener(this);         mTabSetting.setOnClickListener(this);         mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {             @Override             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                 int currentItem = mViewPager.getCurrentItem();                 resetImg();                 switch (currentItem){                     case 0:                         mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);                         break;                     case 1:                         mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);                         break;                     case 2:                         mAddressImg.setImageResource(R.drawable.tab_address_pressed);                         break;                     case 3:                         mSettingImg.setImageResource(R.drawable.tab_settings_pressed);                         break;                 }             }             @Override             public void onPageSelected(int position) {             }             @Override             public void onPageScrollStateChanged(int state) {             }         });     }     private void initview() {         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);         mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);         mTabAdress = (LinearLayout) findViewById(R.id.id_tab_address);         mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);         mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);         mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);         mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);         mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);         LayoutInflater mInflater = LayoutInflater.from(this);         View tab01 = mInflater.inflate(R.layout.tab01,null);         View tab02 = mInflater.inflate(R.layout.tab02,null);         View tab03 = mInflater.inflate(R.layout.tab03,null);         View tab04 = mInflater.inflate(R.layout.tab04,null);         mViews.add(tab01);         mViews.add(tab02);         mViews.add(tab03);         mViews.add(tab04);         mAdapter = new PagerAdapter() {             @Override             public int getCount() {                 return lists.size();             }             @Override             public boolean isViewFromObject(View view, Object object) {                 return view==object;             }             @Override             public Object instantiateItem(ViewGroup container, int position) {                 View view = View.inflate(MainActivity.this,R.layout.tab01,null);                 TextView textView = view.findViewById(R.id.tv_name);                 textView.setText(lists.get(position));                 container.addView(view);                 return view;             }             @Override             public void destroyItem(ViewGroup container, int position, Object object) {                 container.removeView((View) object);             }         };         mViewPager.setAdapter(mAdapter);     }     @Override     public void onClick(View view) {         resetImg();         switch (view.getId()){             case R.id.id_tab_weixin:                 mViewPager.setCurrentItem(0);                 mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);                 break;             case R.id.id_tab_frd:                 mViewPager.setCurrentItem(1);                 mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);                 break;             case R.id.id_tab_address:                 mViewPager.setCurrentItem(2);                 mAddressImg.setImageResource(R.drawable.tab_address_pressed);                 break;             case R.id.id_tab_settings:                 mViewPager.setCurrentItem(3);                 mSettingImg.setImageResource(R.drawable.tab_settings_pressed);                 break;         }     }     /**      * 将所有的图片切换为暗色的      */     private void resetImg() {         mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);         mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);         mAddressImg.setImageResource(R.drawable.tab_address_normal);         mSettingImg.setImageResource(R.drawable.tab_settings_normal);     } }

ViewPager不仅可以实现左右滑动的页面效果，还可以用来做splashActivity。功能强大，应用广泛。使用时需要注意PagerAdapter的使用以及 OnPageChangeListener的使用。此例子中的难点是页面变动底部的选项按钮也随之发生改变，以及点击按钮时可以出发页面的改变。希望可以帮助到各位。  二、Fragment实现Tab

简单来说，Fragment其实可以理解为一个具有自己生命周期的控件，只不过这个控件又有点特殊，它有自己的处理输入事件的能力，有自己的生命周期，又必须依赖于Activity，能互相通信和托管。

使用Fragment还有这么几个方面优势：
1、代码复用。特别适用于模块化的开发，因为一个Fragment可以被多个Activity嵌套，有个共同的业务模块就可以复用了，是模块化UI的良好组件。
2、Activity用来管理Fragment。Fragment的生命周期是寄托到Activity中，Fragment可以被Attach添加和Detach释放。
3、可控性。Fragment可以像普通对象那样自由的创建和控制，传递参数更加容易和方便，也不用处理系统相关的事情，显示方式、替换、不管是整体还是部分，都可以做到相应的更改。
4、Fragments是view controllers，它们包含可测试的，解耦的业务逻辑块，由于Fragments是构建在views之上的，而views很容易实现动画效果，因此Fragments在屏幕切换时具有更好的控制。

主布局文件 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="match_parent"     android:orientation="vertical">     <include layout="@layout/top"/>     <FrameLayout         android:id="@+id/id_content"         android:layout_width="match_parent"         android:layout_height="0dp"         android:layout_weight="1"/>     <include layout="@layout/bottom"/> </LinearLayout>

主类MainActivity.java

public class MainActivity extends FragmentActivity implements View.OnClickListener{     private LinearLayout mTabWeixin;     private LinearLayout mTabFrd;     private LinearLayout mTabAddress;     private LinearLayout mTabSettings;     private ImageButton mImgWeixin;     private ImageButton mImgFrd;     private ImageButton mImgAddress;     private ImageButton mImgSettings;     private Fragment mTab01;     private Fragment mTab02;     private Fragment mTab03;     private Fragment mTab04;     @Override     protected void onCreate(Bundle savedInstanceState)     {         super.onCreate(savedInstanceState);         requestWindowFeature(Window.FEATURE_NO_TITLE);         setContentView(R.layout.activity_main);         initView();         initEvent();         setSelect(0);     }     private void initEvent()     {         mTabWeixin.setOnClickListener(this);         mTabFrd.setOnClickListener(this);         mTabAddress.setOnClickListener(this);         mTabSettings.setOnClickListener(this);     }     private void initView()     {         mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);         mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);         mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings);         mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);         mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);         mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);         mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img);     }     private void setSelect(int i)     {         FragmentManager fm = getSupportFragmentManager();         FragmentTransaction transaction = fm.beginTransaction();         hideFragment(transaction);         // 把图片设置为亮的         // 设置内容区域         switch (i)         {             case 0:                 if (mTab01 == null)                 {                     mTab01 = new WeixinFragment();                     transaction.add(R.id.id_content, mTab01);                 } else                 {                     transaction.show(mTab01);                 }                 mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);                 break;             case 1:                 if (mTab02 == null)                 {                     mTab02 = new FrdFragment();transaction.add(R.id.id_content, mTab02);                 } else                 {                     transaction.show(mTab02);                 }                 mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);                 break;             case 2:                 if (mTab03 == null)                 {                     mTab03 = new AddressFragment();                     transaction.add(R.id.id_content, mTab03);                 } else                 {                     transaction.show(mTab03);                 }                 mImgAddress.setImageResource(R.drawable.tab_address_pressed);                 break;             case 3:                 if (mTab04 == null)                 {                     mTab04 = new SettingFragment();                     transaction.add(R.id.id_content, mTab04);                 } else                 {                     transaction.show(mTab04);                 }                 mImgSettings.setImageResource(R.drawable.tab_settings_pressed);                 break;             default:                 break;         }         transaction.commit();//事务提交一定不要忘记     }     //隐藏Fragment     private void hideFragment(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);         }     }     @Override     public void onClick(View v)     {         resetImgs();         switch (v.getId())         {             case R.id.id_tab_weixin:                 setSelect(0);                 break;             case R.id.id_tab_frd:                 setSelect(1);                 break;             case R.id.id_tab_address:                 setSelect(2);                 break;             case R.id.id_tab_settings:                 setSelect(3);                 break;             default:                 break;         }     }     /**      * 切换图片至暗色      */     private void resetImgs()     {         mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);         mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);         mImgAddress.setImageResource(R.drawable.tab_address_normal);         mImgSettings.setImageResource(R.drawable.tab_settings_normal);     } }

此例子的写法代码很冗余，有简便写法，为了便于理解，此处就不过多讲解了。