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

时间  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教程