可以随手指滑动切换tab的viewpager

</pre>这是我的第一篇blog。为大家解析一个我最近碰到的问题，就是非常常用的viewpager+fragment的导航页，相信大家都不陌生，网上有很多这方面的资料，在此我就不在赘述怎样去实现这个导航页，而是对导航进行小改，现在很多人可以做到，点击标签或者左右滑动切换fragment，但是滑动的时候标签的背景不会随着手势的滑动而滑动，怎样做到这一点呢？请看我的分析。</h2><h3>1.创建三个fragment和三个layout，内容自定义，在fragment的onCreateView中绑定即可。</h3><h3>2.创建主Activity和主layout</h3><div>先来一个主layout的代码</div><div><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<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="com.example.administrator.viewpaerandfragment.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="50dp"/>

    <ImageView
        android:id="@+id/iv_banner"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:background="@drawable/btn1"/>

    <LinearLayout
        android:id="@+id/ll_bottom"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:gravity="bottom"
        android:orientation="horizontal"
        android:weightSum="3">

        <LinearLayout
            android:id="@+id/ll_new"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="新闻" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_play"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="娱乐" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_sport"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="体育" />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

再来主activity的代码

package com.example.administrator.viewpaerandfragment;

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.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

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

public class MainActivity extends FragmentActivity {
    private ViewPager myViewPager;
    private FragmentPagerAdapter myFragmentPagerAdapter;
    private List<Fragment> myFragments = new ArrayList<>();

    private LinearLayout ll_new, ll_sport, ll_play;

    private ImageView iv_banner;

    private int screenWidth;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myViewPager = (ViewPager) findViewById(R.id.viewpager);
        initData();
        myFragmentPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public android.support.v4.app.Fragment getItem(int position) {
                return myFragments.get(position);
            }

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

        myViewPager.setAdapter(myFragmentPagerAdapter);

        myViewPager.addOnPageChangeListener(new OnPageChangeListener() {

            private int currentIndex;

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) iv_banner.getLayoutParams();
                //currentIndex(当前所在页面)和position(下一个页面)
                if (currentIndex == 0 && position == 0)// 0->1
                {
                    lp.leftMargin = (int) (positionOffset * (screenWidth / 3) + currentIndex * (screenWidth / 3));

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

                }
                iv_banner.setLayoutParams(lp);
            }

            @Override
            public void onPageSelected(int position) {

                currentIndex = position;
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        initTabSlide();
    }

    private void initData() {
        iv_banner = (ImageView) findViewById(R.id.iv_banner);
        ll_new = (LinearLayout) findViewById(R.id.ll_new);
        ll_new.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                changeView(0);
            }
        });
        ll_play = (LinearLayout) findViewById(R.id.ll_play);
        ll_play.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                changeView(1);
            }
        });
        ll_sport = (LinearLayout) findViewById(R.id.ll_sport);
        ll_sport.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                changeView(2);
            }
        });

        Tab1Fragment tab1Fragment = new Tab1Fragment();
        Tab2Fragment tab2Fragment = new Tab2Fragment();
        Tab3Fragment tab3Fragment = new Tab3Fragment();

        myFragments.add(tab1Fragment);
        myFragments.add(tab2Fragment);
        myFragments.add(tab3Fragment);
    }

    private void changeView(int tab) {
        myViewPager.setCurrentItem(tab, true);
    }

    
     //设置滑动条的宽度为屏幕的1/3(根据Tab的个数而定)
     
    private void initTabSlide() {
        DisplayMetrics dpMetrics = new DisplayMetrics();
        getWindow().getWindowManager().getDefaultDisplay().getMetrics(dpMetrics);
        screenWidth = dpMetrics.widthPixels;
        RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) iv_banner.getLayoutParams();
        lp.width = screenWidth / 3;
        iv_banner.setLayoutParams(lp);
    }
}

运行图就不贴了，自己下载源码看看吧。整体思路就是这样，下面有源码下载，不要钱，免费！

资源在这，免费下载啦！！