Android广告页循环播放

　　摘要：项目要求做一个广告页，实现几秒更换一次广告页，下方还有指示第几张广告页，同样也支持手动左滑或右滑。

　　1.准备好粘贴5个有关广告页的类。

　　　　①BaseViewPager==>自定义高度的ViewPager

public class BaseViewPager extends ViewPager {
    private boolean scrollable = true;

    public BaseViewPager(Context context) {
        super(context);
    }

    public BaseViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 设置viewpager是否可以滚动
     * 
     * @param enable
     */
    public void setScrollable(boolean enable) {
        scrollable = enable;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        if (scrollable) {
            return super.onInterceptTouchEvent(event);
        } else {
            return false;
        }
    }
}

　　　　②CycleViewPager==>实现可循环、可轮播的viewPager

@SuppressLint("NewApi")
public class CycleViewPager extends Fragment implements OnPageChangeListener {
    
    private List<ImageView> imageViews = new ArrayList<ImageView>();
    private ImageView[] indicators;
    private FrameLayout viewPagerFragmentLayout;
    private LinearLayout indicatorLayout; // 指示器
    private BaseViewPager viewPager;
    private BaseViewPager parentViewPager;
    private ViewPagerAdapter adapter;
    private CycleViewPagerHandler handler;
    private int time = 5000; // 默认轮播时间
    private int currentPosition = 0; // 轮播当前位置
    private boolean isScrolling = false; // 滚动框是否滚动着
    private boolean isCycle = false; // 是否循环
    private boolean isWheel = false; // 是否轮播
    private long releaseTime = 0; // 手指松开、页面不滚动时间，防止手机松开后短时间进行切换
    private int  WHEEL = 100; // 转动
    private int WHEEL_WAIT = 101; // 等待
    private ImageCycleViewListener mImageCycleViewListener;
    private List<MyImage> infos;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = LayoutInflater.from(getActivity()).inflate(
                R.layout.view_cycle_viewpager_contet, null);

        viewPager = (BaseViewPager) view.findViewById(R.id.viewPager);
        indicatorLayout = (LinearLayout) view.findViewById(R.id.layout_viewpager_indicator);//就是那个白点吧
        viewPagerFragmentLayout = (FrameLayout) view.findViewById(R.id.layout_viewager_content);

