指尖菜谱App从0到1-无限循环轮播广告的实现

广告栏的实现

在上一篇文章的基础之上，接下来，将要丰富我们应用，向应用中添加广告栏，效果图如下：

广告栏主要实现如下功能：
1、广告栏的广告图片无限循环的向左滚动；
2、广告可点击，触发相应的事件；
3、广告的图片从网上载入；
4、当用户对广告进行滑动操作时，暂停广告继续滚动；
5、广告位置点的加入；

控件选用：
根据综合考虑，决定使用ViewPager实现。

这一块的代码将写在MainFragment中。
布局文件xml代码如下：
首先是MainFragment中的主要布局代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/main_AD_viewpager"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"
        android:background="@color/colorBackground" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="120dp"
        android:orientation="horizontal">

        <EditText
            style="@style/TextAppearance.AppCompat.Body1"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@color/colorWhiteAlpha"
            android:hint="输入菜名"
            android:padding="6dp" />

    </LinearLayout>

    <RadioGroup
        android:id="@+id/main_rg_adPoint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    </RadioGroup>
</RelativeLayout>

其中viewpager用于显示广告，而RadioGroup则用户显示点，以确定当前广告的位置，EditText是用于用户属于菜名，搜索用到，暂时先不管它。

那么要实现广告的无限滚动该如何实现呢？如下对ViewPager的实现代码

class MyADPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @TargetApi(Build.VERSION_CODES.LOLLIPOP)
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView iv = new ImageView(getContext());
            iv.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
            //使广告循环加入到ViewPager页面
            if (mADBitmapList.size() > 0) {
                Bitmap mBitmap = mADBitmapList.get(position % mADBitmapList.size());
     MyApplication.screenHeight);

                BitmapDrawable drawable = new BitmapDrawable(getResources(), mBitmap);
                iv.setBackground(drawable);
            } else {
                iv.setBackground(getResources().getDrawable(R.drawable.page3, null));
            }
            container.addView(iv);
            return iv;
        }

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

    }

重点在于设置
public int getCount() {
return Integer.MAX_VALUE;
}
这样就能使ViewPager的数量集达到最大，当然你也可以设置其他较大的数量级。

初始化ViewPager

private void initViewPager() {
        MyADPagerAdapter mADPagerAdapter = new MyADPagerAdapter();
        mADPager.setAdapter(mADPagerAdapter);
        mADPager.setCurrentItem(Integer.MAX_VALUE / 2);
        mADPager.addOnPageChangeListener(this);
        mADPager.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        handler.removeMessages(0x1);
                        break;
                    case MotionEvent.ACTION_UP:
                        handler.sendEmptyMessageDelayed(0x1, 3000);
                        break;
                    case MotionEvent.ACTION_OUTSIDE:
                        handler.sendEmptyMessageDelayed(0x1, 3000);
                        break;
                }
                return false;
            }
        });
        initAD();
    }

mADPager.setCurrentItem(Integer.MAX_VALUE / 2);将广告显示的位置为中间位置，这样无聊用户是向左还是向右，可以一直滑到，直至为0或者MAX_VALUE，当然用户也没那么无聊。

对ViewPager设置TouchListener，目的在于用户触摸ViewPager时时其暂停滚动，滚动的实现很简单如下：

。。。
handler.sendEmptyMessageDelayed(0x1, 3000);
。。。
Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (msg.what == 0x1) {
                mADPager.setCurrentItem(mADPager.getCurrentItem() + 1);
                handler.sendEmptyMessageDelayed(0x1, 3000);
            }
        }
    };

这样就能使，viewpager每过3秒切换到下一页面。

好了，基本上上面的代码实现了广告的无限滚动。

接着是实现广告列表点

//初始化广告point
    private void initAD() {
        for (int i = 0; i < MyApplication.ADURIS.length; i++) {
            RadioButton radioButton = (RadioButton) LayoutInflater.from(getContext()).inflate(R.layout.ad_point, null, false);
            mADRBList.add(radioButton);
            pointGroup.addView(radioButton);
        }
    }

上面代码根据广告数量的多少，对点进行了动态的加入，ad_point布局如下：

<?xml version="1.0" encoding="utf-8"?>
<RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/radio"
    style="@style/RadioButton"
    android:layout_width="wrap_content"
    android:drawableLeft="@drawable/ic_point"
    android:padding="8dp" />

ic_point的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="oval">
            <corners android:radius="5dp" />
            <size android:width="8dp" android:height="8dp"/>
            <solid android:color="@color/colorBackground" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <corners android:radius="5dp" />
            <size android:width="8dp" android:height="8dp"/>
            <solid android:color="@color/colorPoint" />
        </shape>
    </item>
</selector>

为了能够根据广告来显示对应的点，因此我们需要实现Page改变监听
mADPager.addOnPageChangeListener(this);

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

    //AD广告的处理
    @Override
    public void onPageSelected(int position) {
        for (RadioButton rb : mADRBList) {
            rb.setChecked(false);
        }
        mADRBList.get(position % MyApplication.ADURIS.length).setChecked(true);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }

我们只需要显示对应广告时，使对应的point的checked为true即可。这样为true的点则会展示不同的图片。以区分现在所显示的位置。

或许你想加入pager的点击事件，那么我们只要在Adatper中的
public Object instantiateItem(ViewGroup container, final int position) 方法中加入点击事件即可

public Object instantiateItem(ViewGroup container, final int position) {
。。。。。。
iv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    System.out.println("ok  "+position);
                }
            });
。。。。。。
            }

这样我们可以在广告上点击时做对应的事，如打开一个webView等等。

指尖菜谱的轮播广告就实现了。动手试试吧，下一篇将介绍指尖菜谱主页观摩栏的实现。