一、TabLayout+fragment+viewPager 实现

直播带货app源码实现底部导航栏，我们很容易想到使用表格布局，下面就是一个个的tab切换viewpager就行。

这种实现方直播带货app源码最为常用吧。

在build.gradle导入工具包：

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

编写 activity2_main.xml 布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/tablayout"/>
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tablayout"
    android:layout_alignParentBottom="true"
    android:layout_width="match_parent"
    android:layout_height="50dp">
</com.google.android.material.tabs.TabLayout>
</RelativeLayout>

编写四个Fragment以及布局

在这里插入图片描述

这里给出一个Fragment。

public class me extends Fragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_me, container, false);
    }
}

布局代码

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mq.bottomtoobar3.me">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/tx4"/>
</FrameLayout>

编写MyAdapt继承FragmentPagerAdapter的适配器

public class MyAdapt extends FragmentPagerAdapter {
    private List<Fragment> mFragments;
    private List<String> mtitle;
    public MyAdapt(@NonNull FragmentManager fm, List<Fragment> mFragments,List<String> mtitle) {
        super(fm);
        this.mFragments=mFragments;
        this.mtitle=mtitle;
    }
    @NonNull
    @Override  //返回指定fragment
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }
    @Override  //返回fragment数量
    public int getCount() {
        return mFragments.size();
    }
    @Nullable
    @Override  //获取分页标题
    public CharSequence getPageTitle(int position) {
        return mtitle.get(position);
    }
}

编写MainActivity2 代码

public class MainActivity2 extends AppCompatActivity {
    private List<Fragment> mFragments;   //存放视图
    private ViewPager viewPager;
    private TabLayout mTabLayout;
    private List<String> mtitle;  //存放底部标题
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity2_main);
        initView();
    }
    private void initView() {
        mTabLayout = findViewById(R.id.tablayout);
        viewPager = findViewById(R.id.viewpager);
        mFragments=new ArrayList<>();
        mFragments.add(new msg());
        mFragments.add(new people());
        mFragments.add(new find());
        mFragments.add(new me());
        mtitle=new ArrayList<String>();
        mtitle.add("信息");
        mtitle.add("联系人");
        mtitle.add("发现");
        mtitle.add("我的");
        
        //实例化适配器
        MyAdapt adapt = new MyAdapt(getSupportFragmentManager(), mFragments, mtitle);
        viewPager.setAdapter(adapt);
        mTabLayout.setupWithViewPager(viewPager);//给tab设置一个viewpager
        //viewpager的监听
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override  //选中
            public void onPageSelected(int position) {
                switch (position){
                    case 0:
                        Toast.makeText(MainActivity2.this, "这是信息", Toast.LENGTH_SHORT).show();
                        break;
                    case 1:
                        Toast.makeText(MainActivity2.this, "这是联系人", Toast.LENGTH_SHORT).show();
                        break;
                    case 2:
                        Toast.makeText(MainActivity2.this, "这是发现", Toast.LENGTH_SHORT).show();
                        break;
                    case 3:
                        Toast.makeText(MainActivity2.this, "这是我的", Toast.LENGTH_SHORT).show();
                        break;
                }
            }
            @Override   // //state的状态有三个，0表示什么都没做，1正在滑动，2滑动完毕
            public void onPageScrollStateChanged(int state) {
            }
        });
    }
}

小结

直播带货app源码底部导航栏实现的方式实在是太多种了，主要就是考虑布局的分配。上面的主页面内容展示你要用什么去实现，以及下面的底部导航你要用什么去实现，只要可以组合起来并建立监听的一致，直播带货app源码就可以实现底部导航栏的功能。

声明：本文由云豹科技转发自浪漫主义码农博客，如有侵权请联系作者删除

ITPub博客

直播带货app源码实现底部导航栏的不同方式

一、TabLayout+fragment+viewPager 实现

小结

最新文章