Fragment+ViewPager+TabLayout

TabLayout的介绍

Tablayout继承自HorizontalScrollView，用作页面切换指示器，因使用简便功能强大而广泛使用在App中。

官方介绍，TabLayout 是一个横向标签显示的布局，效果就是现在很多新闻客户端的那种顶部标签展示效果，并支持指示器、 ViewPager 联动
TabLayout 的几个常用属性值:

app:tabBackground 标签布局的背景色
app:tabIndicatorColor 指示器的颜色
app:tabIndicatorHeight 指示器的高度（如果不需要指示器可以设置为0dp）
app:tabMode 显示模式：默认 fixed（固定），scrollable（可横向滚动）
app:tabPadding 标签内边距
app:tabSelectedTextColor 标签选中的文本颜色
app:tabTextAppearance 标签文本样式
app:tabTextColor 标签未选中的文本颜色

简单使用
效果图：

从效果图来看，这是采用 TabLayout + ViewPager 滑动切换和点击标签切换的一个效果。TabLayout 支持横向滚动多标签设置，还可以支持指示器，支持与 ViewPager 进行联动。下面看看具体实现

1 ,引入 com.android.support:design
TabLayout 是属于 com.android.support:design 包的控件，所以需要依赖该包

implementation 'com.android.support:design:28.0.0'

2,MainActivity的xml文件的创建

<?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:orientation="vertical"android:layout_height="match_parent"tools:context=".MainActivity"><android.support.design.widget.TabLayoutandroid:id="@+id/tab_id"app:tabSelectedTextColor="#E5AF35"app:tabTextColor="#969696"app:tabIndicatorColor="#E5AF35"app:tabIndicatorHeight="5dp"app:tabMode="scrollable"android:layout_weight="1"android:layout_width="match_parent"android:layout_height="0dp"></android.support.design.widget.TabLayout><android.support.v4.view.ViewPagerandroid:id="@+id/vp_id"android:layout_weight="8"android:layout_width="match_parent"android:layout_height="0dp"></android.support.v4.view.ViewPager>
</LinearLayout>

3,Java代码：MainActivity.java

package com.example.day007;import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;import com.example.day007.adapter.MyFragmentAdapter;
import com.example.day007.fragment.OneFragment;
import com.example.day007.fragment.TwoFragment;import java.util.ArrayList;
import java.util.List;public class MainActivity extends AppCompatActivity {
    private TabLayout tabId;private ViewPager vpId;private List<Fragment> list = new ArrayList<>();private List<String> titles = new ArrayList<>();@Overrideprotected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);supportRequestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);tabId = findViewById(R.id.tab_id);vpId = findViewById(R.id.vp_id);list.add(new OneFragment());list.add(new TwoFragment());list.add(new OneFragment());list.add(new TwoFragment());titles.add("视频");titles.add("新闻");titles.add("图片");titles.add("留言");MyFragmentAdapter myFragmentAdapter = new MyFragmentAdapter(getSupportFragmentManager(), list, titles);vpId.setAdapter(myFragmentAdapter);//把viewPager和tabLayout绑定在一起,注释掉看看效果.tabId.setupWithViewPager(vpId);}
}

4,适配器代码：MyFragmentAdapter.java

package com.example.day007.adapter;import android.support.annotation.Nullable;
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 android.support.v4.view.ViewPager;import java.util.ArrayList;
import java.util.List;/*** ${FENG}* 2019-07-11*/
public class MyFragmentAdapter extends FragmentStatePagerAdapter {
    private List<Fragment> list;private List<String> titles;public MyFragmentAdapter(FragmentManager fm, List<Fragment> list, List<String> titles) {
    super(fm);this.list = list;this.titles = titles;}@Overridepublic int getCount() {
    return list.size();}@Overridepublic Fragment getItem(int i) {
    return list.get(i);}//返回与viewpage关联以后的tablayot的内容@Nullable@Overridepublic CharSequence getPageTitle(int position) {
    return titles.get(position);}
}

案例

1.XML代码