        handler = new CycleViewPagerHandler(getActivity()) {

            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                if (msg.what == WHEEL && imageViews.size() != 0) {
                    if (!isScrolling) {
                        int max = imageViews.size() + 1;
                        int position = (currentPosition + 1) % imageViews.size();
                        viewPager.setCurrentItem(position, true);
                        if (position == max) { // 最后一页时回到第一页
                            viewPager.setCurrentItem(1, false);
                        }
                    }

                    releaseTime = System.currentTimeMillis();
                    handler.removeCallbacks(runnable);
                    handler.postDelayed(runnable, time);
                    return;
                }
                if (msg.what == WHEEL_WAIT && imageViews.size() != 0) {
                    handler.removeCallbacks(runnable);
                    handler.postDelayed(runnable, time);
                }
            }
        };

        return view;
    }

    public void setData(List<ImageView> views, List<MyImage> list, ImageCycleViewListener listener) {
        setData(views, list, listener, 0);
    }

    /**
     * 初始化viewpager
     * 
     * @param views
     *            要显示的views
     * @param showPosition
     *            默认显示位置
     */
    public void setData(List<ImageView> views, List<MyImage> list, ImageCycleViewListener listener, int showPosition) {
        mImageCycleViewListener = listener;
        infos = list;
        this.imageViews.clear();

        if (views.size() == 0) {
            viewPagerFragmentLayout.setVisibility(View.GONE);
            return;
        }

        for (ImageView item : views) {
            this.imageViews.add(item);
        }

        int ivSize = views.size();

        // 设置指示器
        indicators = new ImageView[ivSize];
        if (isCycle)
            indicators = new ImageView[ivSize - 2];
        indicatorLayout.removeAllViews();
        for (int i = 0; i < indicators.length; i++) {
            View view = LayoutInflater.from(getActivity()).inflate(
                    R.layout.view_cycle_viewpager_indicator, null);
            indicators[i] = (ImageView) view.findViewById(R.id.image_indicator);
            indicatorLayout.addView(view);
        }

        adapter = new ViewPagerAdapter();

        // 默认指向第一项，下方viewPager.setCurrentItem将触发重新计算指示器指向
        setIndicator(0);

        viewPager.setOffscreenPageLimit(3);
        viewPager.setOnPageChangeListener(this);
        viewPager.setAdapter(adapter);
        if (showPosition < 0 || showPosition >= views.size())
            showPosition = 0;
        if (isCycle) {
            showPosition = showPosition + 1;
        }
        viewPager.setCurrentItem(showPosition);

    }

    /**
     * 设置指示器居中，默认指示器在右方
     */
    public void setIndicatorCenter() {
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                RelativeLayout.LayoutParams.WRAP_CONTENT,
                RelativeLayout.LayoutParams.WRAP_CONTENT);
        params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
        params.addRule(RelativeLayout.CENTER_HORIZONTAL);
        indicatorLayout.setLayoutParams(params);
    }
    /**
     * 是否循环，默认不开启，开启前，请将views的最前面与最后面各加入一个视图，用于循环
     * 
     * @param isCycle
     *            是否循环
     */
    public void setCycle(boolean isCycle) {
        this.isCycle = isCycle;
    }

    /**
     * 是否处于循环状态
     * 
     * @return
     */
    public boolean isCycle() {
        return isCycle;
    }

    /**
     * 设置是否轮播，默认不轮播,轮播一定是循环的
     * 
     * @param isWheel
     */
    public void setWheel(boolean isWheel) {
        this.isWheel = isWheel;
        isCycle = true;
        if (isWheel) {
            handler.postDelayed(runnable, time);
        }
    }

    /**
     * 是否处于轮播状态
     * 
     * @return
     */
    public boolean isWheel() {
        return isWheel;
    }

    final Runnable runnable = new Runnable() {

        @Override
        public void run() {
            if (getActivity() != null && !getActivity().isFinishing()
                    && isWheel) {
                long now = System.currentTimeMillis();
                // 检测上一次滑动时间与本次之间是否有触击(手滑动)操作，有的话等待下次轮播
                if (now - releaseTime > time - 500) {
                    handler.sendEmptyMessage(WHEEL);
                } else {
                    handler.sendEmptyMessage(WHEEL_WAIT);
                }
            }
        }
    };

    /**
     * 释放指示器高度，可能由于之前指示器被限制了高度，此处释放
     */
    public void releaseHeight() {
        getView().getLayoutParams().height = RelativeLayout.LayoutParams.MATCH_PARENT;
        refreshData();
    }

    /**
     * 设置轮播暂停时间，即没多少秒切换到下一张视图.默认5000ms
     * 
     * @param time
     *            毫秒为单位
     */
    public void setTime(int time) {
        this.time = time;
    }

    /**
     * 刷新数据，当外部视图更新后，通知刷新数据
     */
    public void refreshData() {
        if (adapter != null)
            adapter.notifyDataSetChanged();
    }

    /**
     * 隐藏CycleViewPager
     */
    public void hide() {
        viewPagerFragmentLayout.setVisibility(View.GONE);
    }

    /**
     * 返回内置的viewpager
     * 
     * @return viewPager
     */
    public BaseViewPager getViewPager() {
        return viewPager;
    }

    /**
     * 页面适配器 返回对应的view
     * 
     * @author Yuedong Li
     * 
     */
    private class ViewPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return imageViews.size();
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

        @Override
        public View instantiateItem(ViewGroup container, final int position) {
            ImageView v = imageViews.get(position);
            if (mImageCycleViewListener != null) {
                v.setOnClickListener(new OnClickListener() {
                    
                    @Override
                    public void onClick(View v) {
                        mImageCycleViewListener.onImageClick(infos.get(currentPosition - 1), currentPosition, v);
                    }
                });
            }
            container.addView(v);
            return v;
        }

        @Override
        public int getItemPosition(Object object) {
            return POSITION_NONE;
        }
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
        if (arg0 == 1) { // viewPager在滚动
            isScrolling = true;
            return;
        } else if (arg0 == 0) { // viewPager滚动结束
            if (parentViewPager != null)
                parentViewPager.setScrollable(true);

            releaseTime = System.currentTimeMillis();

            viewPager.setCurrentItem(currentPosition, false);
            
        }
        isScrolling = false;
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
    }

    @Override
    public void onPageSelected(int arg0) {
        int max = imageViews.size() - 1;
        int position = arg0;
        currentPosition = arg0;
        if (isCycle) {
            if (arg0 == 0) {
                currentPosition = max - 1;
            } else if (arg0 == max) {
                currentPosition = 1;
            }
            position = currentPosition - 1;
        }
        setIndicator(position);
    }

    /**
     * 设置viewpager是否可以滚动
     * 
     * @param enable
     */
    public void setScrollable(boolean enable) {
        viewPager.setScrollable(enable);
    }

    /**
     * 返回当前位置,循环时需要注意返回的position包含之前在views最前方与最后方加入的视图，即当前页面试图在views集合的位置
     * 
     * @return
     */
    public int getCurrentPostion() {
        return currentPosition;
    }

    /**
     * 设置指示器
     * 
     * @param selectedPosition
     *            默认指示器位置
     */
    private void setIndicator(int selectedPosition) {
        for (int i = 0; i < indicators.length; i++) {
            indicators[i].setBackgroundResource(R.mipmap.icon_point);
        }
        if (indicators.length > selectedPosition)
            indicators[selectedPosition].setBackgroundResource(R.mipmap.icon_point_pre);
    }

    /**
     * 如果当前页面嵌套在另一个viewPager中，为了在进行滚动时阻断父ViewPager滚动，可以 阻止父ViewPager滑动事件
     * 父ViewPager需要实现ParentViewPager中的setScrollable方法
     */
    public void disableParentViewPagerTouchEvent(BaseViewPager parentViewPager) {
        if (parentViewPager != null)
            parentViewPager.setScrollable(false);
    }

    
    /**
     * 轮播控件的监听事件
     * 
     * @author minking
     */
    public static interface ImageCycleViewListener {

        /**
         * 单击图片事件
         * 
         * @param position
         * @param imageView
         */
        public void onImageClick(MyImage info, int postion, View imageView);
    }
}

