Android开发之利用ViewPager实现页面的切换(仿微信、QQ)

这里利用ViewPager实现页面的滑动，下面直接上代码：

1、首先写一个Activity，然后将要滑动的Fragment镶嵌到写好的Activity中。

Activity的布局文件：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" >

       <FrameLayout
            android:id="@+id/id_content"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="0dp"/>

     <android.support.v4.view.ViewPager
         android:id="@+id/id_viewpage"
         android:layout_width="fill_parent"
         android:layout_height="0dp"
         android:layout_weight="0.001" >
     </android.support.v4.view.ViewPager>

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

 </LinearLayout>

activity_main.xml中引入的布局（下面的切换的部分）

bottom.xml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="55dp"
     android:background="@drawable/bottom"
     android:orientation="horizontal" >

     <LinearLayout
         android:id="@+id/id_tab_education"
         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_education_img"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="#00000000"
             android:clickable="false"
             android:src="@drawable/tab_bar_01_check" />

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/bottom_jurisdiction" />
     </LinearLayout>

     <LinearLayout
         android:id="@+id/id_tab_frd"
         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_frd_img"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="#00000000"
             android:clickable="false"
             android:src="@drawable/tab_bar_04" />

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/bottom_discover" />
     </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/tab_bar_05" />

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/bottom_my" />
     </LinearLayout>

 </LinearLayout>

