Android 使用ViewPager实现广告条滚动

本文为android学习笔记，由博主总结整理

1.首先是效果图

2. ViewPager切换的同时改变下面的文字和点的状态。下面是布局结构和布局代码 。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="finch.scu.cn.rollingad.MainActivity">

    <android.support.v4.view.ViewPager  android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="200dp"/>
    <LinearLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#33000000" android:orientation="vertical" android:layout_alignBottom="@id/viewpager" >
        <TextView  android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:textColor="@android:color/white" android:textSize="16sp" android:text="我是广告上的文字内容" android:id="@+id/tv_ad" />
        <LinearLayout  android:layout_marginTop="5dp" android:layout_marginBottom="5dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/point_group" android:layout_gravity="center_horizontal" android:orientation="horizontal" >

        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

3.在res/drawable下新建一个selector用于实现切换点的背景改变效果。

point_bg.xml

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

    <item android:drawable="@drawable/point_nomal" android:state_enabled="true"></item>
    <item android:drawable="@drawable/point_focured" android:state_enabled="false"></item>

</selector>

point_focured.xml

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

    <size android:width="5dp" android:height="5dp"></size>
    <solid android:color="#aaFFFFFF"></solid>


</shape>

point_nomal.xml

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

    <size android:width="5dp" android:height="5dp"></size>
    <solid android:color="#55000000"></solid>


</shape>

4.ViewPager图片切换+handler实现自动循环效果+切换的同时改变文字和点的状态，下面上代码。

package finch.scu.cn.rollingad;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends Activity {

    private ViewPager viewPager;
    private TextView adText;
    private LinearLayout pointGroup;

    //图片资源id
    private final int[] imageIds = {R.drawable.a,R.drawable.b,R.drawable.c,
            R.drawable.d,R.drawable.e};
    private ArrayList<ImageView> imageList;

    //上一个页面的位置
    protected int lastPosition;
    //图片标题集合
    private final String[] imageDescriptions = {
            "巩俐不低俗，我就不能低俗",
            "扑树又回来啦！",
            "揭秘北京电影如何升级",
            "乐视网TV版大派送",
            "热血屌丝的反杀"
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager)findViewById(R.id.viewpager);
        adText = (TextView)findViewById(R.id.tv_ad);
        //初始显示第一条
        adText.setText(imageDescriptions[0]);

        pointGroup = (LinearLayout)findViewById(R.id.point_group);

        //初始化图片资源
        imageList = new ArrayList<ImageView>();
        for(int i =0;i<imageIds.length;i++){
            ImageView iv = new ImageView(this);
            iv.setBackgroundResource(imageIds[i]);
            imageList.add(iv);

            //添加指示点
            ImageView point = new ImageView(this);
            //设置布局参数
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
            params.leftMargin = 20;
            point.setLayoutParams(params);

            point.setBackgroundResource(R.drawable.point_bg);
                if(i==0){
                    point.setEnabled(true);
                }else{
                    point.setEnabled(false);
                }
            pointGroup.addView(point);

        }

        viewPager.setAdapter(new MyPagerAdapter());
        viewPager.setCurrentItem(Integer.MAX_VALUE/2-3);//设置当前为第一项，且可无限前后循环
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            /** * 页面切换后调用 * @param position 新的页面的位置 */
            @Override
            public void onPageSelected(int position) {
                position = position%imageList.size();

                adText.setText(imageDescriptions[position]);
                //改变指示点的enbale状态，把当前点设为true ，上一个点设为false
                pointGroup.getChildAt(position).setEnabled(true);
                pointGroup.getChildAt(lastPosition).setEnabled(false);
                lastPosition = position;
            }

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

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        isRunning = true;
        handler.sendEmptyMessageDelayed(0,2000);
    }
    private  Boolean isRunning = false; //是否自动滚动
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            viewPager.setCurrentItem(viewPager.getCurrentItem()+1);
            if(isRunning){
                handler.sendEmptyMessageDelayed(0,2000);
            }
        }
    };

    @Override
    protected void onDestroy() {
            isRunning= false;
            super.onDestroy();
    }

    private class MyPagerAdapter extends PagerAdapter{

        /** * @param container view的容器 * @param position 相应的位置 * @return 相应位置上的view */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {

            container.addView(imageList.get(position%imageList.size()));
            return imageList.get(position%imageList.size());
        }

        /** * 销毁对应位置上的object */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View)object);
            object = null;
        }

        //获取页面的总数
        public int getCount() {

            return Integer.MAX_VALUE;
        }

        // 判断两者的对应关系,将两个参数相比较返回即可
        @Override
        public boolean isViewFromObject(View view, Object object) {

            return view==object;
        }

    }
}