Fragment+ViewPager+TabLayout

TabLayout的介绍

Tablayout继承自HorizontalScrollView，用作页面切换指示器，因使用简便功能强大而广泛使用在App中。
官方介绍，TabLayout 是一个横向标签显示的布局，效果就是现在很多新闻客户端的那种顶部标签展示效果，并支持指示器、 ViewPager 联动

简单使用
按照惯例，我们先看一下效果图：

从效果图来看，这是采用 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.TabLayout
        android: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.ViewPager
        android:id="@+id/vp_id"
        android:layout_weight="8"
        android:layout_width="match_parent"
        android:layout_height="0dp">

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

从 xml 布局文件看，根布局为一个垂直的线性布局，包含 TabLayout 和 ViewPager。重点看一下 TabLayout 的几个常用属性值

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

3,Java代码：MainActivity.java

package com.example.lesson0809one;

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

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<>();
    private MyFragmentAdapter myFragmentAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        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("titles1");
        titles.add("titles2");
        titles.add("titles3");
        titles.add("titles4");

        myFragmentAdapter = new MyFragmentAdapter(getSupportFragmentManager(),titles,list);
        vpId.setAdapter(myFragmentAdapter);

        tabId.setupWithViewPager(vpId);
    }
}

4,适配器代码：MyFragmentAdapter.java

package com.example.lesson0809one;

import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import java.util.List;

public class MyFragmentAdapter extends FragmentStatePagerAdapter {
    private List<String> titles;
    private List<Fragment> fragments;

    public MyFragmentAdapter(FragmentManager fm, List<String> titles, List<Fragment> fragments) {
        super(fm);
        this.titles = titles;
        this.fragments = fragments;
    }

    @Override
    public Fragment getItem(int i) {
        return fragments.get(i);
    }

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

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

5,Fragment创建一个右键带布局的就搞定,不用其他改变.

package com.example.lesson0809one;


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


/**
 * A simple {@link Fragment} subclass.
 */
public class OneFragment extends Fragment {


    public OneFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_one, container, false);
    }

}

Banner 轮播图的使用

官方文档

https://github.com/youth5201314/banner

常量

常量名称	描述	所属方法
BannerConfig.NOT_INDICATOR	不显示指示器和标题	setBannerStyle
BannerConfig.CIRCLE_INDICATOR	显示圆形指示器	setBannerStyle
BannerConfig.NUM_INDICATOR	显示数字指示器	setBannerStyle
BannerConfig.NUM_INDICATOR_TITLE	显示数字指示器和标题	setBannerStyle
BannerConfig.CIRCLE_INDICATOR_TITLE	显示圆形指示器和标题（垂直显示）	setBannerStyle
BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE	显示圆形指示器和标题（水平显示）	setBannerStyle
BannerConfig.LEFT	指示器居左	setIndicatorGravity
BannerConfig.CENTER	指示器居中	setIndicatorGravity
BannerConfig.RIGHT	指示器居右	setIndicatorGravity

动画常量类（setBannerAnimation方法调用）

ViewPagerTransforms 动画时集成的第三方库，可能有兼容问题导致position位置不准确，你可以选择参考动画然后自定义动画

常量类名
Transformer.Default
Transformer.Accordion
Transformer.BackgroundToForeground
Transformer.ForegroundToBackground
Transformer.CubeIn
Transformer.CubeOut
Transformer.DepthPage
Transformer.FlipHorizontal
Transformer.FlipVertical
Transformer.RotateDown
Transformer.RotateUp
Transformer.ScaleInOut
Transformer.Stack
Transformer.Tablet
Transformer.ZoomIn
Transformer.ZoomOut
Transformer.ZoomOutSlide

方法

方法名	描述	版本限制
setBannerStyle(int bannerStyle)	设置轮播样式（默认为CIRCLE_INDICATOR）	无
setIndicatorGravity(int type)	设置指示器位置（没有标题默认为右边,有标题时默认左边）	无
isAutoPlay(boolean isAutoPlay)	设置是否自动轮播（默认自动）	无
setViewPagerIsScroll(boolean isScroll)	设置是否允许手动滑动轮播图（默认true）	1.4.5开始
update(List<?> imageUrls,List titles)	更新图片和标题	1.4.5开始
update(List<?> imageUrls)	更新图片	1.4.5开始
startAutoPlay()	开始轮播	1.4开始，此方法只作用于banner加载完毕–>需要在start()后执行
stopAutoPlay()	结束轮播	1.4开始，此方法只作用于banner加载完毕–>需要在start()后执行
start()	开始进行banner渲染（必须放到最后执行）	1.4开始
setOffscreenPageLimit(int limit)	同viewpager的方法作用一样	1.4.2开始
setBannerTitle(String[] titles)	设置轮播要显示的标题和图片对应（如果不传默认不显示标题）	1.3.3结束
setBannerTitleList(List titles)	设置轮播要显示的标题和图片对应（如果不传默认不显示标题）	1.3.3结束
setBannerTitles(List titles)	设置轮播要显示的标题和图片对应（如果不传默认不显示标题）	1.4开始
setDelayTime(int time)	设置轮播图片间隔时间（单位毫秒，默认为2000）	无
setImages(Object[]/List<?> imagesUrl)	设置轮播图片(所有设置参数方法都放在此方法之前执行)	1.4后去掉数组传参
setImages(Object[]/List<?> imagesUrl,OnLoadImageListener listener)	设置轮播图片，并且自定义图片加载方式	1.3.3结束
setOnBannerClickListener(this)	设置点击事件，下标是从1开始	无（1.4.9以后废弃了）
setOnBannerListener(this)	设置点击事件，下标是从0开始	1.4.9以后
setOnLoadImageListener(this)	设置图片加载事件，可以自定义图片加载方式	1.3.3结束
setImageLoader(Object implements ImageLoader)	设置图片加载器	1.4开始
setOnPageChangeListener(this)	设置viewpager的滑动监听	无
setBannerAnimation(Class<? extends PageTransformer> transformer)	设置viewpager的默认动画,传值见动画表	无
setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer)	设置viewpager的自定义动画	无

Attributes属性（banner布局文件中调用）

Attributes	forma	describe
delay_time	integer	轮播间隔时间，默认2000
scroll_time	integer	轮播滑动执行时间，默认800
is_auto_play	boolean	是否自动轮播，默认true
title_background	color	reference
title_textcolor	color	标题字体颜色
title_textsize	dimension	标题字体大小
title_height	dimension	标题栏高度
indicator_width	dimension	指示器圆形按钮的宽度
indicator_height	dimension	指示器圆形按钮的高度
indicator_margin	dimension	指示器之间的间距
indicator_drawable_selected	reference	指示器选中效果
indicator_drawable_unselected	reference	指示器未选中效果
image_scale_type	enum	和imageview的ScaleType作用一样
banner_default_image	reference	当banner数据为空是显示的默认图片
banner_layout	reference	自定义banner布局文件，但是必须保证id的名称一样（你可以将banner的布局文件复制出来进行修改）

Android EventBus 的使用

官方文档

https://github.com/greenrobot/EventBus

翻译文档

https://www.jianshu.com/p/e7d5c7bda783