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

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;@Overrideprotected 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：什麼都沒做。 */@Overridepublic void onPageScrollStateChanged(int state) {}/** * position :當前頁面，及你點擊滑動的頁面 offset:當前頁面位移的百分比 * offsetPixels:當前頁面位移的像素位置 */@Overridepublic 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);}@Overridepublic 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;}@Overridepublic Fragment getItem(int position) {return fragmentList.get(position);}@Overridepublic 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 {@Overridepublic 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;}@Overridepublic void onActivityCreated(Bundle savedInstanceState){super.onActivityCreated(savedInstanceState);}}