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) {

    }
}