安卓Activity中使用头部导航栏控件

				安卓Activity中使用头部导航栏控件	

开发工具与关键技术：Android studio
作者：熊俊杰
撰写时间：2021.7.28

首先在build.gradle里面导入如下控件

//TableLayout -===头部列表导航栏控件
implementation "com.google.android.material:material:1.1.0"
//viewpager2
implementation 'androidx.viewpager2:viewpager2:1.0.0'

然后我们可以在指定的页面使用控件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<!--需要在gradle中添加 implementation "com.google.android.material:material:1.1.0"  -->
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tl_order_title"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    app:tabGravity="fill"
    app:tabIndicatorColor="@color/colorPrimary"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/colorPrimaryDark"
    app:tabTextColor="@color/colorPrimary"/>
<!--需要在gradle中添加 implementation 'androidx.viewpager2:viewpager2:1.0.0'-->
<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/vp_order_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"/>
</LinearLayout>

然后创建一给fragment控件和一个内容页面

public class UserFragment extends Fragment {
    private String t;
    private TextView textView;

    public UserFragment(int text) {
        t =String.valueOf(text);
    }
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_user,container,false);
        textView = view.findViewById(R.id.tv_text);
        textView.setText(t);
        return view;
    }
}

Fragment页面：

<?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">
    <TextView
        android:id="@+id/tv_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我"
        android:textSize="30dp"/>
</LinearLayout>

接下来我们需要创建一个activity 用来将fragment页面添加到对应的头部导航点击的区域，这里我使用的是一个fragment来接收，其实可以创建多个fragment接收的

public class TabLayoutActivity extends AppCompatActivity {
    private String[] title = {"全部", "待支付", "已支付", "已入住", "已取消"};
    private int[] orderStateIdTitle = {0, 1, 2, 3, 5};
    //存放Fragment
    Fragment[] fragments;
    private List<Fragment> fragmentList = new ArrayList<Fragment>();
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tablayout);
        TabLayout tabLayout = findViewById(R.id.tl_order_title);
        ViewPager viewPager = findViewById(R.id.vp_order_container);
        tabLayoutAdapater fragmentAdater = new      tabLayoutAdapater(getSupportFragmentManager());
        viewPager.setAdapter(fragmentAdater);
        tabLayout.setupWithViewPager(viewPager);
    }
    //自定义头部标签导航的容器
    class tabLayoutAdapater extends FragmentPagerAdapter {
        public tabLayoutAdapater(@NonNull FragmentManager fm) {
            super(fm);
            fragments=new Fragment[title.length];
        }
        //导航栏的总长度
        @Override
        public int getCount() {
            return title.length;
        }
        //标题索引
        @Override
        public Fragment getItem(int position) {
            if (fragments[position]==null){
                //创建Fragment
                Fragment fragment=new UserFragment(orderStateIdTitle[position]);
                fragmentList.add(fragment);
                fragments[position]=fragment;
            }
//System.out.println("================="+fragmentList.size());
            return fragments[position];
        }
        //标题内容
        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }
    }
}

如图：