少年郎，你需要封装好的 ViewPager 工具类，大牛带你直击优秀开源框架灵魂

第四个，底部指示器文字版本

有些 app 也用文字的方式，这里也提供了一种，文字外面的圆圈可以取消。颜色什么的自行定义。

轮播功能配置

那么，想要使用上面那几个样式配置呢？很简单，你需要三步：

step1：

配置数据，这里把 url 或者本地的 resid 的封装到 list 中，因为我们一般是解析了 gson 之后，获取图片和文字说明的，所以，这里就用 list 吧。

List<LoopBean> loopBeens = new ArrayList<>();for (int i = 0; i

《Android 学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

< TEXT.length; i++) {LoopBean bean = new LoopBean();bean.url = RESURL[i];bean.text = TEXT[i];loopBeens.add(bean);

}

step2：

配置 PageBean，这里主要是为了 viewpager 的指示器的作用，注意记得写上泛型.这里为上面的 LoopBean，如果你只是 String，就上鞋 url，如果是 res，就协商 integer。

PageBean bean = new PageBean.Builder<LoopBean>().setDataObjects(loopBeens).setIndicator(zoomIndicator).builder();

设置 viewpager 的动画，这里提供了三种，分别是 MzTransformer，ZoomOutPageTransformer, 和 DepthPageTransformer，前者会魅族商城的方式，后者为 google 提供默认的两种动画，可以体验一下,这里可有可无，这里我设置了魅族的效果，这样加上弧形的图片更好看。

mBannerCountViewPager.setPageTransformer(false,new MzTransformer());

step3：

view 的接口提供出来，供大家自行配置，这样的好处在于，实用性更高，你可以添加 gif，或者视频，或者简单的图片，记得写上 layout 文件。

