魅族效果 | 扇形效果 |
---|---|
条状效果 | 文字效果 |
---|---|
图片放大效果 | 卡片效果 |
---|---|
主要为 BannerViewPager 这个类,在布局中,添加自己喜欢的 Indicator 即可。
ViewPager2 使用的类是 BannerViewPager2,所以它的使用与 BannerViewPager 差不多,只是魅族方法中, 偏移量使用的是 banner2_l_margin和banner2_r_margin,也可以动态设置,使用setMzMargin(), 当然,此时 xml 就不要用 layout_margin = "20dp"这样的方法了。 为什么不统一?ViewPager2 是final,继承不了,没辙。。。。
首先,一个简单的 banner + indicator 如下,如果想要第一种效果,记得父布局 clipChildren="false":
<FrameLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipChildren="false">
<com.zhengsr.viewpagerlib.view.BannerViewPager
android:id="@+id/loop_viewpager_mz"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
app:banner_isAutoLoop="true"
app:banner_looptime="3000"
app:banner_transformer="mz"
app:banner_iscycle="true"
app:banner_switchtime="600" />
<com.zhengsr.viewpagerlib.indicator.CircleIndicator
android:id="@+id/rect_indicator"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="end|bottom"
android:layout_marginEnd="20dp"
app:cir_size="5dp"
app:cir_rect_width="10dp"
app:cir_normalColor="@color/gray"
app:cir_selectedColor="@color/white"
app:cir_horizon_margin="10dp"
app:cir_type="cirToRect" />
</FrameLayout>
首先,设置 Banner 是自动播放且循环的,然后 indicator 为圆点,选中的矩形;当然这些自定义属性也支持动态配置, 具体参考demo或者看示例、
接着,在 Activity 中,这样配置:
BannerViewPager bannerViewPager = findViewById(R.id.rect_banner);
CircleIndicator indicator = findViewById(R.id.rect_indicator);
//指定从哪一页开始
//bannerViewPager.setCurrentPosition(1);
//添加自定义数据,PageBean
//bannerViewPager.addPageBean(bean)
//把需要的 indicator 添加进去
bannerViewPager.addIndicator(indicator);
/**
* 设置监听即可,loop_layout 为要展示的内容,比如一个 ImageView,或者参考示例
* 其中,setText 为模板方法,为了简便代码,当然还有其他一些方法,可查阅 PageHelperListener
* onItemClick 为点击事件,当然还有其他方法,重写即可,比如子控件事件 onItemChildClick,如果有子控件
* 的点击事件,需要先在 bindView 中注册,比如 addChildrenClick(view,R.id.item_text,position),
* 其他一些方法,可查阅 PageHelperListener
*/
bannerViewPager.setPageListener(R.layout.loop_layout, mDatas, new PageHelperListener<TestBean>() {
@Override
public void bindView(View view, final TestBean data, int position) {
setText(view, R.id.loop_text, data.msg);
//注册子控件事件
//addChildrenClick(view,R.id.item_text,position);
ImageView imageView = view.findViewById(R.id.loop_icon);
GlideApp.with(view)
.load(data.resId)
.into(imageView);
}
@Override
public void onItemClick(View view, TestBean data, int position) {
super.onItemClick(view, data, position);
Toast.makeText(CircleIndicatorActivity.this, data.msg+" "+position, Toast.LENGTH_SHORT).show();
}
});
关于Databinding的使用
由于库并没有支持 databinding,所以可以在banner的布局中,添加自定义的 bindingAdapter ,再去配置数据。 推荐自定义viewgroup,将banner和indicator封装成一个view,然后通过 BindingAdapter 传递数据。如下:
xml
<com.zhengsr.wanandroid_jetpack.ui.BannerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:banner="@{vm.bannerBeans}"
app:layout_scrollFlags="exitUntilCollapsed|scroll|enterAlwaysCollapsed"
/>
** 中代码**
@JvmStatic
@BindingAdapter("banner")
fun banner(bannerView: BannerView,datas: MutableList<BannerBean>?){
datas?.let {
bannerView.setData(datas)
}
}
public void setData(LoopBannerBean beans){
if (beans != null && beans.data != null) {
mBannerViewPager.setPageListener(R.layout.banner_item_layout, beans.data, new PageHelperListener<BannerBean>() {
@Override
public void bindView(View view, BannerBean data, int position) {
ViewDataBinding bind = DataBindingUtil.bind(view);
if (bind != null) {
bind.setVariable(BR.bean,data);
}
}
});
mBannerViewPager.startAnim();
}
}
如果你要使用弧形图片,可以用在你的layout 中,使用 ArcImageView 这个控件,可以这样配置:
<!--弧形图片,arc_height 为弧度的高度-->
<com.zhengsr.viewpagerlib.view.ArcImageView
android:id="@+id/arc_icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:arc_height="15dp"
android:scaleType="centerCrop"/>
如果你要使用缩放控件,可以用 ScaleImageView 这个控件,可以这样配置:
<!--缩放图片控件,属性可参看最后面的说明-->
<com.zhengsr.viewpagerlib.view.ScaleImageView
android:id="@+id/scaleview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:scale_double_factor="2"
app:scale_auto_time="5"
app:scale_autofit="true"
app:scale_max_factor="6"
app:scale_limit_board="true"
app:scale_interrupt_parent_touch="true"/>
PageBean 为要添加的数据,这里也支持动态数据添加,比如卡片效果,它的xml如下:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:clipChildren="false"
android:orientation="vertical">
<com.zhengsr.viewpagerlib.view.BannerViewPager
android:id="@+id/loop_viewpager_card"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:layout_marginBottom="20dp"
app:banner_card_height="20dp"
app:banner_transformer="card"
/>
</LinearLayout>
在本库中,只提供三种 Indicator,如圆点 CircleIndicator,矩形 RectIndicator 和文字 TextIndicator 三种;
效果如下:
CircleIndicator | RectIndicator |
---|---|
- startAnim() 启动轮播,即开始轮播
- stopAnim() 关闭轮播,可以通过这两个api实现轮播与否
- isOutVisiableWindow() 判断轮播图是否超过可视界面
可以通过代码去查看怎么配置