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>

效果图: