为什么 Android Material Design 选项卡布局不起作用？

Question

I am trying to create a tablayout with viewpager, but it does not work. when it is loaded by tabLayout.setupWithViewPager(viewPager); in the PatientMain main activity class the output is:

and when i use viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)); in the PatientMain main activity class the output is:

but the fragment is not shown and there is no swiping available.

I do it by the book, exactly as it is said to be done. i used several sources such as 1 , 2 .I personally think that the code might not be the problem and there is something wrong with the version of sdk that is used, but i might be wrong. here is my code:

the main activity:

package parsa.lop.adjust;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TabHost;

public class PatientMain extends AppCompatActivity {

    private TabHost tabHost;

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private ViewPagerAdapter viewPagerAdapter;

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

        tabLayout = (TabLayout)findViewById(R.id.tabLayout);
        viewPager = (ViewPager)findViewById(R.id.viewPager);

        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPagerAdapter.addFragment(new MyDietFragment(), "My Diet"); // `new MyDietFragment()` should be in `FragmentPagerAdapter.getItem()`
        viewPagerAdapter.addFragment(new MyWorkoutFragment(), "My Workout");  // `new MyWorkoutFragment()` should be in `FragmentPagerAdapter.getItem()`
        viewPagerAdapter.addFragment(new StartProgramFragment(), "Start a Program");  // `new StartProgramFragment()` should be in `FragmentPagerAdapter.getItem()`
        viewPager.setAdapter(viewPagerAdapter);



        final TabLayout.Tab myDietTab = tabLayout.newTab();
        final TabLayout.Tab myWorkOutTab = tabLayout.newTab();
        final TabLayout.Tab startProgramTab = tabLayout.newTab();

        myDietTab.setText("My Diet");
        myWorkOutTab.setText("My Workout");
        startProgramTab.setText("Start a Program");

        tabLayout.addTab(startProgramTab,0);
        tabLayout.addTab(myDietTab,1);
        tabLayout.addTab(myWorkOutTab,2);

//        tabLayout.setupWithViewPager(viewPager);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

    }
}

the ViewPager Adapter:

package parsa.lop.adjust;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;

import java.util.ArrayList;
import java.util.List;

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private List<String> fragmentTitleList = new ArrayList<String>();
    private List<Fragment> fragmentList = new ArrayList<Fragment>(); // this line can cause crashes

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position); // viewPager fragments should be created here
    }

    @Override
    public int getCount() {
        return 0; // this is the bug :p
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return fragmentTitleList.get(position);
    }

    public void addFragment(Fragment fragment, String title){
        fragmentList.add(fragment); // this line can cause crashes
        fragmentTitleList.add(title);
    }
}

one of the fragments:

package parsa.lop.adjust;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MyDietFragment extends Fragment {

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.my_diet_view, container, false);
    }
}

my main layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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=".PatientMain">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:background="@color/colorPrimary"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true">

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

</android.support.constraint.ConstraintLayout>

my fragment layout:

<?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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Tab 1"
        android:textSize="36sp" />

</RelativeLayout>

build.gradle:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "parsa.lop.adjust"
        minSdkVersion 21
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation 'com.android.support:design:27.1.1'
}

Answer 1

In your ViewPagerAdapter, replace this:

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

With this:

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

You're setting the count of the adapter's contents to be 0, which is the same as the adapter telling other components that it has no items to show.

---

Also, you should make sure that a Fragment hosted by a ViewPager is created inside FragmentPagerAdapter.getItem() , and not inside the Activity.

Answer 2

You should also uncomment:

tabLayout.setupWithViewPager(viewPager);

Remember that with this implementation your ViewPager will re-build the fragments inside it every 2 swipes of distance. I mean: if you have 3 fragments and from 1 you swipe to 2 on 2 it will re-create the 3rd fragment and if from 3 you swipe to 1 on 2 it will re-create the 1st fragment (it will always do this no matters if you have already created the fragment or not). To avoid this problem (if you need that fragments don't be re-created) you should use:

viewPager.setOffscreenPageLimit(<num_of_your_pages>)

Also remember that Every Adapter (like RecyclerView.Adapter) uses the "getCount()" or "getItemCount()" method to get the number of elements to display, so in every Adapter you should override this method and return the count of your values.

Also, if I'm not wrong, the proper way to implements the TabLayout inside the XML file is by including it in AppBarLayout with a Toolbar. That's because you should normally use a "NoActionBar" style on your activity. So something like:

<com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            android:layout_height="56dp"/>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"
            style="@style/AppTheme.TabLayout"/>
    </com.google.android.material.appbar.AppBarLayout>

And in the manifest for your activity:

android:theme="@style/AppTheme.NoActionBar"

Also the code you used:

final TabLayout.Tab myDietTab = tabLayout.newTab();
        final TabLayout.Tab myWorkOutTab = tabLayout.newTab();
        final TabLayout.Tab startProgramTab = tabLayout.newTab();

        myDietTab.setText("My Diet");
        myWorkOutTab.setText("My Workout");
        startProgramTab.setText("Start a Program");

Is useless because you had already defined the titles of the fragments when you added it to the viewPager. So you should add:

@Override
public CharSequence getPageTitle(int position) {
    return mFragmentTitleList.get(position);
}

/** Public Methods **/
    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment); // this line can cause crashes
        mFragmentTitleList.add(title);
    }

To your ViewPager, in this way you will set the fragment and the title for it. Then use: tabLayout.setupWithViewPager(viewPager);

Also you shouldn't instantiate Fragments by using the constructor, use instead a Static Factory Method (it is useful if you need to pass values to the fragment). A static factory method is a method which call the constructor to instantiate an instance of the object, then it can do some operations with it (in the fragments case it will set up an Arguments Bundle to pass the properties to the onCreate method of the fragment which will get the Arguments and set the properties of itself). Example of fragment initialization:

public static void initInstance(int myVal1, int myVal2){
     MyFragment mInstance = new MyFragment();
     Bundle args = new Bundle();
     args.putInt(<BUNDLE_KEY_MYVAL1>, myVal1);
     args.putInt(<BUNDLE_KEY_MYVAL2>, myVal2);
     mInstance.setArguments(args);
     return mInstance;
}

Last I suggest to migrate to androidx because supports library won't be updated anymore (:

Hope this is helpful :D have a nice coding!