安卓首頁圖片輪播效果(淘寶、京東首頁廣告效果)

時間  2019-12-11
標籤 首頁 圖片 效果 淘寶 京東 廣告 欄目 Android 简体版
原文   原文鏈接

直奔主題：html

一、主要原理就是利用定時任務器定時切換ViewPager的頁面。 二、裏面用了一個讀取網絡圖片的插件，作客戶端使用本地圖片輪播的也不多。java

先上個效果圖：android

項目代碼結構截圖：網絡

自定義View 的佈局文件layout_slideshow.xml： [html] view plain copy 在CODE上查看代碼片派生到個人代碼片app

<?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">ide

<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> oop

主界面佈局文件activity_main.xml： [html] view plain copy 在CODE上查看代碼片派生到個人代碼片 <LinearLayout 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:background="#FFFFFF" tools:context="com.example.slideshowdemo.MainActivity" >佈局

<!-- 主題圖片 -->  
<com.example.slideshowdemo.customview.SlideShowView  
    android:id="@+id/slideshowView"  
    android:layout_width="fill_parent"  
    android:layout_height="180dp"  
    android:layout_centerHorizontal="true" />

</LinearLayout> ui

自定義View 代碼： [java] view plain copy 在CODE上查看代碼片派生到個人代碼片 package com.example.slideshowdemo.customview;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.AsyncTask;
import android.os.Handler;
import android.os.Message;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;

import com.example.slideshowdemo.R;
import com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.QueueProcessingType;

/**

  • 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;  
//放輪播圖片的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(currentItem);  
    }  
      
};  
  
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();  
    if(isAutoPlay){  
        startPlay();  
    }  
      
}  
/** 
 * 開始輪播圖切換 
 */  
private void startPlay(){  
    scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();  
    scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 4, TimeUnit.SECONDS);  
}  
/** 
 * 中止輪播圖切換 
 */  
private void stopPlay(){  
    scheduledExecutorService.shutdown();  
}  
/** 
 * 初始化相關Data 
 */  
private void initData(){  
    imageViewsList = new ArrayList<ImageView>();  
    dotViewsList = new ArrayList<View>();  

    // 一步任務獲取圖片  
    new GetListTask().execute("");  
}  
/** 
 * 初始化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;  
        dotLayout.addView(dotView, params);  
        dotViewsList.add(dotView);  
    }  
      
    viewPager = (ViewPager) findViewById(R.id.viewPager);  
    viewPager.setFocusable(true);  
      
    viewPager.setAdapter(new MyPagerAdapter());  
    viewPager.setOnPageChangeListener(new MyPageChangeListener());  
}  
  
/** 
 * 填充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));  
    }  

    @Override  
    public Object instantiateItem(View container, int position) {  
        ImageView imageView = imageViewsList.get(position);  

        imageLoader.displayImage(imageView.getTag() + "", imageView);  
          
        ((ViewPager)container).addView(imageViewsList.get(position));  
        return imageViewsList.get(position);  
    }  

    @Override  
    public int getCount() {  
        // TODO Auto-generated method stub  
        return imageViewsList.size();  
    }  

    @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);  
            }  
            break;  
    }  
    }  

    @Override  
    public void onPageScrolled(int arg0, float arg1, int arg2) {  
        // TODO Auto-generated method stub  
          
    }  

    @Override  
    public void onPageSelected(int pos) {  
        // TODO Auto-generated method stub  
          
        currentItem = pos;  
        for(int i=0;i < dotViewsList.size();i++){  
            if(i == pos){  
                ((View)dotViewsList.get(pos)).setBackgroundResource(R.drawable.dot_focus);  
            }else {  
                ((View)dotViewsList.get(i)).setBackgroundResource(R.drawable.dot_blur);  
            }  
        }  
    }  
      
}  
  
/** 
 *執行輪播圖切換任務 
 * 
 */  
private class SlideShowTask implements Runnable{  

    @Override  
    public void run() {  
        // TODO Auto-generated method stub  
        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);  
        }  
    }  
}  


/** 
 * 異步任務,獲取數據 
 *  
 */  
class GetListTask extends AsyncTask<String, Integer, Boolean> {  

    @Override  
    protected Boolean doInBackground(String... params) {  
        try {  
            // 這裏通常調用服務端接口獲取一組輪播圖片，下面是從百度找的幾個圖片  
              
            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"  
            };  
            return true;  
        } catch (Exception e) {  
            e.printStackTrace();  
            return false;  
        }  
    }  

    @Override  
    protected void onPostExecute(Boolean result) {  
        super.onPostExecute(result);  
        if (result) {  
            initUI(context);  
        }  
    }  
}  
  
/** 
 * ImageLoader 圖片組件初始化 
 *  
 * @param context 
 */  
public static void initImageLoader(Context context) {  
    // This configuration tuning is custom. You can tune every option, you  
    // may tune some of them,  
    // or you can create default configuration by  
    // ImageLoaderConfiguration.createDefault(this);  
    // method.  
    ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context).threadPriority(Thread.NORM_PRIORITY - 2).denyCacheImageMultipleSizesInMemory().discCacheFileNameGenerator(new Md5FileNameGenerator()).tasksProcessingOrder(QueueProcessingType.LIFO).writeDebugLogs() // Remove  
                                                                                                                                                                                                                                                                                            // for  
                                                                                                                                                                                                                                                                                            // release  
                                                                                                                                                                                                                                                                                            // app  
            .build();  
    // Initialize ImageLoader with configuration.  
    ImageLoader.getInstance().init(config);  
}

}

主界面Activity代碼： [java] view plain copy 在CODE上查看代碼片派生到個人代碼片 package com.example.slideshowdemo;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

@Override  
protected void onCreate(Bundle savedInstanceState) {  
    super.onCreate(savedInstanceState);  
    setContentView(R.layout.activity_main);  
}

}

下面附上使用到的圖片素材： 熱點圖1： 熱點圖2： 效果默認圖片：（建議作一個灰色的不含有具體內容的默認加載圖片，這裏作demo就隨便找了一個）

完整工程代碼下載地址：http://download.csdn.net/detail/catoop/8025409

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程