ViewPager控件的Demo

1、主视图

 <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/head"/>
     <android.support.v4.view.ViewPager
         android:layout_width="match_parent"
         android:layout_height="0dip"
         android:layout_weight="1"
         android:id="@+id/vp"
         />

 </LinearLayout>

2、主视图头部

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical" >

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:padding="10dip"
         android:orientation="horizontal" >

         <TextView
             android:id="@+id/tvChat"
             android:layout_width="0dip"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:gravity="center"
             android:text="聊天" />

         <TextView
             android:id="@+id/tvFriend"
             android:layout_width="0dip"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:gravity="center"
             android:text="朋友" />

         <TextView
             android:id="@+id/tvContact"
             android:layout_width="0dip"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:gravity="center"
             android:text="通讯" />
     </LinearLayout>
     <ImageView
         android:id="@+id/iv_scroll"
         android:layout_width="100dip"
         android:layout_height="wrap_content"
         android:background="@drawable/ivbg"
         />
     <TextView
         android:layout_width="match_parent"
         android:layout_height="1dip"
         android:background="#000000"
         />
 </LinearLayout>

3、fragment的视图

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:gravity="center"
     android:orientation="vertical" >
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="我在聊天"
         />

 </LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我的朋友"
        />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我的通讯"
        />

</LinearLayout>

4、MainActivity

 package com.zyhui.viewpagerdemo;

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

 import android.os.Bundle;
 import android.app.Activity;
 import android.content.Context;
 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentActivity;
 import android.support.v4.app.FragmentManager;
 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.util.Log;
 import android.view.Display;
 import android.view.Menu;
 import android.view.WindowManager;
 import android.widget.ImageView;
 import android.widget.LinearLayout;

 public class MainActivity extends FragmentActivity {
     private List<Fragment> fragList;
     private ViewPager vp;
     private ImageView iv_scroll;
     private int screenWidth;
     private LinearLayout.LayoutParams lp;
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);

         iv_scroll = (ImageView) findViewById(R.id.iv_scroll);

         //获取屏幕宽
         screenWidth = getScreenWH()[0];
         //设置iv_scroll的宽和高
         lp = (LinearLayout.LayoutParams)iv_scroll.getLayoutParams();//为什么要这样呢?
         lp.width = screenWidth/3;

         initFragment();
         initViewPager();

         setVpEvent();
     }

     private void initViewPager() {
         vp = (ViewPager) findViewById(R.id.vp);
         vp.setAdapter(new MyAdapter(getSupportFragmentManager()));
         vp.setCurrentItem(0);
     }

     private void initFragment() {
         fragList = new ArrayList<Fragment>();
         fragList.add(new FragmentChat());
         fragList.add(new FragmentFriend());
         fragList.add(new FragmentContact());
     }

     private class MyAdapter extends FragmentPagerAdapter{

         public MyAdapter(FragmentManager fm) {
             super(fm);

         }

         @Override
         public Fragment getItem(int position) {
             return fragList.get(position);
         }

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

     }

     private void setVpEvent() {
         vp.setOnPageChangeListener(new OnPageChangeListener() {
             private int currentIndex = 0;//这个初始值应当为0,而不要为-1,否则默认是显示不了iv_scroll的图片的，因为leftMargin的值会为负值
             //选中页面时候调用的方法
             //index表示当前选中的页
             @Override
             public void onPageSelected(int index) {
                 currentIndex = index;
             }

             //页面滑动时候调用的方法
             //position是向右滑动到下一个页面时position==index,向左滑动position-index=1
             //offset:向右滑动到下一个页面时，它的值从0.00到0.99;向做滑动时，从0.99到0.00
             //offsetPixels:向右滑动到下一个页面时，它从0到屏幕的宽度;向左滑动时是从屏幕宽度到0
             @Override
             public void onPageScrolled(int position, float offset, int offsetPixels) {
                 //经测试，感觉不用这个判断也可以，直接使用lp.leftMargin = (screenWidth/3)*currentIndex就行了，这样右移感觉不到卡
                 if(position == currentIndex){//向右滑动
                     lp.leftMargin = (int) ((screenWidth/3)*currentIndex + offset * (screenWidth/3));
                     //lp.leftMargin = (screenWidth/3)*currentIndex;
                     Log.i("zyh", currentIndex + "========>" + offset+"R");
                     //Log.i("zyh", "右移");//感觉没有左移的输出
                     iv_scroll.setLayoutParams(lp);
                 }else if(position - currentIndex == 1){//向左滑动
                     lp.leftMargin = (int) ((screenWidth/3) * currentIndex - (1 - offset) * (screenWidth/3));
                     //lp.leftMargin = (screenWidth/3)*currentIndex;
                     Log.i("zyh", currentIndex + "========>" + offset+"L");
                     //Log.i("zyh", "左移");//感觉没有左移的输出
                     iv_scroll.setLayoutParams(lp);
                 }

             }

             //滑动状态改变时调用的方法
             //state有3个值:
             //0表示什么多不干
             //1表示正在滑动
             //2表示
             @Override
             public void onPageScrollStateChanged(int state) {

             }
         });
     }

     /**
      * @desc 获取屏幕的宽高
      * @return
      */
     private int[] getScreenWH() {
         WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
         Display display = wm.getDefaultDisplay();
         DisplayMetrics outMetrics = new DisplayMetrics();
         display.getMetrics(outMetrics);
         return new int[]{outMetrics.widthPixels,outMetrics.heightPixels};
     }

 }

5、fragment的java代码

 package com.zyhui.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 FragmentChat extends Fragment {
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
             Bundle savedInstanceState) {

         return inflater.inflate(R.layout.frag_chat, null);
     }
 }

其他的类似