作者：邹峰立，微博：zrunker，邮箱：[email protected]，微信公众号：书客创作，个人平台：www.ibooker.cc。
本文选自书客创作平台第137篇文章。阅读原文 。
书客创作
轮播图，几乎所有的APP都会有的一个功能，多用于广告栏。在每一个APP当中可能最终呈现的效果不同，甚至在一些APP当中轮播图做的非常炫酷。所以轮播图功能对一个APP来说还是相当重要的。本篇文章提供三种不同处理方式的轮播图，主要针对轮播图的大小显示问题作出不同的处理方式，本框架已开源。
在开始讲解之前，先看一下，三种处理方式所实现的最终效果：
自定义轮播图
三种处理方式分别是：1、DecoratorLayout，轮播器的大小随子控件的大小而变化。2、ChirdHeightAutoLayout，轮播器宽度不变，轮播器的高度随子控件的高度而变化。3、GeneralLayout，设置宽和高，轮播器的自动轮播。
那么该如何集成该框架呢？
首先引入资源
这里提供两种方式集成。
1、gradle引入：
allprojects {
repositories {
maven { url 'https://www.jitpack.io' }
}
}
dependencies {
compile 'com.github.zrunker:ZViewPager:v1.0.4'
}
2、maven引入：
jitpack.io
https://jitpack.io
com.github.zrunker
ZViewPager
v1.0.4
使用
一、DecoratorLayout，轮播器的大小随子控件的大小而变化。
1、在布局文件中引入DecoratorLayout。
2、代码使用：（案例）
public class MainActivity extends AppCompatActivity {
// DecoratorLayout T泛型
private DecoratorLayout decoratorLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
decoratorLayout = (DecoratorLayout) findViewById(R.id.decoratorLayout);
List datas = new ArrayList<>();
datas.add(R.drawable.b);
datas.add(R.drawable.d);
// 初始化decoratorLayout
decoratorLayout.init(new HolderCreator() {
@Override
public ImageViewHolder createHolder() {
return new ImageViewHolder();
}
}, datas)
// 设置指示器，第一个代表选中，第二个代表未选中
.setPageIndicator(R.mipmap.icon_focusdot, R.mipmap.icon_defaultdot)
// 设置轮播停顿时间
.setDuration(3000)
// 指示器位置，居左、居中、居右
.setPageIndicatorAlign(DecoratorLayout.PageIndicatorAlign.CENTER_HORIZONTAL)
// 设置指示器是否可见
// .setPointViewVisible(true)
// 点击事件监听
.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClickListener(int position) {
Toast.makeText(MainActivity.this, "" + position, Toast.LENGTH_SHORT).show();
}
})
// 解决与父控件listView/ScrollView..滑动冲突
// .setViewPagerParent(parent)
// 开启轮播
.start();
// ViewPager改变监听
decoratorLayout.setOnViewPagerChangeListener(new DecoratorLayout.OnViewPagerChangeListener() {
@Override
public void onPageSelected(int position) {
}
});
}
@Override
protected void onDestroy() {
super.onDestroy();
decoratorLayout.stop();
}
// 自定义你的Holder，实现更多复杂的界面，不一定是图片翻页，其他任何控件翻页亦可。
private class ImageViewHolder implements Holder {
private ImageView imageView;
@Override
public View createView(Context context) {
// 创建数据
imageView = new ImageView(MainActivity.this);
return imageView;
}
@Override
public void UpdateUI(Context context, int position, Integer data) {
// 加载数据
imageView.setImageResource(data);
}
}
}
二、ChirdHeightAutoLayout，轮播器宽度不变，轮播器的高度随子控件的高度而变化。
1、在布局文件中引入ChirdHeightAutoLayout。
2、代码使用：（案例）
public class ChirdHeightAutoActivity extends AppCompatActivity {
// ChirdMaxHeightLayout T泛型
private ChirdHeightAutoLayout chirdMaxHeightLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_chirdheightauto);
chirdMaxHeightLayout = (ChirdHeightAutoLayout) findViewById(R.id.chirdmaxheightLayout);
List datas = new ArrayList<>();
datas.add(R.drawable.b);
datas.add(R.drawable.d);
// 初始化chirdMaxHeightLayout
chirdMaxHeightLayout.init(new HolderCreator() {
@Override
public ImageViewHolder createHolder() {
return new ImageViewHolder();
}
}, datas)
// 设置指示器，第一个代表选中，第二个代表未选中
.setPageIndicator(R.mipmap.icon_focusdot, R.mipmap.icon_defaultdot)
// 设置轮播停顿时间
.setDuration(3000)
// 指示器位置，居左、居中、居右
.setPageIndicatorAlign(ChirdHeightAutoLayout.PageIndicatorAlign.CENTER_HORIZONTAL)
// 设置指示器是否可见
// .setPointViewVisible(true)
// 设置ViewPager是否可以滚动
// .setScrollble(true)
// 点击事件监听
.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClickListener(int position) {
Toast.makeText(ChirdHeightAutoActivity.this, "" + position, Toast.LENGTH_SHORT).show();
}
})
// 开启轮播
.start();
// ViewPager状态改变监听
chirdMaxHeightLayout.setOnViewPagerChangeListener(new ChirdHeightAutoLayout.OnViewPagerChangeListener() {
@Override
public void onPageSelected(int position) {
}
});
}
@Override
protected void onDestroy() {
super.onDestroy();
chirdMaxHeightLayout.stop();
}
// 自定义你的Holder，实现更多复杂的界面，不一定是图片翻页，其他任何控件翻页亦可。
private class ImageViewHolder implements Holder {
private ImageView imageView;
@Override
public View createView(Context context) {
// 创建数据
imageView = new ImageView(ChirdHeightAutoActivity.this);
return imageView;
}
@Override
public void UpdateUI(Context context, int position, Integer data) {
// 加载数据
imageView.setImageResource(data);
}
}
}
三、GeneralLayout，设置宽和高，轮播器的自动轮播。
1、在布局文件中引入GeneralVpLayout。
2、代码使用：（案例）
public class GeneralActivity extends AppCompatActivity {
// GeneralVpLayout T泛型
private GeneralVpLayout generalVpLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_general);
generalVpLayout = (GeneralVpLayout) findViewById(R.id.generalVpLayout);
List datas = new ArrayList<>();
datas.add(R.drawable.b);
datas.add(R.drawable.d);
// 初始化generalVpLayout
generalVpLayout.init(new HolderCreator() {
@Override
public ImageViewHolder createHolder() {
return new ImageViewHolder();
}
}, datas)
// 设置指示器，第一个代表选中，第二个代表未选中
.setPageIndicator(R.mipmap.icon_focusdot, R.mipmap.icon_defaultdot)
// 设置轮播停顿时间
.setDuration(3000)
// 指示器位置，居左、居中、居右
.setPageIndicatorAlign(GeneralVpLayout.PageIndicatorAlign.CENTER_HORIZONTAL)
// 设置指示器是否可见
// .setPointViewVisible(true)
// 设置ViewPager是否可以滚动
// .setScrollble(true)
// 点击事件监听
.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClickListener(int position) {
Toast.makeText(GeneralActivity.this, "" + position, Toast.LENGTH_SHORT).show();
}
})
// 开启轮播
.start();
// ViewPager状态改变监听
generalVpLayout.setOnViewPagerChangeListener(new GeneralVpLayout.OnViewPagerChangeListener() {
@Override
public void onPageSelected(int position) {
}
});
}
@Override
protected void onDestroy() {
super.onDestroy();
generalVpLayout.stop();
}
// 自定义你的Holder，实现更多复杂的界面，不一定是图片翻页，其他任何控件翻页亦可。
private class ImageViewHolder implements Holder {
private ImageView imageView;
@Override
public View createView(Context context) {
// 创建数据
imageView = new ImageView(GeneralActivity.this);
return imageView;
}
@Override
public void UpdateUI(Context context, int position, Integer data) {
// 加载数据
imageView.setImageResource(data);
}
}
}
Github地址
阅读原文
微信公众号：书客创作