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 :
                        down_first_image.setBackgroundResource(R.drawable.shake_icon_music_pressed);
                        break;
                    case :
                        down_second_image.setBackgroundResource(R.drawable.notification_icon);
                        break;
                    case :
                        down_third_image.setBackgroundResource(R.drawable.shake_icon_people_pressed);
                        break;
                    case :
                        down_four_image.setBackgroundResource(R.drawable.sns_shoot_location_pressed);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

        //这俩 得对应起来
        myViewPager.setCurrentItem();
        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();
                down_first_image.setBackgroundResource(R.drawable.shake_icon_music_pressed);
                break;
            case R.id.second:
                myViewPager.setCurrentItem();
                down_second_image.setBackgroundResource(R.drawable.notification_icon);
                break;
            case R.id.third:
                myViewPager.setCurrentItem();
                down_third_image.setBackgroundResource(R.drawable.shake_icon_people_pressed);
                break;
            case R.id.four:
                myViewPager.setCurrentItem();
                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>

效果图: