背景
最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码。于是自己封装了一下。本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不必每次重复写代码了。
效果图
实现分析
轮播图的功能就是实现左右滑动的广告、图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还需要在下面加一个指示器来标示滑动到了第几张轮播图。指示器我们可以用一个线性布局来根据要展示的轮播图设置显示的View,我们要做这样的一个控件没有什么特殊的效果,其实就是两个控件的组合,只是我们要在内部处理好它们之间的交互关系(其实就是ViewPager滚动的时候,下面指示器的展示),所以我们就用自定义控件当中的组合方式来实现。
下面开始
1、定义一个控件继承FrameLayout,写一个xml文件
public class CarouselView extends FrameLayout implements ViewPager.OnPageChangeListener { private Context context; private int totalCount =100;
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/gallery" android:layout_width="match_parent" android:layout_height="match_parent" android:unselectedAlpha="1"> </android.support.v4.view.ViewPager> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" android:gravity="center" android:layout_gravity="center|bottom" android:id="@+id/CarouselLayoutPage" android:padding="10dip"> </LinearLayout> </FrameLayout>
上面的代码把两个要用到的控件ViewPager和carouselLayout都包含在定义的CarouselView里面了,下面就是要获取
2、onFinishInflate()中获取我们需要的控件
@Override
protected void onFinishInflate() {
super.onFinishInflate()
onFinishInflate()方法是自定义控件中常用的一个方法,它表示从XML加载组件完成了,在该方法中我们通过LayoutInflater.from(context).inflate 获取到个ViewPager对象和carouselLayout对象,并对pageItemWidth进行了赋值。
同时为viewPager设置addOnPageChangeListener。这里别忘记调用addView();否则控件就展示不了啦!
3、通过设置set方法来获取数据,同时初始化界面效果
到这一步我们已经获取到了展示轮播图的ViewPager对象,那接下来要让它展示你肯定想到了写个类继承PagerAdapter,然后重写getCount,isViewFromObject,isViewFromObject,destroyItem等方法来让ViewPager展示轮播图。但是我们又不能写得太固定,因为可能每个人想要展示的数据不一样,所以我们定义一个接口来给外部使用的人写自己的逻辑。上代码: