Banner实现首页轮换（无限循环）
Banner首页轮换
1.实现效果
可以无限循环，跳转时间也可以设置。
2.代码分析:
banner.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="180dp" >
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="210dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@drawable/shadow_article" >
<TextView
android:id="@+id/tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/author_layout"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:maxLines="2"
android:text="3月4日"
android:textColor="@color/white"
android:textSize="18sp" />
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/author_layout"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="@+id/tv_date"
android:maxLines="2"
android:text="我和令计划只是同姓"
android:textColor="@color/white"
android:textSize="18sp" />
<RelativeLayout
android:id="@+id/author_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:paddingBottom="20dp" >
<TextView
android:id="@+id/tv_pre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="文章选题来自"
android:textColor="@color/white"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_topic_from"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/tv_pre"
android:text="阿宅的"
android:textColor="@color/white"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_topic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/tv_topic_from"
android:text="“我想知道令狐安和令计划有什么关系？”"
android:textColor="@color/white"
android:textSize="12sp" />
</RelativeLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="10dp"
android:gravity="center" >
<View
android:id="@+id/v_dot0"
style="@style/dot_style"
android:background="@drawable/dot_focused"
android:visibility="invisible" />
<View
android:id="@+id/v_dot1"
style="@style/dot_style"
android:visibility="invisible"/>
<View
android:id="@+id/v_dot2"
style="@style/dot_style"
android:visibility="invisible"/>
<View
android:id="@+id/v_dot3"
style="@style/dot_style"
android:visibility="invisible"/>
<View
android:id="@+id/v_dot4"
style="@style/dot_style"
android:visibility="invisible" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
1.在布局中，设置了图片的位置，图片下方的LinearLayout中设置了5个View(图片下的点)，都设置visibility="invisible"不可显示，当图片更换时，设置visibility显示。
2.在主xml中合适的位置引用该Banner布局。
<include layout="@layout/banner"/>
3.Activity中(这里用的Fragment举例):
public class HomeFragment extends Fragment implements View.OnClickListener {
public static String IMAGE_CACHE_PATH = "imageloader/Cache"; // 图片缓存路径
private ViewPager adViewPager;
private List<ImageView> imageViews;// 滑动的图片集合
private List<View> dots; // 图片标题正文的那些点
private List<View> dotList;
private TextView tv_date;
private TextView tv_title;
private TextView tv_topic_from;
private TextView tv_topic;
private int currentItem = 0; // 当前图片的索引号
// 定义的五个指示点
private View dot0;
private View dot1;
private View dot2;
private View dot3;
private View dot4;
// ScheduledExecutorService执行周期性或定时任务，用来设置图片定时轮换
private ScheduledExecutorService scheduledExecutorService;
// 异步加载图片
private ImageLoader mImageLoader;
private DisplayImageOptions options;
// 轮播banner的数据
private List<AdDomainBean> adList;
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
adViewPager.setCurrentItem(currentItem);
}
};
private ImageView mImageMeal;
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View mHomeLayout = inflater.inflate(R.layout.bottom_part_home, container, false);
// 使用ImageLoader之前初始化
initImageLoader(mHomeLayout);
// 获取图片加载实例
mImageLoader = ImageLoader.getInstance();
options = new DisplayImageOptions.Builder()
.showStubImage(R.drawable.top_banner_android)
.showImageForEmptyUri(R.drawable.top_banner_android)
.showImageOnFail(R.drawable.top_banner_android)
.cacheInMemory(true).cacheOnDisc(true)
.bitmapConfig(Bitmap.Config.RGB_565)
.imageScaleType(ImageScaleType.EXACTLY).build();
initAdData(mHomeLayout);
startAd();//设置定时轮换
initView(mHomeLayout);
return mHomeLayout;
}
private void initView(View mHomeLayout){
mImageMeal=(ImageView)mHomeLayout.findViewById(R.id.image_meal);
}
//初始化ImageLoader
private void initImageLoader(View v) {
File cacheDir = com.nostra13.universalimageloader.utils.StorageUtils
.getOwnCacheDirectory(v.getContext(),
IMAGE_CACHE_PATH);
DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()
.cacheInMemory(true).cacheOnDisc(true).build();
ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
v.getContext()).defaultDisplayImageOptions(defaultOptions)
.memoryCache(new LruMemoryCache(12 * 1024 * 1024))
.memoryCacheSize(12 * 1024 * 1024)
.discCacheSize(32 * 1024 * 1024).discCacheFileCount(100)
.discCache(new UnlimitedDiscCache(cacheDir))
.threadPriority(Thread.NORM_PRIORITY - 2)
.tasksProcessingOrder(QueueProcessingType.LIFO).build();
ImageLoader.getInstance().init(config);
}
private void initAdData(View v) {
// 广告数据
adList = getBannerAd();//获得数据
imageViews = new ArrayList<ImageView>();
// 点
dots = new ArrayList<View>();
dotList = new ArrayList<View>();
dot0 = v.findViewById(R.id.v_dot0);
dot1 = v.findViewById(R.id.v_dot1);
dot2 = v.findViewById(R.id.v_dot2);
dot3 = v.findViewById(R.id.v_dot3);
dot4 = v.findViewById(R.id.v_dot4);
dots.add(dot0);
dots.add(dot1);
dots.add(dot2);
dots.add(dot3);
dots.add(dot4);
tv_date = (TextView) v.findViewById(R.id.tv_date);
tv_title = (TextView) v.findViewById(R.id.tv_title);
tv_topic_from = (TextView) v.findViewById(R.id.tv_topic_from);
tv_topic = (TextView) v.findViewById(R.id.tv_topic);
adViewPager = (ViewPager) v.findViewById(R.id.vp);
adViewPager.setAdapter(new MyAdapter());// 设置填充ViewPager页面的适配器
// 设置一个监听器，当ViewPager中的页面改变时调用
adViewPager.setOnPageChangeListener(new MyPageChangeListener());
//动态加载资源
addDynamicView(v);
}
//加载资源
private void addDynamicView(View v) {
// 动态添加图片和下面指示的圆点
// 初始化图片资源
for (int i = 0; i < adList.size(); i++) {
ImageView imageView = new ImageView(v.getContext());
// 异步加载图片
mImageLoader.displayImage(adList.get(i).getImgUrl(), imageView,
options);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageViews.add(imageView);
dots.get(i).setVisibility(View.VISIBLE);//设置原点可见
dotList.add(dots.get(i));
}
}
//设置定时轮换(5 SECONDS)
private void startAd() {
// 当Activity显示出来后，每两秒切换一次图片显示
scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
scheduledExecutorService.scheduleAtFixedRate(runnable, 5, 5,
TimeUnit.SECONDS);
}
//点击事件
@Override
public void onClick(View view) {
switch (view.getId()){
}
}
//索引号的的设置
final Runnable runnable = new Runnable() {
@Override
public void run() {
synchronized (adViewPager) {
currentItem = (currentItem + 1) % imageViews.size();
handler.obtainMessage().sendToTarget();
}
}
};
private class MyPageChangeListener implements ViewPager.OnPageChangeListener {
private int oldPosition = 0;
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
//页面更换后，加载资源，设置currentItem值，关闭定时，并重新设置
@Override
public void onPageSelected(int position) {
currentItem = position;
AdDomainBean adDomain = adList.get(position);
tv_title.setText(adDomain.getTitle()); // 设置标题
tv_date.setText(adDomain.getDate());
tv_topic_from.setText(adDomain.getTopicFrom());
tv_topic.setText(adDomain.getTopic());
dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);
dots.get(position).setBackgroundResource(R.drawable.dot_focused);
oldPosition = position;
scheduledExecutorService.shutdownNow();
startAd();
}
}
private class MyAdapter extends PagerAdapter {
@Override
public int getCount() {
return adList.size();
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
ImageView iv = imageViews.get(position);
((ViewPager) container).addView(iv);
final AdDomainBean adDomain = adList.get(position);
// 在这个方法里面设置图片的点击事件
iv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//设置图片点击事件
}
});
return iv;
}
@Override
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView((View) arg2);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
}
@Override
public Parcelable saveState() {
return null;
}
@Override
public void startUpdate(View arg0) {
}
@Override
public void finishUpdate(View arg0) {
}
}
/**
* 轮换的模拟数据（图片为网络链接）
*
* @return
*/
public static List<AdDomainBean> getBannerAd() {
List<AdDomainBean> adList = new ArrayList<AdDomainBean>();
AdDomainBean adDomain = new AdDomainBean();
adDomain.setId("108078");
adDomain.setDate("3月4日");
adDomain.setTitle("我和令计划只是同姓");
adDomain.setTopicFrom("阿宅");
adDomain.setTopic("我想知道令狐安和令计划有什么关系？");
adDomain.setImgUrl("http://g.hiphotos.baidu.com/image/w%3D310/sign=bb99d6add2c8a786be2a4c0f5708c9c7/d50735fae6cd7b8900d74cd40c2442a7d9330e29.jpg");
adDomain.setAd(false);
adList.add(adDomain);
AdDomainBean adDomain2 = new AdDomainBean();
adDomain2.setId("108078");
adDomain2.setDate("3月5日");
adDomain2.setTitle("我和令计划只是同姓");
adDomain2.setTopicFrom("小巫");
adDomain2.setTopic("“我想知道令狐安和令计划有什么关系？”");
adDomain2
.setImgUrl("http://g.hiphotos.baidu.com/image/w%3D310/sign=7cbcd7da78f40ad115e4c1e2672e1151/eaf81a4c510fd9f9a1edb58b262dd42a2934a45e.jpg");
adDomain2.setAd(false);
adList.add(adDomain2);
AdDomainBean adDomain3 = new AdDomainBean();
adDomain3.setId("108078");
adDomain3.setDate("3月6日");
adDomain3.setTitle("我和令计划只是同姓");
adDomain3.setTopicFrom("旭东");
adDomain3.setTopic("“我想知道令狐安和令计划有什么关系？”");
adDomain3
.setImgUrl("http://e.hiphotos.baidu.com/image/w%3D310/sign=392ce7f779899e51788e3c1572a6d990/8718367adab44aed22a58aeeb11c8701a08bfbd4.jpg");
adDomain3.setAd(false);
adList.add(adDomain3);
AdDomainBean adDomain4 = new AdDomainBean();
adDomain4.setId("108078");
adDomain4.setDate("3月7日");
adDomain4.setTitle("我和令计划只是同姓");
adDomain4.setTopicFrom("小软");
adDomain4.setTopic("“我想知道令狐安和令计划有什么关系？”");
adDomain4
.setImgUrl("http://d.hiphotos.baidu.com/image/w%3D310/sign=54884c82b78f8c54e3d3c32e0a282dee/a686c9177f3e670932e4cf9338c79f3df9dc55f2.jpg");
adDomain4.setAd(false);
adList.add(adDomain4);
AdDomainBean adDomain5 = new AdDomainBean();
adDomain5.setId("108078");
adDomain5.setDate("3月8日");
adDomain5.setTitle("我和令计划只是同姓");
adDomain5.setTopicFrom("大熊");
adDomain5.setTopic("“我想知道令狐安和令计划有什么关系？”");
adDomain5
.setImgUrl("http://e.hiphotos.baidu.com/image/w%3D310/sign=66270b4fe8c4b7453494b117fffd1e78/0bd162d9f2d3572c7dad11ba8913632762d0c30d.jpg");
adDomain5.setAd(true); // 代表是广告
adList.add(adDomain5);
return adList;
}
}
AdDomainBean 中的:
private String id; // id
private String date; // 日期
private String title; // 文章
private String topicFrom; //文章形式
private String topic; //标题
private String imgUrl; //图片链接
然后就是get和set的方法，自动生成即可!!
