ViewPager添加图片横向自动轮播

盛世美颜
180 阅读2分钟 
1、Dot_focus.xml代码 
<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle" >  

    <corners android:radius="8dp" />  

    <solid android:color="#fff" >  
    </solid>  

</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="8dp" />  

    <solid android:color="#000" >  
    </solid>  
</shape>  

***********************************************************************

2 图片轮播布局 
Activity_main.xml代码  收藏代码
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"  
   android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   tools:context=".MainActivity" >  

   <android.support.v4.view.ViewPager  
       android:id="@+id/vp"  
       android:layout_width="match_parent"  
       android:layout_height="200dp" />  

   <LinearLayout  
       android:id="@+id/ll_dot"  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"  
       android:gravity="center_horizontal"  
    android:layout_alignBottom="@id/vp"          

       >  
   </LinearLayout>  

lt;/RelativeLayout>  

***********************************************************************
3.1 需要根据图片地址个数,创建对应个数的小圆点 

Mainactivity.java代码  收藏代码
private void initdot() {  
    for (int i = 0; i < urls.length; i++) {  
        ImageView img = new ImageView(this); // 现在空  
        if (i == 0) {  
            img.setImageResource(R.drawable.dot_focus);  
        } else {  
            img.setImageResource(R.drawable.dot_normal);  
        }  
        LayoutParams params = new LayoutParams(20, 20);  
        /**  
         *   
         */  
        params.setMargins(5, 0, 5, 5);  

        // 加载到布局容器  
        ll_dot.addView(img, params);  
        dots.add(img);  
    }  

}  

3.2 因为需要延时显示图片,所以需要使用Handler进行每2秒自动播放图片 
Mainactivity.java代码  收藏代码
Handler handler = new Handler() {  
    public void handleMessage(android.os.Message msg) {  
        switch (msg.what) {  
        case 1:  
            int po = vp.getCurrentItem();  
            vp.setCurrentItem(++po);  
            // 发送延迟消息  
            this.sendEmptyMessageDelayed(1, 2000);  
            break;  
        default:  
            break;  
        }  
    };  
};  

3.3 使用ViewPager进行轮播图片 
Mainactivity.java代码  收藏代码
String[] urls = BbImages.imgs;  
// 记录小圆点个数的容器  
List<ImageView> dots = new ArrayList<ImageView>();  
private ViewPager vp;  
private LinearLayout ll_dot;  

@Override  
protected void onCreate(Bundle savedInstanceState) {  
    super.onCreate(savedInstanceState);  
    setContentView(R.layout.activity_main);  
    vp = (ViewPager) findViewById(R.id.vp);  
    ll_dot = (LinearLayout) findViewById(R.id.ll_dot);  
    initdot();  
    vp.setAdapter(new VPAdapter(urls, this, handler));  
    handler.sendEmptyMessageDelayed(1, 2000);  
    vp.setOnPageChangeListener(new OnPageChangeListener() {  

        @Override  
        public void onPageSelected(int postion) {  
            //  
            for (int i = 0; i < dots.size(); i++) {  
                ImageView img = dots.get(i);  
                if (i == postion % dots.size()) {  
                    img.setImageResource(R.drawable.dot_focus);  
                } else {  
                    img.setImageResource(R.drawable.dot_normal);  
                }  
            }  
        }  

        @Override  
        public void onPageScrolled(int arg0, float arg1, int arg2) {  

        }  

        @Override  
        public void onPageScrollStateChanged(int arg0) {  

        }  
    });  
}  

4 ViewPager的适配页面类 
getCount() 方法的返回值：这个值直接关系到ViewPager的“边界”，因此当我们把它设置为

Integer.MAX_VALUE之后，用户基本就看不到这个边界了（估计滑到这里的时候电池已经挂了吧o_O）。

当然，通常情况下设置为100倍实际内容个数也是可以的，之前看的某个实现就是这么干的。 

•instantiateItem() 方法position的处理：由于我们设置了count为 Integer.MAX_VALUE，因此这个

position的取值范围很大很大，但我们实际要显示的内容肯定没这么多（往往只有几项），所以这里肯

定会有求模操作。但是，简单的求模会出现问题：考虑用户向左滑的情形，则position可能会出现负值

。所以我们需要对负值再处理一次，使其落在正确的区间内。 

•instantiateItem() 方法父组件的处理：通常我们会直接addView，但这里如果直接这样写，则会抛出

IllegalStateException。假设一共有2个view，则当用户第2次滑动第一view的时候就会触发这个异常，

原因是我们试图把一个有父组件的View添加到另一个组件。所以我们可以每次都初始化一个新的布局视

图,然后把去改变布局中控件的内容,这样就不用担心view的个数和postion位置冲突问题 

Vpadapter.java代码  收藏代码
package com.example.day17_viewpagerround.adapter;  

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 com.example.day17_viewpagerround.R;  
import com.lidroid.xutils.BitmapUtils;  

public class VPAdapter extends PagerAdapter {  

    String[] urls;  
    Context context;  
    Handler handler;  

    public VPAdapter(String[] urls, Context context, Handler handler) {  
        super();  
        this.urls = urls;  
        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) {  
        View v = View.inflate(context, R.layout.view_item, null);  
        ImageView img = (ImageView) v.findViewById(R.id.imageView1);  
        /**  
         * 给img添加触摸监听  
         */  
        img.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:  
                case MotionEvent.ACTION_CANCEL:  
                    handler.sendEmptyMessageDelayed(1, 2000);  
                    break;  
                }  

                return true;  
            }  

        });  

        BitmapUtils utils = new BitmapUtils(context);  
        String uri = urls[position % urls.length];  
        utils.display(img, uri);  

        /**  
         * 加载到容器  
         */  
        container.addView(v);  

        return v;  
    }  

    @Override  
    public void destroyItem(ViewGroup container, int position, Object object) {  
        // TODO Auto-generated method stub  
        container.removeView((View) object);  
    }  

}
avatar
文章
阅读
粉丝