Fragment 嵌套TabLayout 及 ViewPager

文王采

已于 2023-10-24 22:19:07 修改

阅读量486

点赞数 2

分类专栏： Android Stduio 安卓开发文章标签： gitee android studio android 1024程序员节

于 2023-10-22 15:26:35 首次发布

本文链接：https://blog.csdn.net/j209160480/article/details/133972238

版权

Android Stduio 安卓开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图：

主页面的布局：

---底部导航bottomnavigation--

点击导航跳转各个Fragment:

Fragment中嵌套Tablayout+子Fragment+ViewPager

New_Fragment +MainActivity.java 源码：

布局文件暂不公布，代码文件仅供借鉴

效果图：

主页面的布局：

//清晰哈，我画的！

---底部导航bottomnavigation--

重要menu的创建尤其重要

右击创建menu directory

右击创建menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/home"
        android:title="x" />
    <item
        android:id="@+id/news"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/news"
        android:title="x" />
    <item
        android:id="@+id/profile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:title="x"
        android:icon="@drawable/profile"/>
</menu>

如下图：

点击导航跳转各个Fragment:

先创建三个导航栏跳转后的碎片如图

在相应的页面填写布局文件自由发挥

点击底部导航栏，切换页面绑定fragment

     //底部导航栏
        homeFragment = new Home_Fragment();
        newsFragment = new News_Fragment();
        profileFragment = new Profile_Fragment();
        

     //锁定默认主页面
        settingdefaultfragment();

    //点击底部导航栏，切换页面绑定fragment
        btnnavigationview = findViewById(R.id.btnnavigationview1);
        btnnavigationview.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
                if(item.getItemId() == R.id.news){
                    fragmentTransaction.replace(R.id.framelayout,newsFragment);
                    // startActivity(new Intent(,NEW_fra.class));
                } else if (item.getItemId() == R.id.home) {
                    fragmentTransaction.replace(R.id.framelayout,homeFragment);
                } else if (item.getItemId() == R.id.profile) {
                    fragmentTransaction.replace(R.id.framelayout,profileFragment);
                }
                fragmentTransaction.commit();
                return true;
            }
        });

锁定默认页面--settingdefaultfragment()函数：

 public void settingdefaultfragment(){
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.replace(R.id.framelayout,homeFragment);
        transaction.commit();
    }

Fragment中嵌套Tablayout+子Fragment+ViewPager

页面布局：

前提概要：

