1, 效果圖
layout_slideshow.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:id="@+id/dotLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:padding="8dp" android:gravity="right" android:orientation="horizontal"> //默認情況下面的點 <View android:id="@+id/v_dot1" android:layout_width="8dp" android:layout_height="8dp" android:background="@drawable/dot_focus" /> <View android:id="@+id/v_dot2" android:layout_width="8dp" android:layout_height="8dp" android:layout_marginLeft="5dp" android:background="@drawable/dot_blur" /> </LinearLayout> </RelativeLayout>
SlideShowView.java
/** * ViewPager實現的輪播圖廣告自定義視圖，如京東首頁的廣告輪播圖效果； * 既支持自動輪播頁面也支持手勢滑動切換頁面 * * */ public class SlideShowView extends FrameLayout { // 使用universal-image-loader插件讀取網絡圖片，需要工程導入universal-image-loader-1.8.6-with-sources.jar private ImageLoader imageLoader = ImageLoader.getInstance(); //輪播圖圖片數量 private final static int IMAGE_COUNT = 5; //自動輪播的時間間隔 private final static int TIME_INTERVAL = 5; //自動輪播啟用開關 private final static boolean isAutoPlay = true; //自定義輪播圖的資源 private String[] imageUrls = new String[]{ "http://image.zcool.com.cn/56/35/1303967876491.jpg", "http://image.zcool.com.cn/59/54/m_1303967870670.jpg", "http://image.zcool.com.cn/47/19/1280115949992.jpg", "http://image.zcool.com.cn/59/11/m_1303967844788.jpg"};; //放輪播圖片的ImageView 的list private List<ImageView> imageViewsList; //放圓點的View的list private List<View> dotViewsList; private ViewPager viewPager; //當前輪播頁 private int currentItem = 0; //定時任務 private ScheduledExecutorService scheduledExecutorService; private Context context; //Handler private Handler handler = new Handler(){ @Override public void handleMessage(Message msg) { // TODO Auto-generated method stub super.handleMessage(msg); viewPager.setCurrentItem(viewPager .getCurrentItem() + 1); } }; public SlideShowView(Context context) { this(context,null); // TODO Auto-generated constructor stub } public SlideShowView(Context context, AttributeSet attrs) { this(context, attrs, 0); // TODO Auto-generated constructor stub } public SlideShowView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); this.context = context; initImageLoader(context); initData(); initUI( context); if(isAutoPlay){ startPlay(); } } /** * 開始輪播圖切換 */ private void startPlay(){ scheduledExecutorService = Executors.newSingleThreadScheduledExecutor(); scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 3, TimeUnit.SECONDS); } /** * 停止輪播圖切換 */ private void stopPlay(){ scheduledExecutorService.shutdown(); } /** * 初始化相關Data */ private void initData(){ //圖片的集合 imageViewsList = new ArrayList<ImageView>(); //小圓點 的集合 dotViewsList = new ArrayList<View>(); } /** * 初始化Views等UI */ private void initUI(Context context){ if(imageUrls == null || imageUrls.length == 0) return; LayoutInflater.from(context).inflate(R.layout.layout_slideshow, this, true); // 子布局 LinearLayout dotLayout = (LinearLayout)findViewById(R.id.dotLayout); dotLayout.removeAllViews(); // 熱點個數與圖片特殊相等 for (int i = 0; i < imageUrls.length; i++) { /** * 圖片 */ ImageView view = new ImageView(context); view.setTag(imageUrls[i]); if(i==0){//給一個默認圖 view.setBackgroundResource(R.drawable.appmain_subject_1); } view.setScaleType(ScaleType.FIT_XY); imageViewsList.add(view); /** * 小圓點 */ ImageView dotView = new ImageView(context); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT); params.leftMargin = 4; params.rightMargin = 4; params.gravity=Gravity.CENTER; dotLayout.addView(dotView, params); dotViewsList.add(dotView); } viewPager = (ViewPager) findViewById(R.id.viewPager); viewPager.setFocusable(true); viewPager.setAdapter(new MyPagerAdapter()); viewPager.setOnPageChangeListener(new MyPageChangeListener()); // 設置應用打開時顯示的第一項，index的值為0 // 使用這種方式得到的0，和直接寫0有什么區別呢？ // 直接寫0，應用打開后不能直接向右滑動，因為viewpager中存image位置不能為負值，只能先向左滑動 // 這種方式得到的0，可以實現應用一打開，就可以向右滑動 int index = Integer.MAX_VALUE / 2 - 3; viewPager.setCurrentItem(index); } /** * 填充ViewPager的頁面適配器 * */ private class MyPagerAdapter extends PagerAdapter{ // // @Override // public void destroyItem(View container, int position, Object object) { // // TODO Auto-generated method stub // //((ViewPag.er)container).removeView((View)object); //// ((ViewPager)container).removeView(imageViewsList.get(position)); // ((ViewPager)container).removeView(imageViewsList.get(position % imageViewsList.size())); // container.removeView(imageViewsList.get(position // % imageViewsList.size())); // } // 當某一頁滑出去的時候，將其銷毀 @Override public void destroyItem(ViewGroup container, int position, Object object) { // container.removeView(imageViewsList.get(position // % imageViewsList.size())); } @Override public Object instantiateItem(View container, int position) { ImageView imageView = imageViewsList.get(position % imageViewsList.size()); imageLoader.displayImage(imageView.getTag() + "", imageView); //如果View已經在之前添加到了一個父組件，則必須先remove，否則會拋出IllegalStateException。 ViewParent vp =imageView.getParent(); if (vp!=null){ ViewGroup parent = (ViewGroup)vp; parent.removeView(imageView); } ((ViewPager)container).addView(imageViewsList.get(position % imageViewsList.size())); return imageViewsList.get(position % imageViewsList.size()); } @Override public int getCount() { // return imageViewsList.size(); return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0 == arg1; } @Override public void restoreState(Parcelable arg0, ClassLoader arg1) { // TODO Auto-generated method stub } @Override public Parcelable saveState() { // TODO Auto-generated method stub return null; } @Override public void startUpdate(View arg0) { // TODO Auto-generated method stub } @Override public void finishUpdate(View arg0) { // TODO Auto-generated method stub } } /** * ViewPager的監聽器 * 當ViewPager中頁面的狀態發生改變時調用 * */ private class MyPageChangeListener implements OnPageChangeListener{ boolean isAutoPlay = false; @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub 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); // } // // 當前為第一張，此時從左向右滑，則切換到最后一張 // else if (viewPager.getCurrentItem() == 0 && !isAutoPlay) { // viewPager.setCurrentItem(viewPager.getAdapter().getCount() - 1); // } if ( !isAutoPlay) { //滑動手指 //// //// viewPager.setCurrentItem(arg0); // currentItem++; // viewPager.setCurrentItem(viewPager.getCurrentItem()+1); } break; } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageSelected(int position) { // TODO Auto-generated method stub // 當頁面滑動結束時，先對頁面位置取模 position = position % imageViewsList.size(); for(int i=0;i < dotViewsList.size();i++){ if(i == position){ ((View)dotViewsList.get(position)).setBackgroundResource(R.drawable.dot_focus); }else { ((View)dotViewsList.get(i)).setBackgroundResource(R.drawable.dot_blur); } } currentItem = position; } } /** *執行輪播圖切換任務 * */ private class SlideShowTask implements Runnable{ @Override public void run() { // TODO Auto-generated method stub synchronized (viewPager) { 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); } } } /** * ImageLoader 圖片組件初始化 * * @param context */ public static void initImageLoader(Context context) { ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context).threadPriority(Thread.NORM_PRIORITY - 2).denyCacheImageMultipleSizesInMemory().discCacheFileNameGenerator(new Md5FileNameGenerator()).tasksProcessingOrder(QueueProcessingType.LIFO).writeDebugLogs() // Remove // app .build(); ImageLoader.getInstance().init(config); } }
使用的時候
<!-- 主題圖片 --> <com.example.slideshowdemo.customview.SlideShowView android:id="@+id/slideshowView" android:layout_width="fill_parent" android:layout_height="180dp" android:layout_centerHorizontal="true" />