　　　　   ③CycleViewPagerHandler==>为了防止内存泄漏，定义外部类，防止内部类对外部类的引用

public class CycleViewPagerHandler extends Handler {
     Context context;

    public CycleViewPagerHandler(Context context) {
        this.context = context;
    }
}

　　　　    ④ViewFactory==>创建ImageView工厂，获取ImageView视图的同时加载显示url

public class ViewFactory {

    /**
     * 获取ImageView视图的同时加载显示url
     * 
     * @param
     * @return
     */
    public static ImageView getImageView(Context context, String url) {
        ImageView imageView = (ImageView)LayoutInflater.from(context).inflate(
                R.layout.view_banner, null);
        ImageLoader.getInstance().displayImage(url, imageView);//最核心的部分
        return imageView;
    }
}

　　　　     ⑤MyImage==>这是广告页的bean类

class MyImage {

    var link: String? = null
    var image:String?=null
    var title:String?=null

    constructor():super()
    constructor(image: String) : super() {
        this.image = image
    }
    constructor(image:String,link:String,title:String){
        this.image=image
        this.link=link
        this.title=title
    }

    override fun toString(): String {
        return "MyImage[link=$link,image=$image，title=$title]"
    }
}

　　　

　　　2.从服务器中拿到图片的链接地址，一般广告页都是从服务器拿到的数据。本地的也可以，而且更加简单了。我就拿前者举例吧。

　　　　下面的代码是我自己的一个请求，里面有很多东西都是自己定义的东西。　

　　　　如：LogUtils.d_debugprint()是自己封装好的一个日志输出的类。

　　　　　　Constant也是自己封装好的常量。

　　　　　　HttpUtil.httpPost也是自己封装的网络请求的类。

　　　　　　JsonUtil.get_key_string也是自己封装Json解析的类。

　　　　　　MyImage是自己定义的一个Bean类。

　　　　　　Toasty是引用的第三方库toast的类，用来提示用户。

　　　　　　initialize()是自己初始化广告页，后面第三步就是写这个函数了。

　　　　

