首页 > 代码库 > Viewpager实现图片轮播

Viewpager实现图片轮播

//-------------主布局文件-------------------------------------

<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:orientation="vertical" >

    <RelativeLayout android:layout_width="fill_parent"
        android:layout_height="200dp">
        <android.support.v4.view.ViewPager
            android:layout_width="fill_parent"
            android:layout_height="200dp"
            android:id="@+id/vp_viewpager"></android.support.v4.view.ViewPager>
    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/ll_dot"
        android:gravity="center"
        android:layout_alignBottom="@+id/vp_viewpager"></LinearLayout>
    </RelativeLayout>

</LinearLayout>

 

 

//---------------在res下新建一个drawable文件夹,在文件夹下创建XML文件 选中shape-----分别为dot_focuse.xml   和  dot_normal.xml-------------------------------

//-------------dot_focuse.xml 中-----------------------------

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
 <corners android:radius="9dp"/>
 <solid android:color="#fff"/>
 
</shape>

//-----------------dot_normal.xml 中------------------------

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    

    <corners android:radius="9dp"/>
    <solid android:color="#88000000"/>
</shape>

 

//--------------------创建一个适配器类------------------------

package com.example.tuisong;

import java.util.List;

import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;

import android.content.Context;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;

public class MyPagerAdapter extends PagerAdapter{
    
    private List<ImageView> viewlist;
    private Context context;
    private Handler handler;
            
    public MyPagerAdapter(List<ImageView> viewlist, Context context,
            Handler handler) {
        super();
        this.viewlist = viewlist;
        this.context = context;
        this.handler = handler;
    }
    
    @Override
    public int getCount() {
        
        return Integer.MAX_VALUE;
    }
    
    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        
        return arg0==arg1;
    }
    
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //通过控件集合获取imageView 添加到容器中,并作为key 返回
        ImageView imageView=viewlist.get(position%viewlist.size());    
        
        imageView.setOnTouchListener(new OnTouchListener() {
            
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                // 当按下的时候,停止轮播
                case MotionEvent.ACTION_DOWN:
                    // 移除所有的回调和消息
                    handler.removeCallbacksAndMessages(null);
                    break;
                    //抬起
                case MotionEvent.ACTION_UP:
                    
                    handler.sendEmptyMessageDelayed(0, 2000);
                    break;
                    // 取消的时候,继续开始录播
                case MotionEvent.ACTION_CANCEL:
                    
                    handler.sendEmptyMessageDelayed(0, 2000);
                    break;
                    

                default:
                    break;
                }
                //触摸事件不被消费,true 消费该触摸事件
                return true;
            }
        });
        
        
        
        
        
        //添加view
        container.addView(imageView);
        //设置图片显示整个布局
        imageView.setScaleType(ScaleType.FIT_XY);
        //返回Imageview
        return imageView;
        
        
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //移除当前view
        container.removeView((View) object);
    }

}

//-----------------主activity中-----------------------------------------------

package com.example.tuisong;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import com.lidroid.xutils.BitmapUtils;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.app.Activity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.Menu;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;

public class MainActivity extends Activity {
  
    private String[] imageUrls = new String[] {
                "http://pic8.nipic.com/20100701/5290458_114840036316_2.jpg",
                 "http://pic2.nipic.com/20090424/1468853_230119053_2.jpg",
                 "http://img3.3lian.com/2013/s1/20/d/57.jpg",
                "http://pic39.nipic.com/20140226/18071023_164300608000_2.jpg",
                "http://a0.att.hudong.com/15/08/300218769736132194086202411_950.jpg" };
 
     private List<ImageView> viewList;//轮播图片的集合    
     private List<ImageView> dotList;//小圆点的集合
    
    private ViewPager vp_viewpager;
    private LinearLayout ll_dot;
    
