ViewPager+Fragment实现滑动显示，且Fragment里面又放Fragment+viewPager

思路：新建一个Activity，且这个Activity要继承FragementActivity，在Activity的布局文件中放入了一个viewPager，为了效果好看，还做了个导航，使得ViewPager和导航栏能够实现联动。代码里面有解释，我就不详细介绍了！！

在往ViewPager放Fragment的时候，用到的适配器应该是FragmentPagerAdapter

导航栏的制作我是用了一个ImageView+TextView，若这时使用Imageview（或TextView）实现点击事件的话，到你点击不到ImageView（或TextView）的话，不会产生联动效果，所以我用一个LinearLayout去把ImageView和TextView包含起来，并使用LinearLayout相应点击事件,并设置ImageView和TextView不能被点击.

MainActivity.java

package com.example.administrator.viewpagerfagmentdemo; 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.view.View; import android.widget.ImageView; import android.widget.LinearLayout; import java.util.ArrayList; import java.util.List; public class MainActivity extends FragmentActivity implements View.OnClickListener {  private ViewPager myViewPager;  //声明ViewPager  private FragmentPagerAdapter myFragmentPagerAdapter;   //Fragment适配器  private List<Fragment> myContionter;  //存放的容器  // 声明一下四个Fragment  private FirstFragment myFirstFragment;  private SecondFragment mySecondtFragment;  private ThirdFragment myThirdFragment;  private FourFragment myFourFragment;  // 声明四个ImageView  private ImageView down_first_image;  private ImageView down_second_image;  private ImageView down_third_image;  private ImageView down_four_image;  private LinearLayout first;  private LinearLayout second;  private LinearLayout third;  private LinearLayout four;  @Override  protected void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setContentView(R.layout.activity_main);   initView();  //初始化各种View    initEvents(); //初始化监听事件   }  //初始化我们需要用到的View  public void initView(){   myViewPager = (ViewPager) findViewById(R.id.viewPager);   down_first_image = (ImageView) findViewById(R.id.down_music);   down_second_image = (ImageView) findViewById(R.id.down_icon);   down_third_image = (ImageView) findViewById(R.id.down_people);   down_four_image = (ImageView) findViewById(R.id.down_shoot);   first = (LinearLayout) findViewById(R.id.first);   second = (LinearLayout) findViewById(R.id.second);   third = (LinearLayout) findViewById(R.id.third);   four = (LinearLayout) findViewById(R.id.four);   //初始化Fragment   myFirstFragment = new FirstFragment();   mySecondtFragment = new SecondFragment();   myThirdFragment = new ThirdFragment();   myFourFragment = new FourFragment();   //初始化容器   myContionter = new ArrayList<>();   myContionter.add(myFirstFragment);   myContionter.add(mySecondtFragment);   myContionter.add(myThirdFragment);   myContionter.add(myFourFragment);   //初始化 适配器   myFragmentPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {    @Override    public Fragment getItem(int i) {     return myContionter.get(i);    }    @Override    public int getCount() {     return myContionter.size();    }   };   myViewPager.setAdapter(myFragmentPagerAdapter);   //设置监听器，没什么服用价值，就直接匿名内部类了   myViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {    @Override    public void onPageScrolled(int i, float v, int i2) {    }    //当 界面 切换 的时候    @Override    public void onPageSelected(int position) {     initImageViewBackGround();   //图片先置为暗色     switch (position){      case 0:       down_first_image.setBackgroundResource(R.drawable.shake_icon_music_pressed);       break;      case 1:       down_second_image.setBackgroundResource(R.drawable.notification_icon);       break;      case 2:       down_third_image.setBackgroundResource(R.drawable.shake_icon_people_pressed);       break;      case 3:       down_four_image.setBackgroundResource(R.drawable.sns_shoot_location_pressed);       break;     }    }    @Override    public void onPageScrollStateChanged(int i) {    }   });   //这俩 得对应起来   myViewPager.setCurrentItem(0);   down_first_image.setBackgroundResource(R.drawable.shake_icon_music_pressed);  }  //初始化 监听事件  private void initEvents() { //  down_first_image.setOnClickListener(this); //  down_second_image.setOnClickListener(this); //  down_third_image.setOnClickListener(this); //  down_four_image.setOnClickListener(this);    first.setOnClickListener(this);   second.setOnClickListener(this);   third.setOnClickListener(this);   four.setOnClickListener(this);  }  //监听事件的方法  @Override  public void onClick(View v) {   initImageViewBackGround();  //先设置图片为亮色   switch (v.getId()){    case R.id.first:     myViewPager.setCurrentItem(0);     down_first_image.setBackgroundResource(R.drawable.shake_icon_music_pressed);     break;    case R.id.second:     myViewPager.setCurrentItem(1);     down_second_image.setBackgroundResource(R.drawable.notification_icon);     break;    case R.id.third:     myViewPager.setCurrentItem(2);     down_third_image.setBackgroundResource(R.drawable.shake_icon_people_pressed);     break;    case R.id.four:     myViewPager.setCurrentItem(3);     down_four_image.setBackgroundResource(R.drawable.sns_shoot_location_pressed);     break;   }  }  //初始化图片都为暗色  private void initImageViewBackGround(){   down_first_image.setBackgroundResource(R.drawable.shake_icon_music_normal);   down_second_image.setBackgroundResource(R.drawable.notification_icon_gray);   down_third_image.setBackgroundResource(R.drawable.shake_icon_people_normal);   down_four_image.setBackgroundResource(R.drawable.sns_shoot_location_normal);  } } 

activity_main.xml

<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"  tools:context=".MainActivity">  <LinearLayout   android:layout_width="match_parent"   android:layout_height="40dp"   android:gravity="center"   android:background="@color/title_background">   <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="center"    android:textColor="@color/title_text_color"    android:text="微信"/>  </LinearLayout>  <android.support.v4.view.ViewPager   android:id="@+id/viewPager"   android:layout_width="wrap_content"   android:layout_height="0dp"   android:layout_weight="1">  </android.support.v4.view.ViewPager>  <LinearLayout   android:layout_width="match_parent"   android:layout_height="50dp"   android:background="@drawable/abc_list_selector_disabled_holo_light"   android:orientation="horizontal">   <LinearLayout    android:id="@+id/first"    android:layout_width="0dp"    android:layout_height="match_parent"    android:orientation="vertical"    android:layout_weight="1"    android:gravity="center">    <ImageView     android:id="@+id/down_music"     android:layout_width="wrap_content"     android:layout_height="0dp"     android:layout_weight="2"     android:clickable="false"     android:background="@drawable/shake_icon_music_normal"/>    <TextView     android:layout_width="wrap_content"     android:layout_height="0dp"     android:textColor="#000"     android:layout_weight="1"     android:clickable="false"     android:text="音乐"/>   </LinearLayout>   <LinearLayout    android:id="@+id/second"    android:layout_width="0dp"    android:layout_height="match_parent"    android:orientation="vertical"    android:layout_weight="1"    android:gravity="center">    <ImageView     android:id="@+id/down_icon"     android:layout_width="wrap_content"     android:layout_height="0dp"     android:layout_weight="2"     android:clickable="false"     android:background="@drawable/notification_icon_gray"/>    <TextView     android:layout_width="wrap_content"     android:layout_height="0dp"     android:textColor="#000"     android:layout_weight="1"     android:clickable="false"     android:text="哈哈"/>   </LinearLayout>   <LinearLayout    android:id="@+id/third"    android:layout_width="0dp"    android:layout_height="match_parent"    android:orientation="vertical"    android:layout_weight="1"    android:gravity="center">    <ImageView     android:id="@+id/down_people"     android:layout_width="wrap_content"     android:layout_height="0dp"     android:layout_weight="2"     android:clickable="false"     android:background="@drawable/shake_icon_people_normal"/>    <TextView     android:layout_width="wrap_content"     android:layout_height="0dp"     android:textColor="#000"     android:layout_weight="1"     android:clickable="false"     android:text="好友"/>   </LinearLayout>   <LinearLayout    android:id="@+id/four"    android:layout_width="0dp"    android:layout_height="match_parent"    android:layout_weight="1"    android:orientation="vertical"    android:gravity="center">    <ImageView     android:id="@+id/down_shoot"     android:layout_width="wrap_content"     android:layout_height="0dp"     android:layout_weight="2"     android:clickable="false"     android:background="@drawable/sns_shoot_location_normal"/>    <TextView     android:layout_width="wrap_content"     android:layout_height="0dp"     android:textColor="#000"     android:layout_weight="1"     android:clickable="false"     android:text="啦啦"/>   </LinearLayout>  </LinearLayout> </LinearLayout> 

建立四个Fragment，这四个Fragment都是一样，在这里我就贴出一个代码,并且我还在这个Frament中又放了ViewPager，在这个viewPager中我又放了Fragment，那么这是你在设置Fragment里面viewPager的适配器的时候，需要用到FragmentPagerAdapter，那么这里穿进去的参数应该是getChildFragmentManager（），否则会报错。

Fragment.java

package com.example.administrator.viewpagerfagmentdemo; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import java.util.ArrayList; import java.util.List; /**  * Created by Administrator on 2015/9/2.  */ public class FirstFragment extends Fragment {  private ViewPager myViewPager;  private List<View> myContiontar ;   //viewPager的数据源  private PagerAdapter myPagerAdapter;   //有了数据源，必然要有适配器  private FragmentPagerAdapter fragmentPagerAdapter;  private List<Fragment> list;  private View view;  //Fragment的布局  private Lunboa lunboa;  private Lunbob lunbob;  private Lunboc lunboc;  private Lunbod lunbod;  @Override  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {   view = inflater.inflate(R.layout.first_fragment,null);   initViews();  //初始化各种View   return view;  }  //初始化各种View  private void initViews(){   // 先将xml文件 换成 view   myViewPager = (ViewPager) view.findViewById(R.id.first_fragment_viewpager);   //建立五个view 去获得四个ImageView   View view1 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.lunbo_image1,null);   View view2 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.lunbo_image2,null);   View view3 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.lunbo_image3,null);   View view4 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.lunbo_image4,null);   View view5 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.lunbo_image5,null);   //加入到容器里面   myContiontar = new ArrayList<>();   myContiontar.add(view1);   myContiontar.add(view2);   myContiontar.add(view3);   myContiontar.add(view4);   myContiontar.add(view5);   lunboa = new Lunboa();   lunbob = new Lunbob();   lunboc = new Lunboc();   lunbod = new Lunbod();   list = new ArrayList<>();   list.add(lunboa);   list.add(lunbob);   list.add(lunboc);   list.add(lunbod);   //fragmentPagerAdapter   fragmentPagerAdapter = new FragmentPagerAdapter(getFragmentManager()) {    @Override    public Fragment getItem(int i) {     return list.get(i);    }    @Override    public int getCount() {     return list.size();    }   };   //初始化 适配器   myPagerAdapter = new PagerAdapter() {    //返回显示多少项    @Override    public int getCount() {     return myContiontar.size();    }    @Override    public boolean isViewFromObject(View view, Object o) {     return view == o;    }    //滑动切换时，移除当前组件    @Override    public void destroyItem(ViewGroup container, int position, Object object) {     container.removeView(myContiontar.get(position));    }    //每次滑动时生成的组件    @Override    public Object instantiateItem(ViewGroup container, int position) {     container.addView(myContiontar.get(position));     return myContiontar.get(position);    }   };   //设置适配器   myViewPager.setAdapter(myPagerAdapter);   //设置fragment适配器 //  myViewPager.setAdapter(fragmentPagerAdapter);  } } 

布局文件fragment.xml也很简单,不多说了，我就直接上代码了。

<?xml version="1.0" encoding="utf-8"?> <LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"  android:layout_width="match_parent"  android:layout_height="match_parent">  <FrameLayout   android:layout_width="match_parent"   android:layout_height="0dp"   android:layout_weight="1"   android:orientation="vertical"   android:gravity="center|bottom">   <android.support.v4.view.ViewPager    android:id="@+id/first_fragment_viewpager"    android:layout_width="match_parent"    android:layout_height="match_parent">   </android.support.v4.view.ViewPager>   <LinearLayout    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:orientation="horizontal"    android:layout_gravity="center|bottom">    <ImageView     android:id="@+id/first_fragment_down_image1"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:background="@drawable/wallet_coin_purse_guide_purse_dot_normal"/>    <ImageView     android:id="@+id/first_fragment_down_image2"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:background="@drawable/wallet_coin_purse_guide_purse_dot_normal"/>    <ImageView     android:id="@+id/first_fragment_down_image3"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:background="@drawable/wallet_coin_purse_guide_purse_dot_normal"/>    <ImageView     android:id="@+id/first_fragment_down_image4"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:background="@drawable/wallet_coin_purse_guide_purse_dot_normal"/>    <ImageView     android:id="@+id/first_fragment_down_image5"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:background="@drawable/wallet_coin_purse_guide_purse_dot_normal"/>    </LinearLayout>  </FrameLayout>  <ImageView   android:layout_width="match_parent"   android:layout_height="0dp"   android:layout_weight="2.5"   android:background="@color/fitst_fragment_image_color"/> </LinearLayout> 

效果图: