Android自定义控件实现简单的轮播图控件

最近要做一个轮播图的效果，网上看了几篇文章，基本上都能找到实现，效果还挺不错，但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码。于是自己封装了一下。本篇轮播图实现原理原文出处：循环广告位组件的实现，这里只是做了下封装成一个控件，不必每次重复写代码了。

效果图：

实现分析
轮播图的功能就是实现左右滑动的广告、图片信息展示，那我们就用ViewPager来实现，由于考虑到用户体验，我们还需要在下面加一个指示器来标示滑动到了第几张轮播图。指示器我们可以用一个线性布局来根据要展示的轮播图设置显示的View,我们要做这样的一个控件没有什么特殊的效果，其实就是两个控件的组合，只是我们要在内部处理好它们之间的交互关系（其实就是ViewPager滚动的时候，下面指示器的展示），所以我们就用自定义控件当中的组合方式来实现。
下面开始

1、定义一个控件继承FrameLayout,写一个xml文件

public class CarouselView extends FrameLayout implements ViewPager.OnPageChangeListener {
  private Context context;
  private int totalCount =100;//总数，这是为实现无限滑动设置的
  private int showCount;//要显示的轮播图数量
  private int currentPosition =0;//当前ViewPager的位置
  private ViewPager viewPager;
  private LinearLayout carouselLayout;//展示指示器的布局
  private Adapter adapter;
  private int pageItemWidth;//每个指示器的宽度
  private boolean isUserTouched = false;
  public CarouselView(Context context) {
    super(context);
    this.context = context;
  }
  public CarouselView(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
  }
  public CarouselView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    this.context = context;
  }
<?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();
    View view = LayoutInflater.from(context).inflate(R.layout.carousel_layout,null);
    this.viewPager = (ViewPager) view.findViewById(R.id.gallery);
    this.carouselLayout = (LinearLayout)view.findViewById(R.id.CarouselLayoutPage);
    pageItemWidth = ConvertUtils.dip2px(context,5);
    this.viewPager.addOnPageChangeListener(this);
    addView(view);
  }

onFinishInflate()方法是自定义控件中常用的一个方法，它表示从XML加载组件完成了，在该方法中我们通过LayoutInflater.from(context).inflate 获取到个ViewPager对象和carouselLayout对象，并对pageItemWidth进行了赋值。
同时为viewPager设置addOnPageChangeListener。这里别忘记调用addView();否则控件就展示不了啦！

3、通过设置set方法来获取数据，同时初始化界面效果
到这一步我们已经获取到了展示轮播图的ViewPager对象，那接下来要让它展示你肯定想到了写个类继承PagerAdapter，然后重写getCount，isViewFromObject，isViewFromObject，destroyItem等方法来让ViewPager展示轮播图。但是我们又不能写得太固定，因为可能每个人想要展示的数据不一样，所以我们定义一个接口来给外部使用的人写自己的逻辑。上代码：

//定义一个接口让外部设置展示的View
public interface Adapter{
    boolean isEmpty();
    View getView(int position);
    int getCount();
  }
//ViewPager的适配器
class ViewPagerAdapter extends PagerAdapter {
    @Override
    public int getCount() {
      return totalCount;
    }
    @Override
    public boolean isViewFromObject(View view, Object object) {
      return view==object;
    }
    @Override
    public Object isViewFromObject(ViewGroup container, int position) {
      position %= showCount;
      //调用接口的getView()获取使用者要展示的View;
      View view = adapter.getView(position);
      container.addView(view);
      return view;
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
      container.removeView((View) object);
    }
    @Override
    public int getItemPosition(Object object) {
      return super.getItemPosition(object);
    }
    @Override
    public void finishUpdate(ViewGroup container) {
      super.finishUpdate(container);
      int position = viewPager.getCurrentItem();
      //实现Viewpager到第一页的实现能向左滑动
      if (position==0){
        position=showCount;
        viewPager.setCurrentItem(position,false);
      }else if (position==totalCount-1){//ViewPager到最后一页的实现向又滑动
        position = showCount - 1;
        viewPager.setCurrentItem(position,false);
      }
    }
  }
//为外部提供设置数据源的方法,同时为ViewPager做展示
public void setAdapter(Adapter adapter){
    this.adapter = adapter;
    if (adapter!=null){
      init();
    }
  }

上面的代码就是定义了一个接口让外部来设置数据，提供setAdapter来为adapter赋值，同时初始化界面效果，init()方法中就是数据的初始化，代码如下：

private void init() {
    viewPager.setAdapter(null);
    carouselLayout.removeAllViews();//清空之前的数据
    if (adapter.isEmpty()){
      return;
    }
    int count = adapter.getCount();
    showCount = adapter.getCount();
    for (int i=0;i<count;i++){
      View view = new View(context);
      //用来做指示器的View,通过state来做展示效果
      if (currentPosition==i){
        view.setPressed(true);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(pageItemWidth + ConvertUtils.dip2px(context,3),pageItemWidth + ConvertUtils.dip2px(context,3));
        params.setMargins(pageItemWidth, 0, 0, 0);
        view.setLayoutParams(params);
      }else {
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(pageItemWidth,pageItemWidth);
        params.setMargins(pageItemWidth,0,0,0);
        view.setLayoutParams(params);
      }
      view.setBackgroundResource(R.drawable.carousel_layout_page);
      carouselLayout.addView(view);
    }
    viewPager.setAdapter(new ViewPagerAdapter());
    viewPager.setCurrentItem(0);
    //让手指触碰到的时候自动轮播不起效
    this.viewPager.setOnTouchListener(new OnTouchListener() {
      @Override
      public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()){
          case MotionEvent.ACTION_DOWN:
          case MotionEvent.ACTION_MOVE:
            isUserTouched = true;
            break;
          case MotionEvent.ACTION_UP:
            isUserTouched = false;
            break;
        }
        return false;
      }
    });
    mTimer.schedule(mTimerTask, 3000, 3000);
  }

主要的逻辑代码就是这样啦，一个轮播图的控件就做好了。下面来看一下使用：

4、使用
xml中写我们的轮播图控件:

<com.yangqiangyu.test.carouselview.CarouselView
    android:layout_width="match_parent"
    android:layout_height="220dp">
 </com.yangqiangyu.test.carouselview.CarouselView>

java代码中获取控件，同时设置接口

 CarouselView carouselView = (CarouselView) findViewById(R.id.CarouselView);
  carouselView.setAdapter(new CarouselView.Adapter() {
   @Override
   public boolean isEmpty() {
    return false;
   }
   @Override
   public View getView(int position) {
    View view = mInflater.inflate(R.layout.item,null);
    ImageView imageView = (ImageView) view.findViewById(R.id.image);
    imageView.setImageResource(mImagesSrc[position]);
    return view;
   }
   @Override
   public int getCount() {
    return mImagesSrc.length;
   }
  });

返回是否为空，在getView(int position)中return我们想返回的View，就是这么简单了啦。

希望本文所述对大家学习Android软件编程有所帮助。

您可能感兴趣的文章:Android开发在轮播图片上加入点击事件的方法Android实现自定义轮播图片控件示例Android实现自定义轮播图片控件详解Android实现轮播图片展示效果Android开发实现的自动换图片、轮播图效果示例Android ViewPager实现轮播图效果Android实现炫酷轮播图效果Android实现ViewPage轮播图效果Android自定义控件实现优雅的广告轮播图Android轮播图点击图片放大效果的实现方法