可以随手指滑动切换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>

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