ViewPager与fragment的集合使用

最近在看融云demo的时候看到了viewpager和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:orientation="vertical">


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom"/>

</LinearLayout>

这是bottom的布局：

<?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:layout_marginBottom="5dp"
              android:background="#40ff"
              android:orientation="horizontal"
    >

    <LinearLayout
        android:id="@+id/id_tab_mycircle"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <!-- android:clickable="false" 是为了防止ImageButton截取了触摸事件 ，这里事件要给它的上一级linearlayout-->
        <ImageButton
            android:id="@+id/id_tab_mycirlceImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@mipmap/ic_launcher"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我的圈子"
            />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_discovery"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_discovery_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@mipmap/ic_launcher"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发现"
            />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_message"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_message_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"

            android:src="@mipmap/ic_launcher"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="消息"
            />
    </LinearLayout>


    <LinearLayout
        android:id="@+id/id_tab_setting"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_setting_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@mipmap/ic_launcher"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="个人中心"
            />
    </LinearLayout>
</LinearLayout>

这是ConversationlistActivity

package com.im.app;

import android.os.Bundle;
import android.support.annotation.Nullable;
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.ImageButton;
import android.widget.LinearLayout;
import android.widget.Toast;

import com.im.app.fragment.Home1Fragment;
import com.im.app.fragment.Home2Fragment;
import com.im.app.fragment.Home3Fragment;
import com.im.app.fragment.Home4Fragment;

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

/**
 * 
 */
public class ConversationlistActivity extends FragmentActivity implements View.OnClickListener{

    //定义控件
    private ViewPager mViewPager;

    //四个Tab每个Tab都有一个按钮
    private LinearLayout mTabMyCircle;
    private LinearLayout mTabMyDiscovery;
    private LinearLayout mTabMyMsg;
    private LinearLayout mTabMyCenter;
    //四个按钮
    private ImageButton myCircleImg;
    private ImageButton myDiscoveryImg;
    private ImageButton myMsgImg;
    private ImageButton myCenterImg;

    private List<Fragment> mFragment ;
    private FragmentPagerAdapter mFragmentPagerAdapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.home_activty);
        initView();
        initEvent();//初始化监听事件
        initViewPagers();//初始化viewpager的四个布局

    }

    /**
     * 初始化viewpager的四个布局
     */
    private void initViewPagers() {
        mFragment = new ArrayList<>();
        mFragment.add(new Home1Fragment());
        mFragment.add(new Home2Fragment());
        mFragment.add(new Home3Fragment());
        mFragment.add(new Home4Fragment());

        //控制viewpager所在页所显示的fragment
        mFragmentPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            //控制fragment的数量
            @Override
            public int getCount() {
                return mFragment.size();
            }
            //控制viewpager所在页所显示的fragment
            @Override
            public Fragment getItem(int position) {
                return mFragment.get(position);
            }
        };
        mViewPager.setAdapter(mFragmentPagerAdapter); //设置适配器
    }

    //初始化监听
    private void initEvent() {
        myCircleImg.setOnClickListener(this);
        myDiscoveryImg.setOnClickListener(this);
        myMsgImg.setOnClickListener(this);
        myCenterImg.setOnClickListener(this);

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            //当页面滑动到某一position位置的时候调用
            @Override
            public void onPageSelected(int position) {
                int currentItem = mViewPager.getCurrentItem();//过去当前所显示的item
                Toast.makeText(ConversationlistActivity.this, "当前的位置是："+currentItem, Toast.LENGTH_SHORT).show();
                switch (currentItem){
                    case 0:
                        myCircleImg.setImageResource(R.mipmap.ic_launcher);
                        break；

		//这个地方可以控制下面底部栏的颜色变化

                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });


    }

    /**
     * 初始化控件
     */
    private void initView() {

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        //初始化四个布局
        mTabMyCircle = (LinearLayout) findViewById(R.id.id_tab_mycircle);
        mTabMyDiscovery = (LinearLayout) findViewById(R.id.id_tab_discovery);
        mTabMyMsg = (LinearLayout) findViewById(R.id.id_tab_message);
        mTabMyCenter = (LinearLayout) findViewById(R.id.id_tab_setting);
        //初始化四个按钮
        myCircleImg = (ImageButton) findViewById(R.id.id_tab_mycirlceImg);
        myDiscoveryImg = (ImageButton) findViewById(R.id.id_tab_discovery_img);
        myMsgImg = (ImageButton) findViewById(R.id.id_tab_message_img);
        myCenterImg = (ImageButton) findViewById(R.id.id_tab_setting_img);
    }

    @Override
    public void onClick(View v) {
        int vId = v.getId();
        switch (vId){
            case R.id.id_tab_mycirlceImg:
                mViewPager.setCurrentItem(0);
            break;
            case R.id.id_tab_discovery_img:
                mViewPager.setCurrentItem(1);
                break;
            case R.id.id_tab_message_img:
                mViewPager.setCurrentItem(2);
                break;
            case R.id.id_tab_setting_img:
                mViewPager.setCurrentItem(3);
                break;


        }

    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mFragment = null;
        mViewPager = null;
        mFragmentPagerAdapter = null;
    }
}