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

版权声明：本博客属个人原创，转载请注明。 https://blog.csdn.net/qq_33198758/article/details/82753062

一、设计目标

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

二、实现方法

第一步

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="0dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp"
    tools:context=".activity.MainActivity">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@color/colorAccent">

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="center_vertical">


            </LinearLayout>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="AFRobot"
                    android:id="@+id/textView_topTitle"
                    android:textSize="18dp"
                    android:layout_gravity="center_vertical"
                    android:textAlignment="center" />
            </LinearLayout>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"></LinearLayout>


            </LinearLayout>

        </LinearLayout>
        <android.support.v4.view.ViewPager
            android:id="@+id/myViewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_marginLeft="0dp">
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:id="@+id/content"></FrameLayout>
        </android.support.v4.view.ViewPager>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_gravity="bottom"
            android:background="@color/colorAccent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="手动控制"
                android:id="@+id/textView_control"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:textSize="16dp"
                android:layout_marginLeft="10dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="数据监视"
                android:id="@+id/textView_oversee"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:textSize="16dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="连接设备"
                android:id="@+id/textView_connectDevice"
                android:layout_gravity="center"
                android:textSize="16dp"
                android:layout_marginRight="10dp" />
        </LinearLayout>

    </LinearLayout>
</RelativeLayout>

第二步

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

<?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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="手动控制"
        android:id="@+id/textView2"
        android:textSize="18dp" />
</LinearLayout>

编写 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：

<?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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="数据监视"
        android:id="@+id/textView3"
        android:textSize="18dp" />
</LinearLayout>

编写 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：

    <?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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="连接设备"
        android:id="@+id/textView"
        android:textSize="18dp" />
</LinearLayout>

编写 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<Fragment> mlist;


    public TabFragmentPagerAdapter(FragmentManager fm, List<Fragment> 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<Fragment> 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