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

<span style="font-family:Microsoft YaHei;font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

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

<android.support.v4.view.ViewPager

android:id="@+id/id_page_vp"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" >

</android.support.v4.view.ViewPager>

</LinearLayout></span>

注意：布局中加载android.support.v4.view.ViewPager,所有需要引入android-support-v4.jar(正常情况系统会自动引入)

2>顶部导航activity_main_top_tab.xml

<span style="font-family:Microsoft YaHei;font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

<LinearLayout

android:id="@+id/id_switch_tab_ll"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:baselineAligned="false"

>

<LinearLayout

android:id="@+id/id_tab_chat_ll"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="@drawable/guide_round_selector"

android:gravity="center"

android:orientation="horizontal"

android:padding="10dip" >

<TextView

android:id="@+id/id_chat_tv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="聊天"

android:textColor="#0000FF"

android:textSize="15dip" />

</LinearLayout>

<LinearLayout

android:id="@+id/id_tab_friend_ll"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="@drawable/guide_round_selector"

android:clickable="true"

android:gravity="center"

android:orientation="horizontal"

android:padding="10dip"

android:saveEnabled="false" >

<TextView

android:id="@+id/id_friend_tv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="好友"

android:textColor="#000000"

android:textSize="15dip" />

</LinearLayout>

<LinearLayout

android:id="@+id/id_tab_contacts_ll"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:background="@drawable/guide_round_selector"

android:focusable="false"

android:gravity="center"

android:orientation="horizontal"

android:padding="10dip" >

<TextView

android:id="@+id/id_contacts_tv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="通讯录"

android:textColor="#000000"

android:textSize="15dip" />

</LinearLayout>

</LinearLayout>

<ImageView

android:id="@+id/id_tab_line_iv"

android:layout_width="200dp"

android:layout_height="wrap_content"

android:contentDescription="tab"

android:background="@drawable/tab_selected_pressed_holo" >

</ImageView>

<View

android:layout_width="match_parent"

android:layout_height="1dp"

android:background="#000000" />

</LinearLayout></span>

3>Fragment显示布局activity_tab_chat.xml，activity_tab_contacts.xml，activity_tab_friend.xml(只给出一个，其他类似)

<span style="font-family:Microsoft YaHei;font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="聊天界面"

android:textColor="#FF0000"

android:textSize="20sp"

android:gravity="center"

></TextView>

</LinearLayout></span>

4>主函数MainActivity.java

<span style="font-family:Microsoft YaHei;font-size:18px;">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<Fragment> mFragmentList = new ArrayList<Fragment>();

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

}

}

</span>

注意：

1.MainActivity继承于FragmentActivity;

2.初始化导航条的宽度：initTabLineWidth()，由于本例给出的是3个界面切换，固长度为整个屏幕宽度的1/3;

3.监听事件OnPageChangeListener的onPageScrolled方法主要捕捉滑动事件;

其中给出了3个参数所表示的意义。根据滑动的4中变化(左-中-右-中-左)，给出导航条距离左边的边距，显示导航条滑动的效果。

5>Fragment适配器FragmentAdapter，继承于FragmentPagerAdapter

<span style="font-family:Microsoft YaHei;font-size:18px;">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<Fragment> fragmentList = new ArrayList<Fragment>();

public FragmentAdapter(FragmentManager fm,List<Fragment> fragmentList) {

super(fm);

this.fragmentList = fragmentList;

}

@Override

public Fragment getItem(int position) {

return fragmentList.get(position);

}

@Override

public int getCount() {

return fragmentList.size();

}

}

</span>

6>Fragment显示函数ChatFragment.java,ContactsFragment.java,FriendFragment.java(只给出一个，其他类似)

<span style="font-family:Microsoft YaHei;font-size:18px;">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);

}

}

</span>

上面就是本文的所有内容。

源码下载地址：http://download.csdn.net/detail/a123demi/7943901