ViewPager+Fragment实现多个子界面滑动

一、设计目标

最近做了一个智能机器人的控制APP，因为涉及的功能比较多，因此采用了三个可以滑动的子界面，效果图如下：下面讲解一下怎么用ViewPager+Fragment实现此界面效果。

二、实现方法

第一步

新建一个Layout布局，用来容纳三个子界面。这里面要引入viewPager组件，XML代码为：

第二步

接下来新建三个子界面：
Fragment1：

编写 Fragment_Control 类，继承Fragment，用来加载该界面：

package com.example.dx.testviewpager;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by dx on 2018/9/8.
 */
public class Fragment_Control extends Fragment {

    public View onCreateView(LayoutInflater inflater , ViewGroup container, Bundle savedInstanceState){
        View view=inflater .inflate(R.layout .activity_control ,container,false) ;

        return view;
    }

}

Fragment2：

编写 Fragment_Oversee类，继承Fragment，用来加载该界面：

package com.example.dx.testviewpager;


import android.os.Bundle;
import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;
import android.view.ViewGroup;

/**
 * Created by dx on 2018/9/8.
 */
public class Fragment_Oversee  extends Fragment  {

    public View onCreateView(LayoutInflater inflater , ViewGroup container, Bundle savedInstanceState){
        View view=inflater .inflate(R.layout .activity_see ,container,false) ;

        return view;
    }



}

Fragment3：

编写 Fragment_ConnectDevice类，继承Fragment，用来加载该界面：

package com.example.dx.testviewpager;


import android.os.Bundle;
import android.support.v4.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;



/**
 * Created by dx on 2018/9/10.
 */
public class Fragment_ConnectDevice extends Fragment {


    public View onCreateView(LayoutInflater inflater , ViewGroup container, Bundle savedInstanceState){
        View view=inflater .inflate(R.layout .activity_connect  ,container,false) ;

        return view;
    }
}

第三步

编写TabFragmentPagerAdapter类，继承FragmentPagerAdapter类：

package com.example.dx.testviewpager;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by dx on 2018/9/18.
 */
public class TabFragmentPagerAdapter extends FragmentPagerAdapter {
    private FragmentManager mfragmentManager;
    private List mlist;


    public TabFragmentPagerAdapter(FragmentManager fm, List list) {
        super(fm);
        this.mlist = list;
    }

    @Override
    public void setPrimaryItem(ViewGroup container, int position, Object object) {
        super.setPrimaryItem(container, position, object);
    }

    @Override
    public Fragment getItem(int arg0) {
        return mlist.get(arg0);//显示第几个页面
    }

    @Override
    public int getCount() {
        return mlist.size();//有几个页面
    }
}

第四步

MainActivity代码为：

package com.example.dx.testviewpager;

import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity {
    private List list;
    private ViewPager myViewPager;
    private TabFragmentPagerAdapter adapter;

    private TextView  text_Control;
    private TextView  text_Oversee;
    private TextView  text_connectDevice;
    private TextView  topTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView()
    {
        text_Control=(TextView)  findViewById(R.id.textView_control ) ;
        text_Oversee =(TextView)  findViewById(R.id.textView_oversee ) ;
        text_connectDevice =(TextView)  findViewById(R.id.textView_connectDevice  ) ;
        topTitle =(TextView)  findViewById(R.id.textView_topTitle ) ;

        myViewPager = (ViewPager) findViewById(R.id.myViewPager);
        //绑定点击事件
        myViewPager.setOnPageChangeListener(new MyPagerChangeListener()) ;
        //把Fragment添加到List集合里面
        list = new ArrayList<>();
        list.add(new Fragment_Control() );
        list.add(new Fragment_Oversee() );
        list.add(new Fragment_ConnectDevice() );
        adapter = new TabFragmentPagerAdapter(getSupportFragmentManager(), list);
        myViewPager.setAdapter(adapter);
        myViewPager.setCurrentItem(1);  //初始化显示第一个页面

    }

    /**
     * 设置一个ViewPager的侦听事件，当左右滑动ViewPager时菜单栏被选中状态跟着改变
     *
     */
    public class MyPagerChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageSelected(int arg0) {
            switch (arg0) {//状态改变时底部对应的字体颜色改变
                case 0:
                    text_Control  .setTextColor(Color.GREEN  );
                    text_Oversee  .setTextColor(Color.BLACK );
                    text_connectDevice   .setTextColor(Color.BLACK );
                    topTitle .setText("手动控制") ;
                    break;
                case 1:
                    text_Control .setTextColor(Color.BLACK );
                    text_Oversee .setTextColor(Color.GREEN );
                    text_connectDevice  .setTextColor(Color.BLACK );
                    topTitle .setText("数据监控") ;
                    break;
                case 2:
                    text_Control .setTextColor(Color.BLACK );
                    text_Oversee .setTextColor(Color.BLACK  );
                    text_connectDevice  .setTextColor(Color.GREEN );
                    topTitle .setText("连接设备") ;
                    break;
            }

        }

    }

}

三、实现效果

四、源码链接

源码链接 密码：i5g1