android 使用viewpager实现广告轮播效果

一.简介

广告轮播我们在很多应用软件上都可以看到，其实现原理也都大致相同。今天就分享一下自己写的一个广告轮播的demo，以后也方便自己看。

二.实现

1.布局部分代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="200dp">

    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/dot_container"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_alignBottom="@+id/view_pager"
        android:orientation="horizontal"
        android:background="@color/banner_bg_color"
        android:gravity="center">

    </LinearLayout>
</RelativeLayout>

2.自定义PagerAdapter

public class BannerAdapter extends PagerAdapter{

    private List<ImageView>mList;
    public BannerAdapter(List<ImageView>list) {
        mList = list;
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView image = mList.get(position);
        container.addView(image);
        return image;
    }

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

3.activity代码实现部分

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";
    private ViewPager mViewPager;
    //线性布局用于存放圆点
    private LinearLayout mDotContainer;
    //viewpager容器内图片资源，这里就用了五个color，有图片可以直接掉图片id，网络加载的就要把加载的图片放到数组里然后再设置给ImageView
    int[] colors = {R.color.color1, R.color.color2, R.color.color3, R.color.color4, R.color.color5};
    //viewpager容器里放得ImageView列表
    private List<ImageView> mList;
    //记录下上一页的position
    private int mPreviousPosition;
    //子线程给handler发送的消息
    private final int CHAGE_PAGE = 1;
    //控制线程内部是否执行
    private boolean play = false;
    //执行定时任务
    ScheduledExecutorService executor = Executors.newScheduledThreadPool(1);

    //处理子线程发送过来的消息
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case CHAGE_PAGE:
                    int position = (mPreviousPosition + 1) % mList.size();
                    Log.e(TAG, "handleMessage: " + position);
                    mViewPager.setCurrentItem(position);
                    break;
            }
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initUi();
        initListener();
        initData();
    }

    //初始化UI
    private void initUi() {
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mDotContainer = (LinearLayout) findViewById(R.id.dot_container);
    }

    private void initData() {
        initViewPagerData();
        BannerAdapter adaper = new BannerAdapter(mList);
        mViewPager.setAdapter(adaper);
        play = true;
        play();
    }

    //设置延时自动播放
    private void play() {
        Thread thread = new Thread(new Runnable() {
            @Override
            public void run() {

                if(play){
                    handler.sendEmptyMessage(CHAGE_PAGE);
                }

            }
        });
        executor.scheduleAtFixedRate(thread,3,3, TimeUnit.SECONDS);
    }

    //初始化Viewpager里的数据
    private void initViewPagerData() {
        mList = new ArrayList<>();
        for (int i = 0; i < colors.length; i++) {
            ImageView image = new ImageView(this);
            image.setImageResource(colors[i]);
            mList.add(image);

            TextView textview = new TextView(this);
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(15, 15);
            if (i == 0) {
                textview.setSelected(true);
            } else {
                lp.leftMargin = 10;
            }
            textview.setLayoutParams(lp);
            textview.setBackgroundResource(R.drawable.banner_dot);
            mDotContainer.addView(textview);
        }
    }

    private void initListener() {

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                if(mPreviousPosition != position){
                    mDotContainer.getChildAt(mPreviousPosition).setSelected(false);
                    mDotContainer.getChildAt(position).setSelected(true);
                    mPreviousPosition = position;
                }
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        mViewPager.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()){
                    case MotionEvent.ACTION_DOWN:
                        play = false;
                        break;
                    case MotionEvent.ACTION_UP:
                        play = true;
                        break;
                }
                return false;
            }
        });
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        executor.shutdown();
    }
}

4.其中用到的color资源

<color name="banner_bg_color">#80dbd8d8</color>

<color name="color1">#ff0000</color>
<color name="color2">#00ff00</color>
<color name="color3">#0000ff</color>
<color name="color4">#ffff00</color>
<color name="color5">#00ffff</color>

<color name="dot_unselector">#999999</color>
<color name="dot_selector">#ff0000</color>

5.圆点banner_dot.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="false">
        <shape android:shape="oval">
            <solid android:color="@color/dot_unselector"/>
        </shape>
    </item>

    <item android:state_selected="true">

        <shape android:shape="oval">
            <solid android:color="@color/dot_selector"/>
        </shape>

    </item>
</selector>

好了所有实现的代码都在这里，希望大家都能看懂。看不懂的可以自己研究一下运行过程。

三.最后

写的demo大家可以去下载下来运行看看，地址：http://download.youkuaiyun.com/detail/jianlipp/9727919