Fragment+ViewPager+TabLayout
Fragment+ViewPager+TabLayout
- TabLayout的介绍
- 1 ,引入 com.android.support:design
- 2,MainActivity的xml文件的创建
- 3,Java代码：MainActivity.java
- 4,适配器代码：MyFragmentAdapter.java
- 5,Fragment创建一个右键带布局的就搞定,不用其他改变.
- Banner 轮播图的使用
- 常量
- 动画常量类（setBannerAnimation方法调用）
- 方法
- Attributes属性（banner布局文件中调用）
- Android EventBus 的使用
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 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