<?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"><com.google.android.material.tabs.TabLayoutandroid:layout_width="match_parent"android:layout_height="50dp"app:tabMode="scrollable"android:id="@+id/tab"></com.google.android.material.tabs.TabLayout><androidx.viewpager.widget.ViewPagerandroid:id="@+id/pv"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="8"></androidx.viewpager.widget.ViewPager><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:gravity="center"android:orientation="horizontal"android:id="@+id/ll"></LinearLayout></LinearLayout>

//Fragment默认布局就可以

<?xml version="1.0" encoding="utf-8"?>
<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=".BlankFragment"><!-- TODO: Update blank fragment layout --><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="@string/hello_blank_fragment" /></FrameLayout>

2.MainActivity JAVA代码

package com.example.day007;import android.os.Bundle;
import android.widget.ImageView;
import android.widget.LinearLayout;import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;import com.google.android.material.tabs.TabLayout;import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;public class MainActivity extends AppCompatActivity {
    private ViewPager pv;private LinearLayout ll;private TabLayout tab;@Overrideprotected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();List<String> sss = new ArrayList<>();sss.add("金雷克萨");sss.add("jkndas");sss.add("金雷克萨");sss.add("jkndas");sss.add("金雷克萨");sss.add("jkndas");sss.add("金雷克萨");sss.add("jkndas");sss.add("金雷克萨");sss.add("jkndas");sss.add("金雷克萨");sss.add("jkndas");final List<Fragment> list = new ArrayList<>();list.add(new BlankFragment());list.add(new BlankFragment());list.add(new BlankFragment());list.add(new BlankFragment());list.add(new BlankFragment());list.add(new BlankFragment());list.add(new BlankFragment());list.add(new BlankFragment());list.add(new BlankFragment());list.add(new BlankFragment());list.add(new BlankFragment());list.add(new BlankFragment());final List<ImageView> list1 = new ArrayList<>();for (int i = 0; i < list.size(); i++) {
    ImageView imageView = new ImageView(this);if (i == 0) {
    imageView.setImageResource(R.drawable.dian);} else {
    imageView.setImageResource(R.drawable.dian_f);}list1.add(imageView);ll.addView(imageView);}Timer timer = new Timer();timer.schedule(new TimerTask() {
    int index = 0;@Overridepublic void run() {
    runOnUiThread(new Runnable() {
    @Overridepublic void run() {
    pv.setCurrentItem(index++);}});if (index > list.size()) {
    index = 0;}}}, 0, 1000);pv.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }@Overridepublic void onPageSelected(int position) {
    for (int i = 0; i < list1.size(); i++) {
    ImageView imageView = list1.get(i);if (i == position) {
    imageView.setImageResource(R.drawable.dian);} else {
    imageView.setImageResource(R.drawable.dian_f);}}}@Overridepublic void onPageScrollStateChanged(int state) {
    }});FgAdapter fgAdapter = new FgAdapter(getSupportFragmentManager(), list, sss);pv.setAdapter(fgAdapter);tab.setupWithViewPager(pv);}private void initView() {
    pv = (ViewPager) findViewById(R.id.pv);ll = (LinearLayout) findViewById(R.id.ll);tab = (TabLayout) findViewById(R.id.tab);}
}

适配器代码

package com.example.day007;import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;import java.util.List;public class FgAdapter extends FragmentPagerAdapter {
    private  List<Fragment> list;private List<String> sss;public FgAdapter(@NonNull FragmentManager fm,List<Fragment> list,List<String> sss) {
    super(fm);this.list = list;this.sss = sss;}@NonNull@Overridepublic Fragment getItem(int position) {
    return list.get(position);}@Overridepublic int getCount() {
    return list.size();}@Nullable@Overridepublic CharSequence getPageTitle(int position) {
    return sss.get(position);}
}

Fragment java类代码默认就可以

package com.example.day007;import android.os.Bundle;import androidx.fragment.app.Fragment;import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;/*** A simple {@link Fragment} subclass.*/
public class BlankFragment extends Fragment {
    public BlankFragment() {
    // Required empty public constructor}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
    // Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_blank, container, false);}}