android : viewpager + fragment 页面导航栏

TGyanM

已于 2023-08-03 14:50:52 修改

阅读量368

点赞数 1

文章标签： android java

于 2022-05-22 12:41:39 首次发布

本文链接：https://blog.csdn.net/TGyanM/article/details/124908658

版权

本文详细介绍了如何在Android中使用ViewPager实现页面滑动，并结合LinearLayout设置底部导航按钮，通过初始化和绑定事件来切换ViewPager中的Fragment。步骤包括布局界面、初始化按钮和事件、填充ViewPager内容以及实现Fragment的布局和类。每个Fragment对应一个独立的页面，通过点击导航按钮可以平滑切换页面。

摘要由CSDN通过智能技术生成

viepager

使用用viewpager分为以下几步

1. 布局界面

在activity_main.xml中添加viewpager

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

这个界面下还需要布局四个按钮，也就是导航按钮，整个activity_main.xml的文件如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ThirdActivity"
    android:orientation="vertical">
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/fragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:padding="5dp">

        <Button
            android:id="@+id/btn_main"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="4dp"
            android:text="首页"/>

        <Button
            android:id="@+id/btn_message"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="4dp"
            android:text="消息" />

        <Button
            android:id="@+id/btn_note"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="4dp"
            android:text="笔记"
            tools:ignore="TouchTargetSizeCheck" />

        <Button
            android:id="@+id/btn_myself"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="4dp"
            android:text="我的" />
    </LinearLayout>
</LinearLayout>

2.初始化绑定事件

导航按钮初始化，绑定界面按钮，并绑定点击事件

    public void initButton(){
        btn_main = (Button) findViewById(R.id.btn_main);
        btn_message = (Button) findViewById(R.id.btn_message);
        btn_myself = (Button) findViewById(R.id.btn_myself);
        btn_note = (Button) findViewById(R.id.btn_note);
    }
        public void initListener(){
        btn_note.setOnClickListener(this);
        btn_myself.setOnClickListener(this);
        btn_message.setOnClickListener(this);
        btn_main.setOnClickListener(this);
    }

为 viewpager 填充内容并设定点击事件

绑定fragment （switch里的四个分片会在后文中体现）

public void initFragment(){
//        // 得到FragmentManager
//        android.app.FragmentManager manager = getFragmentManager();
//        // 开始事务 得到事务
//        FragmentTransaction fragmentTransaction = manager.beginTransaction();
//        // 替换操作
//        fragmentTransaction.replace(R.id.fragment, new Fragment_main());
//        // 提交
//        fragmentTransaction.commit();
//        setTitle("首页");


        FragmentPagerAdapter pagerAdapter= new FragmentPagerAdapter(getSupportFragmentManager()) {
            @NonNull
            @Override
            public Fragment getItem(int position) {
                Fragment fragment = null;
                switch (position){
                    case 0: fragment = new Fragment_main();break;
                    case 1: fragment = new Fragment_message();break;
                    case 2: fragment = new Fragment_note();break;
                    case 3: fragment = new Fragment_myself();break;
                    default:break;
                }
                return fragment;
            }
            @Override
            public int getCount() {
                return 4;
            }
        };
        viewPager=findViewById(R.id.fragment);
        viewPager.setAdapter(pagerAdapter);
    }

绑定点击事件

  @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.btn_main:
                viewPager.setCurrentItem(0);break;
            case R.id.btn_message:
                viewPager.setCurrentItem(1);break;
            case R.id.btn_note:
                viewPager.setCurrentItem(2);break;
            case R.id.btn_myself:
                viewPager.setCurrentItem(3);break;
            default:break;
        }
    }

fragment

1.布局界面

fragment 需要四个分片，也就是四个布局界面，一一对应。示例代码如下

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="match_parent"
        android:textSize="10pt"
        android:text="信息"/>
</FrameLayout>

2.实现类

工程目录如图

四个类的共性是需要重写Fragment 的onCreateView 方法，代码如图

public class Fragment_message extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        View view = inflater.inflate(R.layout.fragment_message,container,false);
        return view; // Fragment不能使用this
    }
}