自定义控件（三）

有的童鞋可能看了前两节之后，觉得本博客逼格不够高，说的太简单了。那我们就来点干货吧！那么来点经常用到的复合控件:图片轮播~

图片轮播，大部分的App里面有这个功能，主要用来播放广告等~

那我们来简单的分析一下思路：怎么写这玩意？

1.首先他是一个能不断循环，并能通过手指，左右切换！那我们就想到了ViewPager

2.下面会有几个白色小点，跟随图片的切换，也不停的切换

那我们就可以弄一个复合控件，让ViewPager和下面的几个白色小点合体！实现我们希望的样式

（一）第一步，通过inflate得到自定义的组合控件的View，然后根据传入的url的数目，来确定有几个point

我这里就伪造几个url：

private void init(Context context) {
    urls = new ArrayList<>();
    urls.add("http://f.hiphotos.baidu.com/image/pic/item/50da81cb39dbb6fd3702bf140e24ab18972b37a2.jpg");
    urls.add("http://c.hiphotos.baidu.com/image/pic/item/5bafa40f4bfbfbed91fbb0837ef0f736aec31faf.jpg");
    urls.add("http://h.hiphotos.baidu.com/image/pic/item/4ec2d5628535e5dd2820232370c6a7efce1b623a.jpg");

//这是bannerView的根布局

       View inflaterView = LayoutInflater.from(getContext()).inflate(R.layout.banner_view, this);

       ll_points = (LinearLayout)inflaterView.findViewById(R.id.ll_points);
       	

2.然后就可以根据list的size来确定point的数目啦

/**
 * 初始化dot
 */
private void initPoints(Context context){
    for (int i = 0; i < urls.size(); i++) {
        View view = new View(context);
        LayoutParams params = new LayoutParams(15,15);
        if(i!=0){
            params.leftMargin = 5;
        }
        view.setLayoutParams(params);
        view.setBackgroundResource(R.drawable.selector_dot);
        ll_points.addView(view);
    }
}

这样就对Linearlayout里面添加了几个point

三：那么接下来就要对Viewpager进行改造了，我们自定义一个BannerAdapter 继承PagerAdapter

/**
 * 返回多少page:返回100，是伪无限循环
 */
@Override
public int getCount() {
    return 100;
}

/**
 * true: 表示不去创建，使用缓存  false:去重新创建
 * view： 当前滑动的view
 * object：将要进入的新创建的view，由instantiateItem方法创建
 */
@Override
public boolean isViewFromObject(View view, Object object) {
    return view==object;
}

/**
 * 类似于BaseAdapger的getView方法
 * 用了将数据设置给view
 */
@Override
public Object instantiateItem(ViewGroup container, int position) {
    View view = View.inflate(getContext(), R.layout.adapter_ad, null);
    ImageView imageView = (ImageView) view.findViewById(R.id.image);

    String url = urls.get(position % urls.size());
    mImageLoader.displayImage(url, imageView,options);
    container.addView(view);//一定不能少，将view加入到viewPager中
    return view;
}

/**
 * 销毁page
 * position： 当前需要消耗第几个page
 * object:当前需要消耗的page
 */
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    container.removeView((View) object);
}

4：左右滑动，下面的point肯定也要变化，那么我们需要对Viewpager进行监听

private void initListener() {
    vp_iv.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageSelected(int position) {
            updateIntroAndDot();
        }

        @Override
        public void onPageScrolled(int position, float positionOffset,
                                   int positionOffsetPixels) {
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
}

private void updateIntroAndDot() {
    int currentPage = vp_iv.getCurrentItem()%urls.size();
    for (int i = 0; i < ll_points.getChildCount(); i++) {
        ll_points.getChildAt(i).setEnabled(i==currentPage);
    }
}

5：那么怎么让它进行轮回播放呢？ 我们可以定义一个方法，让它播放

//每过三秒，进行一次轮播
public void start(){
    timer = new Timer();
    timer.schedule(new BannerTask(),3000,3000);
}

class BannerTask extends TimerTask{
    @Override
    public void run() {
        handler.sendEmptyMessage(0);
    }
}

public static Handler handler = new Handler(){
    @Override
    public void handleMessage(Message msg) {
        switch (msg.what){
            case 0:
                int item = vp_iv.getCurrentItem();
                item ++;
                vp_iv.setCurrentItem(item);
                break;
        }
    }
};

这么做就实现了酷酷的轮回播放啦！

下载地址;http://download.csdn.net/detail/qq_29375071/9381742