TabLayout与ViewPager结合使用

:TabLayout是安卓6.0推出的,可以替代 ViewPagerIndicator 的一个控件,存放在 design 包下,继承自 HorizontalScrollView 。使用TabLayout需要导入依赖

implementation 'com.android.support:design:27.1.1'

在这里插入图片描述

整体效果就是外部是一个帧布局切换fragment(消息1.2.3),在消息1的fragment中实现的TabLayout+ViewPage

MainActivity实现fragment(消息1.2.3)的切换
MainActivity布局

<?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=".MainActivity"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/frameLt"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="8">


    </FrameLayout>

    <RadioGroup
        android:layout_marginTop="20dp"
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/btn01"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:drawableTop="@drawable/radiobtn_selector"
            android:text="消息(1)"/>

        <RadioButton
            android:id="@+id/btn02"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:drawableTop="@drawable/radiobtn_selector"
            android:text="消息(2)"/>

        <RadioButton
            android:id="@+id/btn03"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:drawableTop="@drawable/radiobtn_selector"
            android:text="消息(3)"/>

    </RadioGroup>

</LinearLayout>

MainActivity代码

public class MainActivity extends AppCompatActivity {

    private Toolbar tool;
    private FragmentManager manager;
    private RadioGroup radioGroup;

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //加载组件

        radioGroup = findViewById(R.id.radioGroup);

        //获取事务管理
        manager = getSupportFragmentManager();
        //开启事务
        FragmentTransaction fragmentTransaction = manager.beginTransaction();
        //添加事务
        fragmentTransaction.add(R.id.frameLt,new Fragment01());
        //提交事务
        fragmentTransaction.commit();

        //第一个Radiobutton默认选中
        radioGroup.check(radioGroup.getChildAt(0).getId());

        //radioGroup的监听
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                //开启新事务,上一个已经提交
                FragmentTransaction fragmentTransaction2 = manager.beginTransaction();

                switch (i){
                    case R.id.btn01:
                        //替换fragment
                        fragmentTransaction2.replace(R.id.frameLt,new Fragment01());
                        break;
                    case R.id.btn02:
                        fragmentTransaction2.replace(R.id.frameLt,new Fragment02());
                        break;
                    case R.id.btn03:
                        fragmentTransaction2.replace(R.id.frameLt,new Fragment03());
                        break;

                }
                fragmentTransaction2.commit();
            }
        });

    }

fragment(消息1)布局

<?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"
    android:orientation="vertical">

   <android.support.design.widget.TabLayout
       android:id="@+id/tabLt"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="#ffbb">


   </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">


    </android.support.v4.view.ViewPager>


</LinearLayout>

fragment(消息1)java代码
fragment(消息1)实现今天的重点,剩下的fragment代码就不发了

public class Fragment01 extends Fragment {

    private TabLayout tabLt;
    private ViewPager pager;

    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment01,container,false);
        //加载组件
        tabLt = view.findViewById(R.id.tabLt);
        pager = view.findViewById(R.id.pager);

        //tab与pager绑定
        tabLt.setupWithViewPager(pager);
        //tablayout的显示模式;
        tabLt.setTabMode(TabLayout.MODE_FIXED);
        //pager轮播集合
        List<Fragment> list = new ArrayList<Fragment>();
        list.add(new Fragment04());
        list.add(new Fragment05());
        list.add(new Fragment06());

        //tab要展示的文字集合
        List<String> slist = new ArrayList<String>();
        for (int i=0;i<list.size();i++){

            slist.add("标题"+i);
        }

        //适配器
        //getFragmentManager()所得到的是所在fragment 的父容器的管理器,
        //getChildFragmentManager()所得到的是在fragment  里面子容器的管理器。
        MyPagerAdapter myPagerAdapter = new MyPagerAdapter(getChildFragmentManager(),list,slist);
        pager.setAdapter(myPagerAdapter);



        return view;
    }

}

适配器

public class MyPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> list;
    private List<String> slist;


    public MyPagerAdapter(FragmentManager fm,List<Fragment> list,List<String> slist) {
        super(fm);
        this.list =list;
        this.slist = slist;

    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = list.get(position);

        return fragment;
    }

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

    @Nullable
    @Override
    //返回标题,返回给tab
    public CharSequence getPageTitle(int position) {
        return slist.get(position);
    }
}

ps:本人组织语言很差,望大家海涵

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43807869/article/details/84879745