mBannerCountViewPager.setPagerListener(bean, R.layout.loop_layout, new PageHelperListener() {@Overridepublic void getItemView(View view, Object data) {ImageView imageView = view.findViewById(R.id.loop_icon);LoopBean bean = (LoopBean) data;new GlideManager.Builder().setContext(LoopActivity.this).setImgSource(bean.url).setLoadingBitmap(R.mipmap.ic_launcher).setImageView(imageView).builder();TextView textView = view.findViewById(R.id.loop_text);textView.setText(bean.text);

//如若你要设置点击事件，也可以直接通过这个 view 来设置，或者图片的更新等等}});

xml 的配置，其实就是一个 viewpager 加一个 linearlayout，位置你自己去摆放

<com.zhengsr.viewpagerlib.view.BannerViewPagerandroid:id="@+id/loop_viewpager_arc"android:layout_width="match_parent"android:layout_height="200dp"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:clipChildren="false"zsr:isloop="false"zsr:switchtime="600" />

<com.zhengsr.viewpagerlib.indicator.ZoomIndicatorandroid:id="@+id/bottom_zoom_arc"android:layout_width="match_parent"android:layout_height="30dp"android:layout_gravity="bottom|right"android:layout_marginRight="20dp"android:gravity="center"zsr:zoom_alpha_min="0.5"zsr:zoom_leftmargin="10dp"zsr:zoom_max="1.5"zsr:zoom_selector="@drawable/bottom_circle" />

这样就完成了轮播功能，是不是封装之后，妈妈再也不用担心我写轮播效果了呢

2、Tab 指示器

说完轮播图，再说说 viewpager + fragment 这种更加常用的方式， 这里也提供了三种比较常用的样式。

第一种，无耻抄袭鸿洋大神的三角形版本

其实你会了轮播图的移动版本，那么这个对你来说，就是 a piece of cake。所以，就不解释啦

第二种，条形状的版本

没啥好说的，就是把上面的三角形改成条状的，机智如我，代码全靠抄！！！！果然一个项目的质量，取决于你复制粘贴的技巧

第三种，文字颜色渐变的方式

像我们常用的今日头条，就是用这种方式，而它的原理也是非常简单，就是用额 clipRect 这个属性，先绘制一遍正常颜色的，再绘制一遍其他颜色的，就可以了。我建议你先自己用 clipRect 试一下不同的颜色，再自己写一下，你会发现，卧槽，这么简单的。。。。。

这里的配置就更简单了，viewpager 就是普通的，关键就是这个 TabIndicator 了，因为我把这三种效果都装进去了.

三角形的 xml

<com.zhengsr.viewpagerlib.indicator.TabIndicatorandroid:id="@+id/line_indicator"android:layout_width="match_parent"android:layout_height="50dp"android:background="@color/black_ff"app:tab_color="@color/white"app:tab_width="25dp"app:tab_height="5dp"app:tab_text_default_color="@color/white_ff"app:tab_text_change_color="@color/white"app:tab_show="true"app:tab_text_type="normaltext"app:tab_textsize="16sp"app:visiabel_size="3"app:tap_type="tri"

</com.zhengsr.viewpagerlib.indicator.TabIndicator>

可以看到你可以设置的它大小，里面的 textview 的颜色变化，是否显示，和可视个数，如果你想改成圆条的，把 tab_type=”tri” 的 tri 改成 rect 即可，然后如果想使用 textview 颜色变化的，只需要把 tab_text_type=”normaltext” 中的 normaltext 改成 colortext 即可。

然后在代码中这样配置：

/**

• 把 TabIndicator 跟 viewpager 关联起来*/TabIndicator tabIndecator = (TabIndicator) findViewById(R.id.line_indicator);// 设置 viewpager 的切换速度，这样点击的时候比较自然 tabIndecator.setViewPagerSwitchSpeed(viewPager,600);tabIndecator.setTabData(viewPager,mTitle, new TabIndicator.TabClickListener() {@Overridepublic void onClick(int position) {//顶部点击的方法公布出来 viewPager.setCurrentItem(position);}});

这样，一个比较好用的 viewpager 加指示器的方式就完成了。

app 首次启动引导页

还有就是引导页了，这样跟 轮播图的配置差不多，因为用的也是那几个指示器。先看效果：

这里提供了三种样式，其实还有个文字，不没贴出来了，可以看轮播的； 引导图的配置非常简单，取一个底部为放大的来说：

GlideViewPager viewPager = (GlideViewPager) findViewById(R.id.splase_viewpager);ZoomIndicator zoomIndicator = (ZoomIndicator) findViewById(R.id.splase_bottom_layout);Button button = (Button) findViewById(R.id.splase_start_btn);

//先把本地的图片 id 装进 list 容器中 List<Integer> images = new ArrayList<>();for (int i = 0; i < RES.length; i++) {images.add(RES[i]);

}//配置 pagerbean，这里主要是为了 viewpager 的指示器的作用，注意记得写上泛型 PagerBean bean = new PagerBean.Builder<Integer>().setDataObjects(images).setIndicator(zoomIndicator).setOpenView(button).builder();

// 把数据添加到 viewpager 中，并把 view 提供出来，这样除了方便调试，也不会出现一个 view，多个// parent 的问题，这里在轮播图比较明显 viewPager.setPagerListener(bean, R.layout.image_layout, new PagerHelperListener() {@Overridepublic void getItemView(View view, Object data) {//通过获取到这个 view，你可以随意定制你的内容 ImageView imageView = view.findViewById(R.id.icon);imageView.setImageResource((Integer) data);}});

这里可以看到，我把 view 提供出来，供大家自行配置，这样的好处在于，实用性更高，你可以添加 gif，或者视频，或者简单的图片。 xml 的配置如下：

<com.zhengsr.viewpagerlib.view.GlideViewPagerandroid:id="@+id/splase_viewpager"android:layout_width="match_parent"android:layout_height="match_parent"/>

<Buttonandroid:id="@+id/splase_start_btn"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginLeft="100dp"android:layout_marginRight="100dp"android:layout_marginBottom="50dp"

最后

最后为了帮助大家深刻理解 Android 相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的 24 套腾讯、字节跳动、阿里、百度 2019-2021BAT 面试真题解析，我把大厂面试中常被问到的技术点整理成了视频和 PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。

还有 高级架构技术进阶脑图 帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。

Android 基础知识点

Java 基础知识点

Android 源码相关分析

常见的一些原理性问题

希望大家在今年一切顺利，进到自己想进的公司，共勉！

本文已被CODING开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录