图片自动轮播图
看到简书的app有一个图片轮播图，于是兴趣就跑了过来
基本效果如下
工作目录
话不多说，看代码
Step-one:布局文件
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/image_carousel"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
</LinearLayout>
banner.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="210dp" >
<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>
Step-two:java文件
AdDomain.class
packagecom.samego.alic.imageloader;
/**
*广告实体
**/
public class AdDomain {
private String id;//广告id
private String date;//日期
private String title;//标题
private String topicFrom;//选题来自
private String topic;//选题
private String imgUrl;//图片url
private boolean isAd;//是否为广告
private String startTime;//广告开始时间
private String endTime;//广告结束时间
private String targetUrl;//目标url
private int width;//宽
private int height;//高
private boolean available;//是否可用
public String getId() {
return id;
}
public void setId(String id) {
this.id= id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title= title;
}
public String getImgUrl() {
return imgUrl;
}
public void setImgUrl(String imgUrl) {
this.imgUrl= imgUrl;
}
public boolean isAd() {
return isAd;
}
public void setAd(boolean isAd) {
this.isAd= isAd;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date= date;
}
public String getTopic() {
return topic;
}
public void setTopic(String topic) {
this.topic= topic;
}
public String getTopicFrom() {
return topicFrom;
}
public void setTopicFrom(String topicFrom) {
this.topicFrom= topicFrom;
}
public String getStartTime() {
return startTime;
}
public void setStartTime(String startTime) {
this.startTime= startTime;
}
public String getEndTime() {
return endTime;
}
public void setEndTime(String endTime) {
this.endTime= endTime;
}
public String getTargetUrl() {
return targetUrl;
}
public void set TargetUrl(String targetUrl) {
this.targetUrl= targetUrl;
}
public int getWidth() {
return width;
}
public void setWidth(int width) {
this.width= width;
}
public intgetHeight() {
return height;
}
public void setHeight(intheight) {
this.height= height;
}
public boolean isAvailable() {
return available;
}
public void setAvailable(boolean available) {
this.available= available;
}
}
ImageCarousel.class 封装好了的图片轮播主类
packagecom.samego.alic.imageloader;
importandroid.content.Context;
importandroid.graphics.Bitmap;
importandroid.os.Handler;
importandroid.os.Parcelable;
importandroid.support.v4.view.PagerAdapter;
importandroid.support.v4.view.ViewPager;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.ImageView;
importandroid.widget.LinearLayout;
importandroid.widget.TextView;
importcom.nostra13.universalimageloader.cache.disc.impl.UnlimitedDiscCache;
importcom.nostra13.universalimageloader.cache.memory.impl.LruMemoryCache;
importcom.nostra13.universalimageloader.core.DisplayImageOptions;
importcom.nostra13.universalimageloader.core.ImageLoader;
importcom.nostra13.universalimageloader.core.ImageLoaderConfiguration;
importcom.nostra13.universalimageloader.core.assist.ImageScaleType;
importcom.nostra13.universalimageloader.core.assist.QueueProcessingType;
importjava.io.File;
importjava.util.ArrayList;
importjava.util.List;
importjava.util.concurrent.Executors;
importjava.util.concurrent.ScheduledExecutorService;
importjava.util.concurrent.TimeUnit;
/**
*图片轮播主类
* Created by alic on 16-3-23.
*/
public classImageCarouselextendsLinearLayout {
privateLinearLayoutlinearLayout=this;
privateContextcontext;
privateContextapplicationContext;
public staticStringIMAGE_CACHE_PATH="imageloader/Cache";//图片缓存路径
//异步加载图片
privateImageLoadermImageLoader;
privateDisplayImageOptionsoptions;
//定义的五个指示点
privateViewdot0;
privateViewdot1;
privateViewdot2;
privateViewdot3;
privateViewdot4;
//轮播banner的数据
privateListadList;
privateListimageViews;//滑动的图片集合
privateListdots;//图片标题正文的那些点
privateListdotList;
privateTextViewtv_date;
privateTextViewtv_title;
privateTextViewtv_topic_from;
privateTextViewtv_topic;
private intcurrentItem=0;//当前图片的索引号
privateViewPageradViewPager;
privateScheduledExecutorServicescheduledExecutorService;
privateHandlerhandler=newHandler() {
public voidhandleMessage(android.os.Message msg) {
adViewPager.setCurrentItem(currentItem);
}
};
/**
*构造函数绘画一个轮播图
*
*@paramcontext
*@paramapplicationContext
*/
publicImageCarousel(Context context,Context applicationContext) {
super(context);
this.context= context;
this.applicationContext= applicationContext;
linearLayout= (LinearLayout) LayoutInflater.from(context).inflate(R.layout.banner, null);
//使用ImageLoader之前初始化
initImageLoader();
//获取图片加载实例
mImageLoader= ImageLoader.getInstance();
options=newDisplayImageOptions.Builder()
.showStubImage(R.drawable.ad)
.showImageForEmptyUri(R.drawable.ad)
.showImageOnFail(R.drawable.ad)
.cacheInMemory(true).cacheOnDisc(true)
.bitmapConfig(Bitmap.Config.RGB_565)
.imageScaleType(ImageScaleType.EXACTLY).build();
initAdData();
startAd();
}
/**
*获取轮播图的LinearLayout
*
*@return
*/
publicLinearLayoutgetLinearLayout() {
returnlinearLayout;
}
/**
*初始化图片的加载
*/
private voidinitImageLoader() {
File cacheDir = com.nostra13.universalimageloader.utils.StorageUtils
.getOwnCacheDirectory(applicationContext,
IMAGE_CACHE_PATH);
DisplayImageOptions defaultOptions =newDisplayImageOptions.Builder()
.cacheInMemory(true).cacheOnDisc(true).build();
ImageLoaderConfiguration config =newImageLoaderConfiguration.Builder(
context).defaultDisplayImageOptions(defaultOptions)
.memoryCache(newLruMemoryCache(12*1024*1024))
.memoryCacheSize(12*1024*1024)
.discCacheSize(32*1024*1024).discCacheFileCount(100)
.discCache(newUnlimitedDiscCache(cacheDir))
.threadPriority(Thread.NORM_PRIORITY-2)
.tasksProcessingOrder(QueueProcessingType.LIFO).build();
ImageLoader.getInstance().init(config);
}
/**
*初始化轮播图的数据处理
*/
private voidinitAdData() {
//广告数据
adList=getBannerAd();
imageViews=newArrayList();
//点
dots=newArrayList();
dotList=newArrayList();
dot0=linearLayout.findViewById(R.id.v_dot0);
dot1=linearLayout.findViewById(R.id.v_dot1);
dot2=linearLayout.findViewById(R.id.v_dot2);
dot3=linearLayout.findViewById(R.id.v_dot3);
dot4=linearLayout.findViewById(R.id.v_dot4);
dots.add(dot0);
dots.add(dot1);
dots.add(dot2);
dots.add(dot3);
dots.add(dot4);
tv_date= (TextView)linearLayout.findViewById(R.id.tv_date);
tv_title= (TextView)linearLayout.findViewById(R.id.tv_title);
tv_topic_from= (TextView)linearLayout.findViewById(R.id.tv_topic_from);
tv_topic= (TextView)linearLayout.findViewById(R.id.tv_topic);
adViewPager= (ViewPager)linearLayout.findViewById(R.id.vp);
adViewPager.setAdapter(newMyAdapter());//设置填充ViewPager页面的适配器
//设置一个监听器，当ViewPager中的页面改变时调用
adViewPager.setOnPageChangeListener(newMyPageChangeListener());
addDynamicView();
}
private voidaddDynamicView() {
//动态添加图片和下面指示的圆点
//初始化图片资源
for(inti =0;i
ImageView imageView =newImageView(context);
//异步加载图片
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));
}
}
/**
*启动轮播图
*/
private voidstartAd() {
scheduledExecutorService= Executors.newSingleThreadScheduledExecutor();
//当Activity显示出来后，每两秒切换一次图片显示
scheduledExecutorService.scheduleAtFixedRate(newScrollTask(),1,5,
TimeUnit.SECONDS);
}
/**
*启动轮播图的任务
*/
private classScrollTaskimplementsRunnable {
@Override
public voidrun() {
synchronized(adViewPager) {
currentItem= (currentItem+1) %imageViews.size();
handler.obtainMessage().sendToTarget();
}
}
}
private classMyPageChangeListenerimplementsViewPager.OnPageChangeListener {
private intoldPosition=0;
@Override
public voidonPageScrollStateChanged(intarg0) {
}
@Override
public voidonPageScrolled(intarg0, floatarg1, intarg2) {
}
@Override
public voidonPageSelected(intposition) {
currentItem= position;
AdDomain 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;
}
}
private classMyAdapterextendsPagerAdapter {
@Override
public intgetCount() {
returnadList.size();
}
@Override
publicObjectinstantiateItem(ViewGroup container, intposition) {
ImageView iv =imageViews.get(position);
((ViewPager) container).addView(iv);
finalAdDomain adDomain =adList.get(position);
//在这个方法里面设置图片的点击事件
iv.setOnClickListener(newOnClickListener() {
@Override
public voidonClick(View v) {
//处理跳转逻辑
}
});
returniv;
}
@Override
public voiddestroyItem(View arg0, intarg1,Object arg2) {
((ViewPager) arg0).removeView((View) arg2);
}
@Override
public booleanisViewFromObject(View arg0,Object arg1) {
returnarg0 == arg1;
}
@Override
public voidrestoreState(Parcelable arg0,ClassLoader arg1) {
}
@Override
publicParcelablesaveState() {
return null;
}
@Override
public voidstartUpdate(View arg0) {
}
@Override
public voidfinishUpdate(View arg0) {
}
}
/**
*轮播广播模拟数据
*
*@return
*/
public staticListgetBannerAd() {
List adList =newArrayList();
AdDomain adDomain =newAdDomain();
adDomain.setId("108078");
adDomain.setDate("3月4日");
adDomain.setTitle("title");
adDomain.setTopicFrom("阿宅");
adDomain.setTopic("theme");
adDomain.setImgUrl("http://img.taodiantong.cn/v55183/infoimg/2013-07/130720115322ky.jpg");
adDomain.setAd(false);
adList.add(adDomain);
AdDomain adDomain2 =newAdDomain();
adDomain2.setId("108078");
adDomain2.setDate("3月5日");
adDomain2.setTitle("title");
adDomain2.setTopicFrom("小巫");
adDomain2.setTopic("“theme”");
adDomain2.setImgUrl("http://img.taodiantong.cn/v55183/infoimg/2013-07/130720115322ky.jpg");
adDomain2.setAd(false);
adList.add(adDomain2);
AdDomain adDomain3 =newAdDomain();
adDomain3.setId("108078");
adDomain3.setDate("3月6日");
adDomain3.setTitle("title");
adDomain3.setTopicFrom("旭东");
adDomain3.setTopic("“theme”");
adDomain3.setImgUrl("http://img.taodiantong.cn/v55183/infoimg/2013-07/130720115322ky.jpg");
adDomain3.setAd(false);
adList.add(adDomain3);
AdDomain adDomain4 =newAdDomain();
adDomain4.setId("108078");
adDomain4.setDate("3月7日");
adDomain4.setTitle("title");
adDomain4.setTopicFrom("小软");
adDomain4.setTopic("“theme”");
adDomain4.setImgUrl("http://img.taodiantong.cn/v55183/infoimg/2013-07/130720115322ky.jpg");
adDomain4.setAd(false);
adList.add(adDomain4);
AdDomain adDomain5 =newAdDomain();
adDomain5.setId("108078");
adDomain5.setDate("3月8日");
adDomain5.setTitle("title");
adDomain5.setTopicFrom("大熊");
adDomain5.setTopic("“theme”");
adDomain5.setImgUrl("http://img.taodiantong.cn/v55183/infoimg/2013-07/130720115322ky.jpg");
adDomain5.setAd(true);//代表是广告
adList.add(adDomain5);
returnadList;
}
}
MainActivity.class主测试类
packagecom.samego.alic.imageloader;
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.widget.LinearLayout;
/**
* Created by alic on 16-3-23.
*/
public classMainActivityextendsActivity {
privateLinearLayoutimageCarouselLinearLayout;
privateLinearLayoutlayout;
@Override
protected voidonCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageCarousel imageCarousel =newImageCarousel(this,getApplicationContext());
imageCarouselLinearLayout= imageCarousel.getLinearLayout();
layout= (LinearLayout) findViewById(R.id.image_carousel);
layout.addView(imageCarouselLinearLayout);
}
}
网上的基本都是还没有封装好的或者需要引入很重的库文件。