由于之前已建了导航栏，所以需要在导航栏的第二个父碎片中添加Tablayout,ViewPager组件，之前的Framlayout是放碎片的地方，而接下来的第二个父碎片中用ViewPager实现对子碎片的管理，也是子碎片的容器(也就是说不用再用Framlayoout装载碎片),所以只要实现ViewPager的适配器创建，在其中实现FragmentManager(碎片管理器）就可以实现左右滑动出现子碎片，要想在子碎片中有组件，需要在子碎片XML中创建组件。要想左右滑动多少个页面。就创建多少个子碎片。整体来说是Fragment嵌套子fragment_list,用ViewPager管理并实现翻页。

请结合图理解

组件：

注意，用viewpager来继承view pager2

拖进去的组件还是view pager2，但是用viewpager实现

从左边改为右边的代码

在tablayout中添加tabitem，并创建相应的Tab_fragment,也就是NewFragment中的子碎片

联动：

工作环境：NewFragment [父Fragment]

这里的NewFragment是主页面的Fragment,也就是底部导航跳转出来的第二个碎片，

而我们所要做的是要将Tablayout,与Viewpager联动

联动步骤：1.将子fragments连接成链表

2.为viewpager 创建适配器也就是viewPager.setAdapter (getChildFragmentManager())

重写getitem() , getcount() , getPagetitle()方法//pagetitle就是tab标签（可以创建String 数组存储标签名）

3.tabLayout.setupWithViewPager(viewPager2,false);

思路：

其中getChildFragmentManager()，是请求子类FragmentManager()，而FragmentManager()会自动管理Fragmennt,所以创建适配器，传入FragmentManage对象，基本就完成viewpager的设置，如果不需要tablayout ,最后一步不做，在各自子Fragment中创建相应的imageview ,textview组件即可。

New_Fragment +MainActivity.java 源码：

New_Fragment源码：

public class News_Fragment extends Fragment {

    private TabLayout tabLayout;
    private ViewPager viewPager2;
    private List<Fragment> fragment_list;
    private tab_finance_Fragment tab_finance_fragment;
    private tab_news_Fragment tab_news_fragment;
    private tabs_enti_Fragment tabs_enti_fragment;
    private  tab_sport_Fragment tab_sport_fragment;
    private String[] title={"xxx"};
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_news_, container, false);
        // Inflate the layout for this fragment

        //子类fragment添加进链表
        tabs_enti_fragment = new tabs_enti_Fragment();
        tab_finance_fragment = new tab_finance_Fragment();
        tab_news_fragment = new tab_news_Fragment();
        tab_sport_fragment = new tab_sport_Fragment();
        fragment_list = new ArrayList<>();
        tabLayout = view.findViewById(R.id.tablayout);
        viewPager2 = view.findViewById(R.id.viewPager2);

        fragment_list.add(tab_news_fragment);
        fragment_list.add(tabs_enti_fragment);
        fragment_list.add(tab_finance_fragment);
        fragment_list.add(tab_sport_fragment);



        viewPager2.setAdapter(new FragmentPagerAdapter(getChildFragmentManager(),FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
            @NonNull
            @Override
            public Fragment getItem(int position) {
                return fragment_list.get(position);
            }

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

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return title[position];
            }

        });

        tabLayout.setupWithViewPager(viewPager2,true);



        return view;
    }
    /*

    public  Fragment newinstance(FragmentPagerAdapter fmadapter){
        View view = View.inflate(R.layout.fragment_news_, this, false);
        News_Fragment news_Fragment = new News_Fragment();
        viewPager2 = findViewById(R.id.viewPager2);

        return news_Fragment;
    }

*/
    



}

MainActivity.java 源码：

kage com.example.myapplication;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.fragment.app.FragmentTransaction;
import androidx.fragment.app.ListFragment;
import androidx.viewpager.widget.ViewPager;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;

import android.content.Context;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;

import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.android.material.tabs.TabLayout;

import java.util.ArrayList;
import java.util.Collection;
import java.util.Iterator;
import java.util.List;
import java.util.ListIterator;

public class MainActivity extends AppCompatActivity {
    private Home_Fragment homeFragment;
    private News_Fragment newsFragment;
    private Profile_Fragment profileFragment;
    BottomNavigationView btnnavigationview;


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

        //底部导航栏
        homeFragment = new Home_Fragment();
        newsFragment = new News_Fragment();
        profileFragment = new Profile_Fragment();

        //点击底部导航栏，切换页面绑定fragment
        settingdefaultfragment();



        //点击底部导航栏，切换页面绑定fragment
        btnnavigationview = findViewById(R.id.btnnavigationview1);
        btnnavigationview.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
                if(item.getItemId() == R.id.news){
                    fragmentTransaction.replace(R.id.framelayout,newsFragment);
                    // startActivity(new Intent(,NEW_fra.class));
                } else if (item.getItemId() == R.id.home) {
                    fragmentTransaction.replace(R.id.framelayout,homeFragment);
                } else if (item.getItemId() == R.id.profile) {
                    fragmentTransaction.replace(R.id.framelayout,profileFragment);
                }
                fragmentTransaction.commit();
                return true;
            }
        });















    }

    // 设置默认锁定主页面
    public void settingdefaultfragment(){
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.replace(R.id.framelayout,homeFragment);
        transaction.commit();
    }
}

文王采

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
Fragment 嵌套TabLayout 及 ViewPager

其中getChildFragmentManager()，是请求子类FragmentManager()，而FragmentManager()会自动管理Fragmennt,所以创建适配器，传入FragmentManage对象，基本就完成viewpager的设置，如果不需要tablayout ,最后一步不做即可。重写getitem() , getcount() , getPagetitle()方法。这里的NewFragment是主页面的Fragment,也就是底部导航跳转出来的第二个碎片，//清晰哈，我画的！
复制链接

扫一扫