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>

效果圖: