本案例实现一个广告滚播的效果
实现步骤如下:
第一步:xml布局文件
<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.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="150dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/viewpager"
android:background="#33000000"
android:orientation="vertical"
android:padding="5dp" >
<TextView
android:id="@+id/tv_bannertext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="5dp"
android:text="我是第一个广告语"
android:textColor="@android:color/white" />
<LinearLayout
android:id="@+id/points"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
</RelativeLayout>
第二步实现
小圆圈的样式,这里有2个xml,一个是选择状态,一个是空白状态
正常状态
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<corners android:radius="0.5dp" />
<solid android:color="#55000000" />
</shape>
小圆圈正常状态
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<corners android:radius="0.5dp" />
<solid android:color="#AAFFFFFF" />
</shape>
小圆圈选中状态
选中背景效果
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/point_bg_enable" android:state_enabled="true"></item>
<item android:drawable="@drawable/point_bg_normal" android:state_enabled="false"></item>
</selector>
小圆圈背景效果
既然我们使用到了VierPager,那么必须要给它设置一个适配器来装载我们所要展示的广告图,这里需要注意的是getCount()这个方法,正常情况下,我们让它返回的是数据源的长度大小,但这里我们需要实现"无限循环"的效果,这么我们可以返回一个比较大的是比如:Integer.MAX_VALUE,这个数值可是20亿,用户再怎么滑到也不会滑到上亿次级别的吧。然后避免出现空指针异常,我们在下面addView和removeView的时候就不能再直接使用position去索引资源了,我们应该取余item的总数量,这样索引位置就不会超过资源数据的数量,例如1%777=1,1%999=1。
package com.lcw.rabbit.banner;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
/**
* ViewPager适配器
* @author Rabbit_Lee
*
*/
public class BannerAdapter extends PagerAdapter {
//数据源
private List<ImageView> mList;
public BannerAdapter(List<ImageView> list) {
this.mList = list;
}
@Override
public int getCount() {
//取超大的数,实现无线循环效果
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mList.get(position%mList.size()));
return mList.get(position%mList.size());
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mList.get(position%mList.size()));
}
}
主代码
根据广告图的资源长度在给定的LinearLayout里去添加圆圈点View。然后我们需要给它一个pointIndex标志位,用它来记录当前所在的页面位置,初始为0,再每次滑动的时候根据这个标志位来切换小圆圈的状态。
再来说下我们最开始的页面位置,我们不可以设置为0(第一页),如果我们设置为0,那么便不能向左滑动了。由于我们在适配器的getCount返回了Integer.MAX_VALUE ,我们可以取它的中间点来作为起始点,用setCurrentItem来出发VierPager的监听器里的onPageSelected的方法,那么左右就都可以滑动了。
最后就是定时器SystemClock了,我们这里开辟了一条新的线程通过while永true来达到这个效果,让其每隔2秒执行一次设置当前页面的动作,每次只需要简单设置页面+1即可,最后要留意的是我们需要给这个定时器设定一个开关,在我们切换退出该页面的时候要停止掉定时器的操作,也就是去重写我们的onDestroy方法,这里把开关关掉即可。
package com.lcw.rabbit.banner;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.os.SystemClock;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;
public class MainActivity extends Activity {
// 声明控件
private ViewPager mViewPager;
private List<ImageView> mlist;
private TextView mTextView;
private LinearLayout mLinearLayout;
// 广告图素材
private int[] bannerImages = { R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4 };
// 广告语
private String[] bannerTexts = { "因为专业 所以卓越", "坚持创新 行业领跑", "诚信 专业 双赢", "精细 和谐 大气 开放" };
// ViewPager适配器与监听器
private BannerAdapter mAdapter;
private BannerListener bannerListener;
// 圆圈标志位
private int pointIndex = 0;
// 线程标志
private boolean isStop = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
initAction();
// 开启新线程,2秒一次更新Banner
new Thread(new Runnable() {
@Override
public void run() {
while (!isStop) {
SystemClock.sleep(2000);
runOnUiThread(new Runnable() {
@Override
public void run() {
mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);
}
});
}
}
}).start();
}
/**
* 初始化事件
*/
private void initAction() {
bannerListener = new BannerListener();
mViewPager.setOnPageChangeListener(bannerListener);
//取中间数来作为起始位置
int index = (Integer.MAX_VALUE / 2) - (Integer.MAX_VALUE / 2 % mlist.size());
//用来出发监听器
mViewPager.setCurrentItem(index);
mLinearLayout.getChildAt(pointIndex).setEnabled(true);
}
/**
* 初始化数据
*/
private void initData() {
mlist = new ArrayList<ImageView>();
View view;
LayoutParams params;
for (int i = 0; i < bannerImages.length; i++) {
// 设置广告图
ImageView imageView = new ImageView(MainActivity.this);
imageView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
imageView.setBackgroundResource(bannerImages[i]);
mlist.add(imageView);
// 设置圆圈点
view = new View(MainActivity.this);
params = new LayoutParams(5, 5);
params.leftMargin = 10;
view.setBackgroundResource(R.drawable.point_background);
view.setLayoutParams(params);
view.setEnabled(false);
mLinearLayout.addView(view);
}
mAdapter = new BannerAdapter(mlist);
mViewPager.setAdapter(mAdapter);
}
/**
* 初始化View操作
*/
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mTextView = (TextView) findViewById(R.id.tv_bannertext);
mLinearLayout = (LinearLayout) findViewById(R.id.points);
}
//实现VierPager监听器接口
class BannerListener implements OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int position) {
int newPosition = position % bannerImages.length;
mTextView.setText(bannerTexts[newPosition]);
mLinearLayout.getChildAt(newPosition).setEnabled(true);
mLinearLayout.getChildAt(pointIndex).setEnabled(false);
// 更新标志位
pointIndex = newPosition;
}
}
@Override
protected void onDestroy() {
// 关闭定时器
isStop = true;
super.onDestroy();
}
}