TabLayout+ViewPager

 

 

 

总体的页面搭建，上面一条TabLayout，下面是viewPager

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="80dp" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/myTabLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Monday" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tuesday" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Wednesday" />
    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/myViewPager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/myTabLayout"
        tools:ignore="MissingConstraints" />


</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package com.example.mytablayout;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;

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

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    TabLayout myTabLayout;
    ArrayList<View> viewArrayList;
    MyViewPagerAdapter myViewPagerAdapter;
    ViewPager viewPager;
    LayoutInflater li;

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

        //找到视图  初始化视图
        initView();

        //ViewPager的适配器
        myViewPagerAdapter = new MyViewPagerAdapter(viewArrayList);
        viewPager.setAdapter(myViewPagerAdapter);

        /********************TabLayout关联ViewPager**************************/
        myTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //设置滚动模式
        //myTabLayout.setupWithViewPager(viewPager);  这玩意有bug 在java里添加的标题不显示
        myTabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));

        //第二种设置title的方法
        setTabLayoutTitle();

    }

    public void initView(){
        myTabLayout = findViewById(R.id.myTabLayout);
        viewPager = findViewById(R.id.myViewPager);
        //把三个fragment放入arrayList中
        viewArrayList = new ArrayList<>();
        li = getLayoutInflater();
        viewArrayList.add(li.inflate(R.layout.fragment1_blank,null,false));
        viewArrayList.add(li.inflate(R.layout.fragment2_blank,null,false));
        viewArrayList.add(li.inflate(R.layout.fragment3_blank,null,false));
    }

    //手动  添加标题  必须在 setupwidthViewPager  之后  否则不行
    //除了在xml中设置title，第二种设置标题的方法就是在代码中设置
    public void setTabLayoutTitle(){
        myTabLayout.addTab(myTabLayout.newTab().setText("Thursday"));
        myTabLayout.addTab(myTabLayout.newTab().setText("Friday"));
        myTabLayout.addTab(myTabLayout.newTab().setText("Saturday"));
        //还可以设置图片
        myTabLayout.addTab(myTabLayout.newTab().setText("Sunday").setIcon(R.drawable.ic_android_black_24dp));
    }

}

MyViewPagerAdapter.java

package com.example.mytablayout;

import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.viewpager.widget.PagerAdapter;

import java.util.ArrayList;

public class MyViewPagerAdapter extends PagerAdapter {

    private ArrayList<View> viewLists;

    public MyViewPagerAdapter(ArrayList<View> aList) {
        this.viewLists = aList;
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewLists.get(position));
        return viewLists.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(viewLists.get(position));
    }

    /********************得到页面的标题以给TabLayout显示******************************/
    /********************CharSequence就是String的父类*******************************/
    /********************还没研究明白，暂时不用***************************************/
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return super.getPageTitle(position);
    }
}