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.csdn.net/detail/jianlipp/9727919