Android ViewPager和Fragment實現頂部導航界面滑動效果

在項目中，我們常常需要實現界面滑動切換的效果。例如，微信界面的左右滑動切換效果。那這種效果是怎麼實現的？今天我就帶大家簡單了解ViewPager，並通過實例來實現該效果。

一. ViewPager 官方API

首先我們來看一下ViewPager官方給出的解釋，如圖：

具體意思如下：

 

Layout 管理器允許用戶可以在頁面上，左右滑動來翻動頁面。你可以考慮實現PagerAdapter接口來顯示該效果。

ViewPager很多時候會結合Fragment一塊使用，這種方法使得管理每個頁面的生命周期變得很方便。其中，有一些adapter的具體實現，可以適合於這種ViewPager結合Fragment使用的情況。這些adapter包括：FragmentPagerAdapter,和 FragmentStatePagerAdapter。

而本文就是通過ViewPager結合Fragment利用FragmentpagerAdapter適配器來實現左右滑動的效果。

二.效果如下：

三.代碼實現：

1.xml布局文件

1>主布局activity_main.xml

 

注意：布局中加載android.support.v4.view.ViewPager,所有需要引入android-support-v4.jar(正常情況系統會自動引入)

 

2>頂部導航activity_main_top_tab.xml

 

3>Fragment顯示布局activity_tab_chat.xml，activity_tab_contacts.xml，activity_tab_friend.xml(只給出一個，其他類似)

 

 

4>主函數MainActivity.java

 

 

package com.example.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {

	private List mFragmentList = new ArrayList();
	private FragmentAdapter mFragmentAdapter;
	
	private ViewPager mPageVp;
	/**
	 * Tab顯示內容TextView
	 */
	private TextView mTabChatTv, mTabContactsTv, mTabFriendTv;
	/**
	 * Tab的那個引導線
	 */
	private ImageView mTabLineIv;
	/**
	 * Fragment
	 */
	private ChatFragment mChatFg;
	private FriendFragment mFriendFg;
	private ContactsFragment mContactsFg;
	/**
	 * ViewPager的當前選中頁
	 */
	private int currentIndex;
	/**
	 * 屏幕的寬度
	 */
	private int screenWidth;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		findById();
		init();
		initTabLineWidth();

	}

	private void findById() {
		mTabContactsTv = (TextView) this.findViewById(R.id.id_contacts_tv);
		mTabChatTv = (TextView) this.findViewById(R.id.id_chat_tv);
		mTabFriendTv = (TextView) this.findViewById(R.id.id_friend_tv);

		mTabLineIv = (ImageView) this.findViewById(R.id.id_tab_line_iv);

		mPageVp = (ViewPager) this.findViewById(R.id.id_page_vp);
	}

	private void init() {
		mFriendFg = new FriendFragment();
		mContactsFg = new ContactsFragment();
		mChatFg = new ChatFragment();
		mFragmentList.add(mChatFg);
		mFragmentList.add(mFriendFg);
		mFragmentList.add(mContactsFg);

		mFragmentAdapter = new FragmentAdapter(
				this.getSupportFragmentManager(), mFragmentList);
		mPageVp.setAdapter(mFragmentAdapter);
		mPageVp.setCurrentItem(0);

		mPageVp.setOnPageChangeListener(new OnPageChangeListener() {

			/**
			 * state滑動中的狀態 有三種狀態（0，1，2） 1：正在滑動 2：滑動完畢 0：什麼都沒做。
			 */
			@Override
			public void onPageScrollStateChanged(int state) {

			}

			/**
			 * position :當前頁面，及你點擊滑動的頁面 offset:當前頁面偏移的百分比
			 * offsetPixels:當前頁面偏移的像素位置
			 */
			@Override
			public void onPageScrolled(int position, float offset,
					int offsetPixels) {
				LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv
						.getLayoutParams();

				Log.e(offset:, offset + );
				/**
				 * 利用currentIndex(當前所在頁面)和position(下一個頁面)以及offset來
				 * 設置mTabLineIv的左邊距 滑動場景：
				 * 記3個頁面,
				 * 從左到右分別為0,1,2 
				 * 0->1; 1->2; 2->1; 1->0
				 */

				if (currentIndex == 0 && position == 0)// 0->1
				{
					lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex
							* (screenWidth / 3));

				} else if (currentIndex == 1 && position == 0) // 1->0
				{
					lp.leftMargin = (int) (-(1 - offset)
							* (screenWidth * 1.0 / 3) + currentIndex
							* (screenWidth / 3));

				} else if (currentIndex == 1 && position == 1) // 1->2
				{
					lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex
							* (screenWidth / 3));
				} else if (currentIndex == 2 && position == 1) // 2->1
				{
					lp.leftMargin = (int) (-(1 - offset)
							* (screenWidth * 1.0 / 3) + currentIndex
							* (screenWidth / 3));
				}
				mTabLineIv.setLayoutParams(lp);
			}

			@Override
			public void onPageSelected(int position) {
				resetTextView();
				switch (position) {
				case 0:
					mTabChatTv.setTextColor(Color.BLUE);
					break;
				case 1:
					mTabFriendTv.setTextColor(Color.BLUE);
					break;
				case 2:
					mTabContactsTv.setTextColor(Color.BLUE);
					break;
				}
				currentIndex = position;
			}
		});

	}

	/**
	 * 設置滑動條的寬度為屏幕的1/3(根據Tab的個數而定)
	 */
	private void initTabLineWidth() {
		DisplayMetrics dpMetrics = new DisplayMetrics();
		getWindow().getWindowManager().getDefaultDisplay()
				.getMetrics(dpMetrics);
		screenWidth = dpMetrics.widthPixels;
		LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv
				.getLayoutParams();
		lp.width = screenWidth / 3;
		mTabLineIv.setLayoutParams(lp);
	}

	/**
	 * 重置顏色
	 */
	private void resetTextView() {
		mTabChatTv.setTextColor(Color.BLACK);
		mTabFriendTv.setTextColor(Color.BLACK);
		mTabContactsTv.setTextColor(Color.BLACK);
	}

}

注意：

1.MainActivity繼承於FragmentActivity;

2.初始化導航條的寬度：initTabLineWidth()，由於本例給出的是3個界面切換，固長度為整個屏幕寬度的1/3;

3.監聽事件OnPageChangeListener的onPageScrolled方法主要捕捉滑動事件;

其中給出了3個參數所表示的意義。根據滑動的4中變化(左-中-右-中-左)，給出導航條距離左邊的邊距，顯示導航條滑動的效果。

 

5>Fragment適配器FragmentAdapter，繼承於FragmentPagerAdapter

package com.example.viewpagerdemo;

import java.util.ArrayList;
import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class FragmentAdapter extends FragmentPagerAdapter {

	List fragmentList = new ArrayList();
	public FragmentAdapter(FragmentManager fm,List fragmentList) {
		super(fm);
		this.fragmentList = fragmentList;
	}

	@Override
	public Fragment getItem(int position) {
		return fragmentList.get(position);
	}

	@Override
	public int getCount() {
		return fragmentList.size();
	}

}

6>Fragment顯示函數ChatFragment.java,ContactsFragment.java,FriendFragment.java(只給出一個，其他類似)

 

 

package com.example.viewpagerdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ChatFragment extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){
		super.onCreateView(inflater, container, savedInstanceState);
		View chatView = inflater.inflate(R.layout.activity_tab_chat, container,false);
		return chatView;	
	}
	@Override
	public void onActivityCreated(Bundle savedInstanceState){
		super.onActivityCreated(savedInstanceState);
	}
}