ViewPage+Fragment实现简单的页面交互

---

前言

如今的移动端应用大多都采用在一个页面上通过不同按钮切换页面的交互方式，为了我们开发与主流技术相接轨，所以我们尝试做出一个demo实现相当的效果。

---

一、ViewPage

1.作用

切换当前的 View，实现滑动切换的效果。

2.使用方法

在XML布局中加入androidx.viewpager.widget.ViewPager

 <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

二、demo相关内容及代码

1. 绑定ViewPager

在activity_main.xml中加入ViewPager 和 底端的按钮

 <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
     <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">
          <Button
            android:id="@+id/b1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="主页"
            android:textSize="20dp"/>
            <!--  其余Button相同，省略-->
     </LinearLayout>

2.创建xml文件

创建四个不同页面的xml文件，用于后面切换页面。

其中，以 activity_home.xml 为例，相关代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="home"
        android:textSize="40dp"/>
</LinearLayout>

3.绑定切换页面点击事件

在MainActivity.java中，调用页面的ViewPager 绑定按钮button点击事件

              @Override
    public void onClick(View view) {
            switch (view.getId()){
                case R.id.b1:
                	viewPager.setCurrentItem(0);break;
                case R.id.b2:
                    viewPager.setCurrentItem(1);break;
                case R.id.b3:
                    viewPager.setCurrentItem(2);break;
                case R.id.b4:
                    viewPager.setCurrentItem(3);break;
                default:break;
            }
    }

三、创建和使用Fragment

1. Fragment文件目录

每一个Fragment的java文件大体相同，分别负责绑定相关的xml。
以FragmentHome.java为例，其代码如下。

package com.nchu.labexer04;


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

import androidx.fragment.app.Fragment;

public class FragmentHome extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup viewGroup, Bundle save){
        View view = inflater.inflate(R.layout.activity_home,null);
        return view;
    }
}

其中： inflater.inflate(R.layout.activity_home,null);为对应的activity的xml文件。

2.使用Fragment

在MainActivity中使用Fragment
创建Fragment适配器，通过switch创建不同的fragment的实体类进行调用。

 FragmentPagerAdapter pagerAdapter= new FragmentPagerAdapter(getSupportFragmentManager()) {
            @NonNull
            @Override
            public Fragment getItem(int position) {
                Fragment fragment = null;
                switch (position){
                    case 0: fragment = new FragmentHome();break;
                    case 1: fragment = new FragmentInfo();break;
                    case 2: fragment = new FragmentNote();break;
                    case 3: fragment = new FragmentMine();break;
                    default:break;
                }
                return fragment;
            }

            @Override
            public int getCount() {
                return 4;
            }
        };

最后用 viewpage 绑定适配器，实现最终效果。

 viewPager.setAdapter(pagerAdapter);

四、实现效果

五、参考资料

Android开发：ViewPage最详细教程：

https://cloud.tencent.com/developer/article/1394207

Android：ViewPage使用教程：

https://blog.csdn.net/weixin_42814000/article/details/107018789