简单Fragment+Tablayout+ViewPage实现底

滑动栏在上面

1.TabLayout的使用需要借助Android Design包，所以我们需要在 build.gradle中引入design包：

implementation 'com.android.support:design:27.1.1'
2.将activity_main布局为

  <?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"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="fill"
    app:tabMode="fixed"
    android:id="@+id/tab">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:id="@+id/vp_view"
    ></android.support.v4.view.ViewPager>
</LinearLayout>

3.设置三个布局第一页，第二页，第三页

例如：第一页

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

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="35dp"
    android:text="第一页"
    android:id="@+id/first"/>

</LinearLayout>

5.为每个布局设置一个Fragment

例如：第一页

import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

public class firstFragment extends android.support.v4.app.Fragment {
View view;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    view   =   inflater.inflate(R.layout.first,container,false);
    return inflater.inflate(R.layout.first,container,false);
}

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    Button btn  =   (Button)view.findViewById(R.id.first);
    btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            getToast.get("first");
        }
    });
}

}

4.为viewpage设置适配器

package com.example.trytablayout;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;

import java.util.HashMap;

public class PageAdapt extends FragmentPagerAdapter {
private int num;
private HashMap<Integer, Fragment> mFragmentAdpat   =   new HashMap<>();
public PageAdapt(FragmentManager fragment, int num){
    super(fragment);
    this.num    =   num;
}

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

@Override
public Fragment getItem(int position) {
    Fragment fragment   =   mFragmentAdpat.get(position);
   if(fragment==null){
       switch (position){
           case 0:
               fragment =  new firstFragment();
               break;
           case 1:
               fragment =   new secondFragment();
               break;
           case 2:
               fragment =   new thirdFragment();
               break;
       }
   }
   return fragment;
}

}

6.在MainActivity中对Tablayout和ViewPage中进行绑定

package com.example.trytablayout;

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

public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
public static Context context;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    context = this;
    tabLayout   =   (TabLayout)findViewById(R.id.tab);
    viewPager   =   (ViewPager)findViewById(R.id.vp_view);
    tabLayout.addTab(tabLayout.newTab().setText("第一页"));
    tabLayout.addTab(tabLayout.newTab().setText("第二页"));
    tabLayout.addTab(tabLayout.newTab().setText("第三页"));
    viewPager.setAdapter(new PageAdapt(getSupportFragmentManager(), tabLayout.getTabCount()));
    viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            viewPager.setCurrentItem(tab.getPosition());
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });

}

}

将菜单栏设为底下只需要将activity_main中的布局改为

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




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

<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="fill"
    app:tabMode="fixed"
    android:id="@+id/tab">
</android.support.design.widget.TabLayout>
</LinearLayout>