安卓首页图片轮播效果(淘宝京东首页广告效果) _首页

上下观古今，起伏千万途。这篇文章主要讲述安卓首页图片轮播效果(淘宝京东首页广告效果)相关的知识，希望能为你提供帮助。
直奔主题：

1、主要原理就是利用定时任务器定时切换ViewPager的页面。
2、里面用了一个读取网络图片的插件，做客户端使用本地图片轮播的也很少。

先上个效果图：

文章图片

项目代码结构截图：

文章图片

自定义View 的布局文件layout_slideshow.xml：

< ?xml version="1.0" encoding="utf-8"?> < RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_ android:layout_> < android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_ android:layout_ /> < LinearLayout android:id="@+id/dotLayout" android:layout_ android:layout_ android:layout_alignParentBottom="true" android:padding="8dp" android:gravity="right" android:orientation="horizontal"> < View android:id="@+id/v_dot1" android:layout_ android:layout_ android:background="@drawable/dot_focus" /> < View android:id="@+id/v_dot2" android:layout_ android:layout_ android:layout_marginLeft="5dp" android:background="@drawable/dot_blur" /> < /LinearLayout> < /RelativeLayout>

主界面布局文件activity_main.xml：

< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_ android:layout_ android:background="#FFFFFF" tools:context="com.example.slideshowdemo.MainActivity"> < !-- 主题图片 --> < com.example.slideshowdemo.customview.SlideShowView android:id="@+id/slideshowView" android:layout_ android:layout_ android:layout_centerHorizontal="true" /> < /LinearLayout>

自定义View 代码：

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 MyPagerAdapterextends 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 stubcurrentItem = 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代码：

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：