　　　　　　解释清楚之后，请求的函数如下：

 private fun getADfromServer() {
        var urlPath = ""
        var sign = ""
        val encode = Constant.ENCODE
        val school = Constant.SCHOOLDEFULT
        if (LogUtils.APP_IS_DEBUG) {
            urlPath = Constant.BASEURLFORTEST + Constant.School_AD
            sign = MD5Util.md5(Constant.SALTFORTEST)
        } else {
            urlPath = Constant.BASEURLFORRELEASE + Constant.School_AD
            sign = MD5Util.md5(Constant.SALTFORRELEASE)
        }
        val params = mapOf<String, Any?>("school" to school,"sign" to sign)
        LogUtils.d_debugprint(TAG, Constant.TOSERVER + urlPath + "
提交的map=" + params.toString())
        Thread(Runnable {
            getAdfromServer= HttpUtil.httpPost(urlPath,params,encode)
           // LogUtils.d_debugprint(TAG,Constant.GETDATAFROMSERVER+getAdfromServer)
            val getCode:String
            var msg:String?=null
            var result:String
            var getData:List<Map<String,Any?>>
            getCode= JsonUtil.get_key_string(Constant.Server_Code,getAdfromServer!!)
            if(Constant.RIGHTCODE.equals(getCode)) {
                handler_result1.post {
                    msg = JsonUtil.get_key_string(Constant.Server_Msg, getAdfromServer!!)
                    result = JsonUtil.get_key_string(Constant.Server_Result, getAdfromServer!!)
                    getData = JsonUtil.getListMap("data", result)//=====这里可能发生异常
                    LogUtils.d_debugprint(TAG, "json解析出来的对象是=" + getData.toString())
                    if (getData != null&&getData.size>0) {
                        for (i in getData.indices) {
                            val myImage=MyImage()
                            if(getData[i].getValue("link").toString()!=null&&getData[i].getValue("image").toString()!=null&&getData[i].getValue("title").toString()!=null) {
                                myImage.link = getData[i].getValue("link").toString()
                                myImage.image = getData[i].getValue("image").toString()
                                myImage.title = getData[i].getValue("title").toString()
                                myImageList.add(myImage)//=====这里保存了所有广告信息
                            }else{
                                Toasty.error(context,Constant.SERVERBROKEN).show()
                            }
                        }
                        initialize() //初始化顶部导航栏
                    }else{
                        val myImage=MyImage()
                        myImage.link=""
                        myImage.image=""
                        myImage.title=""
                        myImageList.add(myImage)
                        //Toasty.error(context,Constant.SERVERBROKEN).show()
                    }
                }
            }
        }).start()
    }

　　　3.然后就是initialize()函数了

　　　　说明一下==>>

　　　　myImageOverAD是覆盖在广告页上的一张默认图片，如果没有网，或者请求失败的时候，将显示这张图片。

　　　　cycleViewPager是广告栏中的一个叫fragment的布局。

　　　　views是广告栏的一个ArrayList<ImageView>()，可以动态添加ImageView

　　　　mAdCycleViewListener是广告页点击的监听器，第四步会详细讲。

 @SuppressLint("NewApi")
    private fun initialize() {
        myImageOverAD!!.visibility=View.GONE
        cycleViewPager = activity.fragmentManager.findFragmentById(R.id.oneFm_fragment_cycle_viewpager_content) as CycleViewPager

        views.add(ViewFactory.getImageView(context, myImageList[myImageList.size - 1].image)) // 将最后一个ImageView添加进来
        for (i in myImageList.indices) {
            views.add(ViewFactory.getImageView(context, myImageList[i].image))
        }
        views.add(ViewFactory.getImageView(context, myImageList[0].image)) // 将第一个ImageView添加进来
        cycleViewPager!!.isCycle = true // 设置循环，在调用setData方法前调用
        cycleViewPager!!.setData(views, myImageList, mAdCycleViewListener) // 在加载数据前设置是否循环
        cycleViewPager!!.isWheel = true //设置轮播
        cycleViewPager!!.setTime(5000) // 设置轮播时间，默认5000ms
        cycleViewPager!!.setIndicatorCenter() //设置圆点指示图标组居中显示，默认靠右
    }

　　　4.然后是mAdCycleViewListener监听器的实现了。

　　　　说明一下==>>

　　　　ADWebView是点击广告页要调整的webView。

　　　　R.anim.slide_left_out是一个从左边出去的动画。

　　　　源码如下：

private val mAdCycleViewListener = CycleViewPager.ImageCycleViewListener { info, position, imageView ->
        var position = position
        if (cycleViewPager!!.isCycle) {
            position = position - 1
            //Toasty.info(context,"标题："+info.title+ "
链接：" + info.link).show()

            val bundle=Bundle()
            bundle.putString("title",info.title)
            bundle.putString("link",info.link)
            val intent:Intent=Intent(context,ADWebView::class.java)
            intent.putExtras(bundle)
            startActivity(intent)
            activity.overridePendingTransition(0,R.anim.slide_left_out)
        }
    }

　　 5.广告页的布局代码差点忘记了。

　　　   说明一下==>>

　　　　这里的fragment才是主角，下方的ImageView是覆盖在广告页上的一张默认图片，在没有网获取没有成功请求到服务器的时候显示的图片。

 <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="350pt">

    <fragment
        android:id="@+id/oneFm_fragment_cycle_viewpager_content"
        android:name="com.guangdamiao.www.mew_android_debug.banner.CycleViewPager"
        android:layout_width="match_parent"
        android:layout_height="350pt"
        />

    <ImageView
        android:id="@+id/oneFm_fragment_cycle_viewpager_content_over"
        android:layout_width="match_parent"
        android:layout_height="360pt"
        android:src="@drawable/one_overad"
        android:visibility="visible"
        android:scaleType="centerCrop"
        />

   </RelativeLayout>

　　效果如下：