这篇文章主要介绍了Android如何实现自定义轮播图效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
1、写一个布局,其中有ViewPager,TextView,LinearLayout.
ViewPager:用来承载图片
TextView:用来展示文字描述
LinearLayout:用来展示指示器
2、自定义ConstraintLayout, 在该控件中处理页面切换逻辑等.
1、获取自定义属性以及设置一些属性
public BannerY(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
initXmlParams(context, attrs, defStyleAttr);
fixParams();
initListener();
initLists();
initImageLoader();
}
/**
* 初始化ImageLoader
*/
private void initImageLoader() {
ImageLoader.getInstance().init(ImageLoaderConfiguration.createDefault(mContext));
}
/**
* 将布局填充进BannerY,获取VP,TextView,LinearLayout控件
*
* @param context
*/
private void initView(Context context) {
mContext = context;
LayoutInflater.from(context).inflate(R.layout.layout_banner, this);
mVp = (ViewPager) findViewById(R.id.vp);
mTvDesc = (TextView) findViewById(R.id.tv_desc);
mLLPoint = (LinearLayout) findViewById(R.id.ll_point);
}
/**
* 获取自定义属性
*
* @param context
* @param attrs
* @param defStyleAttr
*/
private void initXmlParams(Context context, AttributeSet attrs, int defStyleAttr) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BannerY, defStyleAttr, 0);
mPointSize = typedArray.getDimensionPixelSize(R.styleable.BannerY_point_size, 8);
mPointBG = typedArray.getResourceId(R.styleable.BannerY_point_bg, R.drawable.point_selector);
mInterval = typedArray.getInteger(R.styleable.BannerY_banner_interval, 2000);
mTvBottomMargin = typedArray.getDimensionPixelSize(R.styleable.BannerY_desc_bottom_margin, 8);
mPointBottomMargin = typedArray.getDimensionPixelSize(R.styleable.BannerY_point_bottom_margin, 8);
mDescColor = typedArray.getColor(R.styleable.BannerY_desc_color, Color.BLACK);
mDescSize = typedArray.getDimensionPixelSize(R.styleable.BannerY_desc_size, 14);
mScaleType = typedArray.getInt(R.styleable.BannerY_banner_scaletype, -1);
typedArray.recycle();
}
/**
* 通过自定义属性调整指示器与文字描述位置
*/
private void fixParams() {
//描述控件
LayoutParams mTvDescLayoutParams = (LayoutParams) mTvDesc.getLayoutParams();
mTvDescLayoutParams.bottomMargin = (int) mTvBottomMargin;
mTvDesc.setLayoutParams(mTvDescLayoutParams);
mTvDesc.setTextColor(mDescColor);
mTvDesc.getPaint().setTextSize(mDescSize);
//指示器
LayoutParams mLLPointLayoutParams = (LayoutParams) mLLPoint.getLayoutParams();
mLLPointLayoutParams.bottomMargin = (int) mPointBottomMargin;
mLLPoint.setLayoutParams(mLLPointLayoutParams);
}
/**
* 创建数据源集合以及创建Handler对象
*/
@SuppressLint("HandlerLeak")
private void initLists() {
mImageViewList = new ArrayList<>();
mDescList = new ArrayList<>();
mHandler = new Handler(Looper.getMainLooper()) {
@Override
public void handleMessage(@NonNull Message msg) {
super.handleMessage(msg);
// 获取ViewPager当前展示图片的索引值
int currentItem = mVp.getCurrentItem();
// 切换到下一个图片
mVp.setCurrentItem(currentItem + 1);
// 间隔一定时间发送一个消息,间隔时长由自定义属性值控制.
mHandler.sendEmptyMessageDelayed(1, mInterval);
}
};
}
/**
* 为ViewPager设置滑动监听
*/
private void initListener() {
mVp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
// ViewPager总共设置有Integer.MAX_VALUE个视图
// position取模,转换为mImageViewList对应的索引.
int realPosition = position % mImageViewList.size();
if (mDescList.size() == mImageViewList.size()) {
// 文字描述集合与图片集合长度相等,那么就为文字描述TextView展示对应的文字内容.
String desc = mDescList.get(realPosition);
mTvDesc.setText(desc);
} else {
if (BuildConfig.DEBUG) {
Log.d(TAG, "文字集合和图片集合长度不相等");
}
}
// 上一个页面对应的指示器设置为没有选中
mLLPoint.getChildAt(prePosition).setEnabled(false);
// 从装有指示器的LinearLayout中获得当前视图对应的指示器,然后设置指示器当前是选中,从而改变指示器颜色.
mLLPoint.getChildAt(realPosition).setEnabled(true);
prePosition = realPosition;
}
@Override
public void onPageScrollStateChanged(int state) {
if (state == ViewPager.SCROLL_STATE_DRAGGING) {//正在滑动
// 手动触碰ViewPager,使之正在处于滑动状态,Handler就停止发送消息.
isDragging = true;
mHandler.removeCallbacksAndMessages(null);
}
if (state == ViewPager.SCROLL_STATE_IDLE && isDragging) {//空闲状态
// ViewPager手动滑动停止之后,重新开启Handler发送消息.
mHandler.removeCallbacksAndMessages(null);
mHandler.sendEmptyMessageDelayed(1, mInterval);
}
}
});
}2、设置图片源集合
/**
* 设置图片源
* @param imagesRes
* @param <T>
*/
public <T> void setImagesRes(ArrayList<T> imagesRes) {
if (judgeLenght(imagesRes)) {
mImageViewList.clear();
// 初始化图片列表
initImageList(imagesRes);
// 创建Adapter
mBannerAdapter = new BannerAdapter(mImageViewList);
mVp.setAdapter(mBannerAdapter);
// 设置ViewPager当前视图为中间位置, 因为ViewPager视图个数为Integer.MAX_VALUE(在ViewPagerAdapter中设置的).
int position = Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2 % mImageViewList.size();
// 设置当前ViewPager展示哪个视图
mVp.setCurrentItem(position);
// 开启消息循环
mHandler.sendEmptyMessageDelayed(1, mInterval);
if (mDescList.size() == mImageViewList.size()) {
// 设置文字描述展示
mTvDesc.setText(mDescList.get(prePosition));
}
}
}
/**
* 初始化图片列表
*/
private void initImageList(ArrayList imagesRes) {
Class<?> imageResClass = imagesRes.get(0).getClass();
for (int i = 0; i < imagesRes.size(); i++) {
// 创建ImageView
ImageView imageView = createImageView(imagesRes, i, imageResClass);
// 为ImageView设置点击事件
setImageViewListener(imageView);
// 将ImageView添加进集合中
mImageViewList.add(imageView);
//添加指示器
addPoint(i);
}
}
/**
* 根据参数创建ImageView对象
*
* @param imagesRes
* @param i
* @param imageResClass
* @return
*/
private ImageView createImageView(ArrayList imagesRes, int i, Class<?> imageResClass) {
ImageView imageView = new ImageView(mContext);
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
imageView.setLayoutParams(layoutParams);
ImageView.ScaleType scaleType = sScaleTypeArray[mScaleType];
imageView.setScaleType(scaleType);
if (imageResClass.equals(String.class)) {
// 假如图片数据源集合是url,网址图片
String url = (String) imagesRes.get(i);
// 使用ImageLoader将图片展示到ImageView中
ImageLoader.getInstance().displayImage(url, imageView);
} else if (imageResClass.equals(Integer.class)) {
// 假如图片数据源集合是图片资源ID
Integer resId = (Integer) imagesRes.get(i);
imageView.setImageResource(resId);
}
return imageView;
}
/**
* 为ImageView对象设置点击事件和触摸事件
*
* @param imageView
*/
@SuppressLint("ClickableViewAccessibility")
private void setImageViewListener(ImageView imageView) {
imageView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 当手指在ImageView下按下,那么停止handler发送切换图片的消息
mHandler.removeCallbacksAndMessages(null);
break;
case MotionEvent.ACTION_UP:
// 当手指抬起,正常发送切换图片消息.
mHandler.removeCallbacksAndMessages(null);
mHandler.sendEmptyMessageDelayed(1, mInterval);
break;
}
return false;
}
});
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (mIClickBanner != null) {
// 当点击ImageView时,通过getTage()获取图片当前对应的视图索引值.
// 该值是在ViewPagerAdapter中的instantiateItem()中设置的.
int positon = (int) v.getTag();
int i = positon % mImageViewList.size();
mIClickBanner.click(i);
} else {
if (BuildConfig.DEBUG) {
Log.e(TAG, "图片回调方法为不存在");
}
}
}
});
}3、BannerY的Adapter
public class BannerAdapter<T> extends PagerAdapter {
private final static String TAG = BannerAdapter.class.getName();
ArrayList<ImageView> mImageViewList;
/**
* @param mImageViewList ImageView 控件列表,该列表中中的IamgeView都设置了图片资源还有点击事件等.
*/
public BannerAdapter(ArrayList<ImageView> mImageViewList) {
this.mImageViewList = mImageViewList;
}
@Override
public int getCount() {
// 设置ViewPager的视图个数,Integer.MAX_VALUE是一个非常大的数字, 不管轮询多久都很难到尽头.
return Integer.MAX_VALUE;
}
@SuppressLint("ClickableViewAccessibility")
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, final int position) {
// position这个数字很大, 取模之后就能够对应mImageViewList集合中的索引值了.
final int realPosition = position % mImageViewList.size();
ImageView imageView = mImageViewList.get(realPosition);
// 将索引值与ImageView绑定,当被点击的时候可以取出该索引值.
imageView.setTag(position);
ViewParent viewParent = imageView.getParent();
if (viewParent != null) {
// 这里是防止ViewPager重复添加图片.
((ViewGroup) viewParent).removeView(imageView);
}
// 将图片添加进ViewPager中
container.addView(imageView);
return imageView;
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
}
}感谢你能够认真阅读完这篇文章，希望小编分享的“Android如何实现自定义轮播图效果”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
