Android ViewPager + Fragment 实现滑动标签效果

一般的Tab标签效果就是点击下方标签，切换上方视图，现在常见的大多不是单独的标签效果，而是滑动标签，即页面可以直接左右滑动切换，也可以通过下方的tab标签点击切换。我分享下自己的学习心得。首先上个效果图：



这个页面主要有三部分组成：上方的标题栏，中间一个ViewPager，下方一个Tab标签。

效果实现大体分为以下几步：

1）ViewPager中显示是是fragment，所以创建一个List，并初始化fragment实例，添加进去。

homeFragment = new HomeFragment();
        meFragment = new MeFragment();
        messageFragment = new MessageFragment();
        fragments = new ArrayList<>();
        fragments.add(homeFragment);
        fragments.add(messageFragment);
        fragments.add(meFragment);

2）初始化ViewPager。因为加载的是fragment，索引适配器需要用FragmentPagerAdapter，并覆写getCount和getItem两个函数。

void initViewPager() {
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

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

            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }
        };
        viewPager.setAdapter(pagerAdapter);
        viewPager.addOnPageChangeListener(new MyPageChangeListener());
        titleText.setText("首页");
        viewPager.setCurrentItem(0);
        homeLayout.setSelected(true);
    }

3）设置tab点击事件，点击时ViewPager显示对应的fragment。

public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tab_home:
                viewPager.setCurrentItem(0);
                break;
            case R.id.tab_message:
                viewPager.setCurrentItem(1);
                break;
            case R.id.tab_me:
                viewPager.setCurrentItem(2);
                break;
            default:
                break;
        }
    }

4）设置滑动页面时，改变tab标签显示。

定义一个继承自ViewPager.OnPageChangeListener 的监听器，覆写
onPageSelected 函数

private class MyPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }

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

        @Override
        public void onPageSelected(int position) {
            currentItem = position;
            View[] view = {homeLayout, messageLayout, meLayout};
            String[] titles = {"首页","消息","我"};
            for(View v : view){
                v.setSelected(false);
            }
            Log.d(TAG, "onPageSelected.position = " + position);
            titleText.setText(titles[position]);
            view[position].setSelected(true);
        }
    }

在ViewPager上添加监听器

viewPager.addOnPageChangeListener(new MyPageChangeListener());

注意：

1）需添加下面的库

compile 'com.android.support:appcompat-v7:23.0.0'

2）创建的fragment 必须都是继承自这个包

import android.support.v4.app.Fragment;

MainActivity代码如下：

package com.huiyu.hornsey.fragmentdemo;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

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

public class MainActivity extends FragmentActivity implements View.OnClickListener {
    private static final String TAG = "MainActivity";
    private Context context;
    private Fragment homeFragment, messageFragment, meFragment;
    private List<Fragment> fragments;
    private LinearLayout homeLayout, messageLayout, meLayout;
    private ViewPager viewPager;
    private FragmentPagerAdapter pagerAdapter;
    private TextView titleText;
    private int currentItem;

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

        initView();
        initViewPager();
    }

void initViewPager() {
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

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

            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }
        };
        viewPager.setAdapter(pagerAdapter);
        viewPager.addOnPageChangeListener(new MyPageChangeListener());
        titleText.setText("首页");
        viewPager.setCurrentItem(0);
        homeLayout.setSelected(true);
    }

    private void initView() {
homeFragment = new HomeFragment();
        meFragment = new MeFragment();
        messageFragment = new MessageFragment();
        fragments = new ArrayList<>();
        fragments.add(homeFragment);
        fragments.add(messageFragment);
        fragments.add(meFragment);

        titleText = (TextView) findViewById(R.id.text_title);
        homeLayout = (LinearLayout) findViewById(R.id.tab_home);
        messageLayout = (LinearLayout) findViewById(R.id.tab_message);
        meLayout = (LinearLayout) findViewById(R.id.tab_me);
        homeLayout.setOnClickListener(this);
        messageLayout.setOnClickListener(this);
        meLayout.setOnClickListener(this);

    }

    @Override
public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tab_home:
                viewPager.setCurrentItem(0);
                break;
            case R.id.tab_message:
                viewPager.setCurrentItem(1);
                break;
            case R.id.tab_me:
                viewPager.setCurrentItem(2);
                break;
            default:
                break;
        }
    }

private class MyPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }

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

        @Override
        public void onPageSelected(int position) {
            currentItem = position;
            View[] view = {homeLayout, messageLayout, meLayout};
            String[] titles = {"首页","消息","我"};
            for(View v : view){
                v.setSelected(false);
            }
            Log.d(TAG, "onPageSelected.position = " + position);
            titleText.setText(titles[position]);
            view[position].setSelected(true);
        }
    }
}

XML代码如下：

<RelativeLayout 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"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/top_bar"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/main_color">

        <TextView
            android:id="@+id/text_title"
            android:text="标题"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            />
    </RelativeLayout>
    
    <LinearLayout
        android:id="@+id/bottom_bar"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="45dp">
        <LinearLayout
            android:id="@+id/tab_home"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent" >
            <ImageView
                android:src="@drawable/tabhome"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/tab_message"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent" >
            <ImageView
                android:src="@drawable/taborder"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/tab_me"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent" >
            <ImageView
                android:src="@drawable/tabmine"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>

    <View
        android:id="@+id/line"
        android:layout_above="@id/bottom_bar"
        android:background="@color/main_color"
        android:layout_width="match_parent"
        android:layout_height="1dp"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_below="@id/top_bar"
        android:layout_above="@id/line"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

资源包供参考：