生活不可能像你想的那么美好,但也不会像你想的那么糟。
本讲内容:实现轮播广告效果
下面是res/layout/show_view.xml 布局文件:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal"
android:padding="5dp" >
<View
android:id="@+id/v_dot1"
android:layout_width="8dp"
android:layout_height="8dp"
android:background="@drawable/dot_white" />
<View
android:id="@+id/v_dot2"
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_marginLeft="5dp"
android:background="@drawable/dot_white" />
<View
android:id="@+id/v_dot3"
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_marginLeft="5dp"
android:background="@drawable/dot_white" />
<View
android:id="@+id/v_dot4"
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_marginLeft="5dp"
android:background="@drawable/dot_white" />
<View
android:id="@+id/v_dot5"
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_marginLeft="5dp"
android:background="@drawable/dot_white" />
</LinearLayout>
</RelativeLayout>
下面是res/drawable/dot_red.xml 文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#ff0000" />
<corners android:radius="5dip" />
</shape>
下面是res/drawable/dot_white.xml 文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#aaFFFFFF" />
<corners android:radius="5dip" />
</shape>
下面是ViewPagerAdapter.java文件:
/**
* ViewPager适配器,用来绑定数据和view
*
* @author Administrator
*/
public class ViewPagerAdapter extends PagerAdapter {
// 界面列表
private ArrayList<ImageView> views;
public ViewPagerAdapter(ArrayList<ImageView> views) {
this.views = views;
}
/*
* 获得当前页卡的数量
*/
public int getCount() {
if (views != null) {
return views.size();
}
return 0;
}
/**
* 实例化(初始化)页卡
*/
public Object instantiateItem(View container, int position) {
((ViewPager) container).addView(views.get(position), 0);
return views.get(position);
}
/**
* 销毁页卡
*/
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView(views.get(position));
}
/**
* 判断是否由对象生成界面
*/
public boolean isViewFromObject(View arg0, Object arg1) {
return (arg0 == arg1);// 官方提示这样写
}
}
/**
* ViewPager实现的轮播图广告自定义视图,如京东首页的广告轮播图效果; 既支持自动轮播页面也支持手势滑动切换页面
*
* @author liguojin
*
*/
public class SlideShowView extends FrameLayout {
// 轮播图图片数量
private final static int IMAGE_COUNT = 5;
// 自动轮播的时间间隔
private final static int TIME_INTERVAL = 5;
// 自动轮播启用开关
private final static boolean isAutoPlay = true;
// 自定义轮播图的资源
private static final int[] pics = { R.drawable.menu_viewpager_1,
R.drawable.menu_viewpager_2, R.drawable.menu_viewpager_3,
R.drawable.menu_viewpager_4, R.drawable.menu_viewpager_5 };
// 定义一个ArrayList来存放 轮播图片的ImageView 的list
private ArrayList<ImageView> imageViewsList;
// 定义一个ArrayList来存放 圆点的View的list
private ArrayList<View> dotViewsList;
private ViewPager viewPager;
private ViewPagerAdapter vpAdapter;
// 当前轮播页
private int currentItem = 0;
// 定时任务
private ScheduledExecutorService scheduledExecutorService;
// Handler
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
super.handleMessage(msg);
viewPager.setCurrentItem(currentItem);
}
};
public SlideShowView(Context context) {
this(context, null);
}
public SlideShowView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SlideShowView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initViews(context);
initData();
System.out.println(isAutoPlay);
if (isAutoPlay) {
startPlay();
}
}
private void initViews(Context context) {
LayoutInflater.from(context).inflate(R.layout.show_view, this, true);
// 实例化ArrayList对象
imageViewsList = new ArrayList<ImageView>();
// 实例化ViewPager
viewPager = (ViewPager) findViewById(R.id.viewPager);
// 实例化ViewPager适配器
vpAdapter = new ViewPagerAdapter(imageViewsList);
}
/**
* 初始化数据
*/
private void initData() {
LayoutInflater.from(getContext()).inflate(R.layout.show_view, this,
true);
// 初始化引导图片列表
for (int i = 0; i < pics.length; i++) {
ImageView view = new ImageView(getContext());
view.setImageResource(pics[i]);
view.setScaleType(ScaleType.FIT_XY);
imageViewsList.add(view);
}
viewPager.setAdapter(vpAdapter);
viewPager.setOnPageChangeListener(new MyPageChangeListener());
dotViewsList = new ArrayList<View>();
dotViewsList.add(findViewById(R.id.v_dot1));
dotViewsList.add(findViewById(R.id.v_dot2));
dotViewsList.add(findViewById(R.id.v_dot3));
dotViewsList.add(findViewById(R.id.v_dot4));
dotViewsList.add(findViewById(R.id.v_dot5));
}
/**
* 开始轮播图切换
*/
private void startPlay() {
System.out.println("1");
scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 4,
TimeUnit.SECONDS);
}
/**
* 停止轮播图切换
*/
private void stopPlay() {
scheduledExecutorService.shutdown();
}
/**
* ViewPager的监听器 当ViewPager中页面的状态发生改变时调用
*
* @author caizhiming
*/
private class MyPageChangeListener implements OnPageChangeListener {
boolean isAutoPlay = true;
/**
* 当滑动状态改变时调用
*
* 其中arg0这个参数有三种状态(0,1,2) arg0 ==1的时辰默示正在滑动 arg0==2的时辰默示滑动完毕了
* arg0==0的时辰默示什么都没做 当页面开始滑动的时候,三种状态的变化顺序为(1,2,0)
*/
public void onPageScrollStateChanged(int arg0) {
switch (arg0) {
case 1:// 手势滑动,空闲中
isAutoPlay = false;
break;
case 2:// 界面切换中
isAutoPlay = true;
break;
case 0:// 滑动结束,即切换完毕或者加载完毕
// 当前为最后一张,此时从右向左滑,则切换到第一张
if (viewPager.getCurrentItem() == viewPager.getAdapter()
.getCount() - 1 && !isAutoPlay) {
viewPager.setCurrentItem(0);
}
// 当前为第一张,此时从左向右滑,则切换到最后一张
if (viewPager.getCurrentItem() == 0 && !isAutoPlay) {
viewPager
.setCurrentItem(viewPager.getAdapter().getCount() - 1);
}
break;
}
}
// 当前页面被滑动时调用
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
// 当新的页面被选中时调用
public void onPageSelected(int position) {
currentItem = position;
for (int i = 0; i < dotViewsList.size(); i++) {
if (i == position) {
((View) dotViewsList.get(position))
.setBackgroundResource(R.drawable.dot_red);
} else {
((View) dotViewsList.get(i))
.setBackgroundResource(R.drawable.dot_white);
}
}
}
}
/**
* 设置当前的小点的位置
*/
private void setCurDot(int position) {
if (position < 0 || position > pics.length - 1
|| currentItem == position) {
return;
}
}
/**
* 执行轮播图切换任务
*/
private class SlideShowTask implements Runnable {
public void run() {
synchronized (viewPager) {
currentItem = (currentItem + 1) % imageViewsList.size();
handler.obtainMessage().sendToTarget();
}
}
}
/**
* 销毁ImageView资源,回收内存
*/
private void destoryBitmaps() {
for (int i = 0; i < IMAGE_COUNT; i++) {
ImageView imageView = imageViewsList.get(i);
Drawable drawable = imageView.getDrawable();
if (drawable != null) {
// 解除drawable对view的引用
drawable.setCallback(null);
}
}
}
}
如何引用上面自定义的轮播图效果视图View呢?实现如下:
<com.example.showviewdemo.SlideShowView
android:id="@+id/slideshowView"
android:layout_width="match_parent"
android:layout_height="120dp" />
Take your time and enjoy it