    private Handler handler=new Handler(){
        public void handleMessage(android.os.Message msg) {
            switch (msg.what) {
            case 0:
                // 先去获取到当前条目索引
                int currentItem=vp_viewpager.getCurrentItem();
                // 条目索引+1
                currentItem++;
                // 条目索引+1
                vp_viewpager.setCurrentItem(currentItem);
                // 条目索引+1,调用发送延迟消息的方法
                sendDelayMessage();
                break;
           

            default:
                break;
            }
        }

               
    };
    
  
    

  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //找到控件viewpager
        vp_viewpager = (ViewPager) findViewById(R.id.vp_viewpager);
      //找到控件Linearlayoout
        ll_dot = (LinearLayout) findViewById(R.id.ll_dot);


       // 初始化图片
        initViewList();
                     
     // 初始化小圆点
         initDots();


         //设置适配器
         MyPagerAdapter adapter=new MyPagerAdapter(viewList, this, handler);
         vp_viewpager.setAdapter(adapter);


         // 设置初始的展示条目
         vp_viewpager.setCurrentItem(viewList.size()*1000000);
         // 设置延时切换
         sendDelayMessage();
     
   // 监听viewPager的一个滑动事件
     vp_viewpager.setOnPageChangeListener(new OnPageChangeListener() {
        
        @Override
        public void onPageSelected(int arg0) {
            // 遍历小点的集合
            for (int i = 0; i < dotList.size(); i++) {
                // 如果当前的索引值和i相等
                if (arg0%dotList.size()==i) {
                    // 设置小点为亮色
                    dotList.get(i).setImageResource(R.drawable.dot_focuse);
                }else{
                    // 否则暗色
                    dotList.get(i).setImageResource(R.drawable.dot_normal);
                }
            }
            
        }
        
        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            
            
        }
        
        @Override
        public void onPageScrollStateChanged(int arg0) {
            
            
        }
    });
     
     
     
     
    }


//----------------------
    
    //发送延迟消息
    private void sendDelayMessage() {
        handler.sendEmptyMessageDelayed(0, 2000);
        
    }


    // 初始化小圆点            
    private void initDots() {
        // 创建一个装小点控件的集合
        dotList=new ArrayList<ImageView>();
        dotList.clear();
        for (int i = 0; i < imageUrls.length; i++) {
            ImageView imageView=new ImageView(this);
            if (i==0) {
                // 如果是第一张,默认给一个亮的小点
                imageView.setImageResource(R.drawable.dot_focuse);
            }else{
                // 如果不是滴一个,默认给一个暗的小点
                imageView.setImageResource(R.drawable.dot_normal);
            }
            // 设置小点的默认宽高为20dp   宽、高
            LayoutParams params=new LayoutParams(10, 10);
            // 设置小点的间距           左 、上、右、下
            params.setMargins(5, 0, 5, 0);
            ll_dot.addView(imageView,params);
            // 往小点集合中添加view
            dotList.add(imageView);
        }
    }



    /*// 初始化图片    使用的是第三方的xuitls,需要导入xuitlsjar包
    private void initViewList() {
        // 先使用xutils的工具
        BitmapUtils bitmapUtils=new BitmapUtils(this);
        viewList=new ArrayList<ImageView>();
        for (int i = 0; i < imageUrls.length; i++) {
            // 创建imageView 并通过工具类将图片设置到控件上
            ImageView imageView=new ImageView(this);
            bitmapUtils.display(imageView, imageUrls[i]);
            
            viewList.add(imageView);
        }
    }*/
    
    
    // 初始化图片,使用的是第三方的ImageLoader,需要导入ImageLoader.jar包
    private void initViewList() {
        
        viewList=new ArrayList<ImageView>();
        for (int i = 0; i < imageUrls.length; i++) {
            // 创建imageView 并通过工具类将图片设置到控件上
            ImageView imageView=new ImageView(this);
            
            ImageLoader.getInstance().init(
                    ImageLoaderConfiguration.createDefault(this));
            DisplayImageOptions options = new DisplayImageOptions.Builder()
                    .cacheInMemory(true).cacheOnDisk(true).build();
            ImageLoader.getInstance().displayImage(
                    imageUrls[i], imageView, options);
            viewList.add(imageView);
        }
    }


    
    
}

Viewpager实现图片轮播