MainActivity.class（用来镶嵌Fragment）

 package com.example.activity;

 import com.example.fragment.SeekFragment;
 import com.example.fragment.ProcedureFragment;
 import com.example.fragment.MyFragment;
 import com.example.myproject.R;

 import android.app.Activity;
 import android.os.Bundle;
 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentActivity;
 import android.support.v4.app.FragmentManager;
 import android.support.v4.app.FragmentTransaction;
 import android.support.v4.view.ViewPager;
 import android.support.v4.view.ViewPager.OnPageChangeListener;
 import android.view.KeyEvent;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.view.Window;
 import android.widget.ImageButton;
 import android.widget.LinearLayout;
 import android.widget.Toast;

 public class MainActivity extends FragmentActivity implements OnClickListener{

     private long lastTime;//退出键的最后时间
     private ViewPager mViewPager;// 用来放置界面切换
     // 三个Tab，每个Tab包含一个按钮
     private LinearLayout mTabEducation;
     private LinearLayout mTabFrd;
     private LinearLayout mTabSetting;
     // 三个按钮
     private ImageButton mEducationImg;
     private ImageButton mFrdImg;
     private ImageButton mSettingImg;
     // 初始化3个Fragment
     private Fragment jurisdiction;
     private Fragment discover;
     private Fragment setting;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         // TODO Auto-generated method stub
         super.onCreate(savedInstanceState);
         requestWindowFeature(Window.FEATURE_NO_TITLE);
         setContentView(R.layout.activity_main);

         initView();
         initEvent();
         initViewPage(0);
     }

     /*
      * 判断哪个要显示，及设置按钮图片
      */
     @Override
     public void onClick(View arg0) {
         switch (arg0.getId()) {
         case R.id.id_tab_education:
             initViewPage(0);
             mViewPager.setCurrentItem(0);
             resetImg();
             mEducationImg.setImageResource(R.drawable.tab_bar_01_check);
             break;
         case R.id.id_tab_frd:
             initViewPage(1);
             mViewPager.setCurrentItem(1);
             resetImg();
             mFrdImg.setImageResource(R.drawable.tab_bar_04_check);
             break;
         case R.id.id_tab_setting:
             initViewPage(2);
             mViewPager.setCurrentItem(2);
             resetImg();
             mSettingImg.setImageResource(R.drawable.tab_bar_05_check);
             break;
         default:
             break;
         }
     }

     /*
      * 初始化配置
      */
     private void initView() {
         mViewPager = (ViewPager) findViewById(R.id.id_viewpage);
         // 初始化三个LinearLayout
         mTabEducation = (LinearLayout) findViewById(R.id.id_tab_education);
         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
         mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);
         // 初始化三个按钮
         mEducationImg = (ImageButton) findViewById(R.id.id_tab_education_img);
         mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
         mSettingImg = (ImageButton) findViewById(R.id.id_tab_setting_img);
     }

     /*
      * 初始化initViewPage
      */
     private void initViewPage(int i) {
         FragmentManager fm = getSupportFragmentManager();
         FragmentTransaction transaction = fm.beginTransaction();// 创建一个事务
         hideFragment(transaction);// 我们先把所有的Fragment隐藏了，然后下面再开始处理具体要显示的Fragment
         switch (i) {
         case 0:
             if (jurisdiction == null) {
                 jurisdiction = new ProcedureFragment();
                 transaction.add(R.id.id_content, jurisdiction);// 将微信聊天界面的Fragment添加到Activity中
             } else {
                 transaction.show(jurisdiction);
             }
             break;
         case 1:
             if (discover == null) {
                 discover = new SeekFragment();
                 transaction.add(R.id.id_content, discover);
             } else {
                 transaction.show(discover);
             }
             break;
         case 2:
             if (setting == null) {
                 setting = new MyFragment();
                 transaction.add(R.id.id_content, setting);
             } else {
                 transaction.show(setting);
             }
             break;

         default:
             break;
         }

         transaction.commit();// 提交事务
     }

     private void initEvent() {
         mTabEducation.setOnClickListener(this);
         mTabFrd.setOnClickListener(this);
         mTabSetting.setOnClickListener(this);
         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
             @Override
             public void onPageSelected(int arg0) {
                 int currentItem = mViewPager.getCurrentItem();
                 switch (currentItem) {
                 case 0:
                     resetImg();
                     mEducationImg.setImageResource(R.drawable.tab_bar_01_check);
                     break;
                 case 1:
                     resetImg();
                     mFrdImg.setImageResource(R.drawable.tab_bar_04_check);
                     break;
                 case 2:
                     resetImg();
                     mSettingImg.setImageResource(R.drawable.tab_bar_05_check);
                 default:
                     break;
                 }
             }

             @Override
             public void onPageScrolled(int arg0, float arg1, int arg2) {

             }

             @Override
             public void onPageScrollStateChanged(int arg0) {

             }
         });
     }

     /*
      * 隐藏所有的Fragment
      */
     private void hideFragment(FragmentTransaction transaction) {
         if (jurisdiction != null) {
             transaction.hide(jurisdiction);
         }
         if (discover != null) {
             transaction.hide(discover);
         }
         if (setting != null) {
             transaction.hide(setting);
         }
     }

     /*
      * 把所有图片变暗
      */
     private void resetImg() {
         mEducationImg.setImageResource(R.drawable.tab_bar_01);
         mFrdImg.setImageResource(R.drawable.tab_bar_04);
         mSettingImg.setImageResource(R.drawable.tab_bar_05);
     }
     @Override
     public boolean onKeyDown(int keyCode, KeyEvent event) {

         if (keyCode == KeyEvent.KEYCODE_BACK) {
             if (System.currentTimeMillis() - lastTime <= 2000) {
                 finish();
             } else {
                 Toast.makeText(this, "再按一次退出程序", 1000).show();
                 lastTime = System.currentTimeMillis();
             }
             return false;
         }
         return super.onKeyDown(keyCode, event);
     }
 }

通过以上代码即可实现微信或QQ的那种页面的切换了，具体里面的内容则根据自身情况在相应的fragment中来实现。

下面给一个一个空的Fragment，以此为蓝图，剩余的部分可以在此基础上更改添加。

SeekFragment.java

 package com.example.fragment;

 import com.example.myproject.R;

 import android.os.Bundle;
 import android.support.v4.app.Fragment;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 /**
  * 查找fragment
  * @author admin
  *
  */
 public class SeekFragment extends Fragment {
     private View rootView;
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
             Bundle savedInstanceState) {
         if (null == rootView) {
             rootView = inflater.inflate(R.layout.fragment_seek, container,
                     false);
             initView(rootView);
         }
         return rootView;
     }
     /**
      * 用于初始化，具体操作视自己情况而定
      * @param rootView
      */
     private void initView(View rootView) {

     }
 }