android 一个页面多个surfaceview android实现三个页面切换

转载

mob6454cc627440 2023-08-06 00:03:57

文章标签 android java android studio xml ide 文章分类 Android 移动开发

下面是一个实现三个底部菜单，每个菜单一个页面，可以横向滑动的示例的代码实现，包括XML页面文件、Java Activity代码以及目录大致结构，废话不多说，直接上代码：

目录结构：

```
- MainActivity.java
- MainPagerAdapter.java
- activity_main.xml
- fragment_one.xml
- fragment_two.xml
- fragment_three.xml

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation_bar" />

   <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_nav_menu"/>

</RelativeLayout>

fragment_two.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_two"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Fragment Two"/>

</LinearLayout>

fragment_three.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_three"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Fragment Three"/>

</LinearLayout>

MainActivity.java:

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private BottomNavigationView bottomNavigationView;
    private MainPagerAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = findViewById(R.id.view_pager);
        bottomNavigationView = findViewById(R.id.bottom_navigation_bar);

        // 初始化ViewPager
        initViewPager();

        // 初始化BottomNavigationView
        initBottomNavigationView();
    }

    /**
     * 初始化ViewPager
     */
    private void initViewPager() {
        List<Fragment> fragments = new ArrayList<>();
        fragments.add(new FragmentOne());
        fragments.add(new FragmentTwo());
        fragments.add(new FragmentThree());

        adapter = new MainPagerAdapter(getSupportFragmentManager(), fragments);
        viewPager.setAdapter(adapter);
    }

    /**
     * 初始化BottomNavigationView
     */
    private void initBottomNavigationView() {
        bottomNavigationView.setOnNavigationItemSelectedListener(item -> {
            switch (item.getItemId()) {
                case R.id.menu_item_one:
                    viewPager.setCurrentItem(0, true);
                    break;
                case R.id.menu_item_two:
                    viewPager.setCurrentItem(1, true);
                    break;
                case R.id.menu_item_three:
                    viewPager.setCurrentItem(2, true);
                    break;
                default:
                    break;
            }
            return true;
        });
    }
}

MainPagerAdapter.java:

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class MainPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;

    public MainPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
}

这样就完成了一个实现三个底部菜单，每个菜单一个页面，可以横向滑动的Android页面的代码实现。

当然，如果你的每个页面不是普通的Activity，而是Fragment的话，你可能需要使用下面的代码：

首先需要绑定布局页面：

为了在 `FragmentTwo` 中绑定对应的布局页面，你需要重写 `onCreateView` 方法。该方法会在 Fragment 创建视图时被调用，可以在其中加载布局文件并返回对应的 `View` 对象。

public class FragmentTwo extends Fragment {
     @Nullable
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         // 加载布局文件
         View view = inflater.inflate(R.layout.fragment_two, container, false);
         return view;
     }
 }

在上述代码中，我们通过 `inflater.inflate` 方法将布局文件 `fragment_two.xml` 加载为一个 `View` 对象，并将其返回作为该 Fragment 的视图。这样，该 Fragment 就会显示对应的布局页面了。
当然，如果需要在该布局页面中的控件中添加事件或者操作，可以在 `onCreateView` 方法中获取对应的控件对象并设置相应的事件监听器和数据。例如：

public class FragmentTwo extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // 加载布局文件
        View view = inflater.inflate(R.layout.fragment_two, container, false);

        // 找到 TextView 控件
        TextView textView = view.findViewById(R.id.text_view);

        // 设置文本内容
        textView.setText("This is Fragment Two");
        
        // 设置点击事件监听器
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // do something
            }
        });

        return view;
    }
}

如果你想实现：当滑动到某一个页面的同时，选中对应的底部菜单选项卡，需要在 `ViewPager` 中添加一个 `addOnPageChangeListener` 的监听器，并在监听器中设置选中相应的底部菜单项。具体步骤如下：

1. 首先在 `onCreate` 方法中获取 `ViewPager` 和 `BottomNavigationView` 控件，并设置 ViewPager 的适配器：

// 获取 ViewPager 和 BottomNavigationView 控件
ViewPager viewPager = findViewById(R.id.view_pager);
BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);

// 设置 ViewPager 的适配器
PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);

2. 在 `ViewPager` 中添加一个 `addOnPageChangeListener` 监听器，实现在滑动页面时选中底部对应的菜单栏：

// 添加 ViewPager 的滑动监听器
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        // do nothing
    }

    @Override
    public void onPageSelected(int position) {
        // 根据当前选中项设置对应的底部菜单栏项为选中状态
        bottomNavigationView.getMenu().getItem(position).setChecked(true);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        // do nothing
    }
});

在上述代码中，我们使用 `addOnPageChangeListener` 监听器来监听 `ViewPager` 页面的滑动事件。在 `onPageSelected` 方法中，我们根据当前选中的页面位置，选中对应的底部菜单栏项。这里需要注意的是，我们在 `PagerAdapter` 类中重写了 `getCount` 方法，返回了3所有页面的数量，因此菜单栏的项数也应该与之匹配。

3. 为底部菜单栏设置点击事件监听器，在点击时切换到相应的页面：

// 设置 BottomNavigationView 的菜单项选中事件监听器
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        switch (menuItem.getItemId()) {
            case R.id.navigation_home:
                viewPager.setCurrentItem(0);
                return true;
            case R.id.navigation_dashboard:
                viewPager.setCurrentItem(1);
                return true;
            case R.id.navigation_notifications:
                viewPager.setCurrentItem(2);
                return true;
        }
        return false;
    }
});

在上述代码中，我们为 `BottomNavigationView` 设置了一个 `setOnNavigationItemSelectedListener` 的监听器，在监听器中根据菜单项的 ID 切换到相应的页面。这里需要注意的是，当你将当前选中的页面更改为另一个页面时，ViewPager 的 `addOnPageChangeListener` 监听器会自动调用并将底部菜单栏项选中。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。