android viewPager網絡加載圖片無限自動輪播

歡迎大家吐槽偷笑偷笑偷笑,有什麼問題或bug,我們一起探討。。。。


先看效果,還有demo自己可以看。。



activity中代碼:

public class MainActivity extends Activity {

	private ViewPager mViewPager;
	// 記錄當前的頁數
	private int mCount = 0;
	// 開始
	public static final int START = -1;
	// 停止
	public static final int STOP = -2;
	// 更新
	public static final int UPDATE = -3;
	// 接受傳過來的當前頁面數
	public static final int RECORD = -4;
	private List<ImageView> mList;
	private MyPagerAdapter mAdapter;
	private List<String> urlList;
	private ImageView dot1, dot2, dot3, dot0;
	private ImageView[] dots = new ImageView[4];
	private Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {

			switch (msg.what) {
			case START:
				handler.sendEmptyMessageDelayed(UPDATE, 3000);
				break;
			case STOP:
				handler.removeMessages(UPDATE);
				break;
			case UPDATE:
				mCount++;
				mViewPager.setCurrentItem(mCount);
				break;
			case RECORD:
				mCount = msg.arg1;
				break;

			default:
				break;
			}

		}
	};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
		init();
		setListener();
		mAdapter = new MyPagerAdapter(mList);
		mViewPager.setAdapter(mAdapter);
		int i = Integer.MAX_VALUE / 2 % mList.size();
		// 默認在中間,讓用戶看不到邊界
		mViewPager.setCurrentItem(Integer.MAX_VALUE / 2 - i);
		handler.sendEmptyMessage(START);
	}

	private void init() {
		// TODO Auto-generated method stub
		urlList = new ArrayList<String>();
		mList = new ArrayList<ImageView>();
		urlList.add("http://tupian.enterdesk.com/2015/saraxuss/04/17/gou/1/3.jpg");
		urlList.add("http://s2.nuomi.bdimg.com/upload/deal/2014/1/V_L/623682-1391756281052.jpg");
		urlList.add("http://media.chunyuyisheng.com/media/images/2013/05/15/9173ce6d26d9.jpg");
		urlList.add("http://img1.imgtn.bdimg.com/it/u=1856251628,4049763171&fm=21&gp=0.jpg");
		DisplayImageOptions options = new DisplayImageOptions.Builder()
				.cacheInMemory(true).displayer(new RoundedBitmapDisplayer(50))
				.displayer(new FadeInBitmapDisplayer(100)).cacheOnDisk(true)
				.bitmapConfig(Bitmap.Config.RGB_565).build();

		ImageView imageView;
		for (int i = 0; i < 4; i++) {
			imageView = new ImageView(MainActivity.this);
			imageView.setScaleType(ScaleType.FIT_XY);
			// 使用的ImageLoader網絡加載圖片,需先在Application和清單文件中配置在使用
			ImageLoader.getInstance().displayImage(urlList.get(i), imageView,
					options);
			mList.add(imageView);
			imageView.setOnClickListener(new OnClickListener() {

				@Override
				public void onClick(View v) {
					System.out.println("==========m==" + mCount % mList.size());
					// 這裏寫點擊圖片的操作 mCount % mList.size()這個點擊的第幾個圖片
				}
			});
		}
	}

	private void initView() {
		// TODO Auto-generated method stub
		mViewPager = (ViewPager) findViewById(R.id.viewPager);
		dot0 = (ImageView) findViewById(R.id.dot1);
		dot1 = (ImageView) findViewById(R.id.dot2);
		dot2 = (ImageView) findViewById(R.id.dot3);
		dot3 = (ImageView) findViewById(R.id.dot4);
		dots[0] = dot0;
		dots[1] = dot1;
		dots[2] = dot2;
		dots[3] = dot3;
		dot0.setSelected(true);
	}

	private void setListener() {
		// TODO Auto-generated method stub
		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				handler.sendMessage(Message.obtain(handler, RECORD, arg0, 0));
				// 下面是控制點的變化
				int j = arg0 % mList.size();
				for (int i = 0; i < dots.length; i++) {
					dots[i].setSelected(false);
				}
				dots[j].setSelected(true);
			}

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

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				switch (arg0) {
				// 當滑動時讓當前輪播停止
				case ViewPager.SCROLL_STATE_DRAGGING:
					handler.sendEmptyMessage(STOP);
					break;
				// 滑動停止時繼續輪播
				case ViewPager.SCROLL_STATE_IDLE:
					handler.sendEmptyMessage(START);
					break;
				}
			}
		});

	}
}


自定義pagerAdapter(大同小異)
public class MyPagerAdapter extends PagerAdapter {

	private List<ImageView> imageViews;

	public MyPagerAdapter(List<ImageView> list) {
		super();
		imageViews = list;
		// TODO Auto-generated constructor stub
	}

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

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		// TODO Auto-generated method stub
		return arg0 == arg1;
	}

	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
	}

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// TODO Auto-generated method stub
		// 因爲實際只有幾個頁面但是我們要無限循環,所以取模計算出當前的是第幾個頁面
		int i = position % imageViews.size();
		// 預防負值
		position = Math.abs(i);
		ImageView imageView = imageViews.get(position);
		ViewParent parent = imageView.getParent();
		// remove掉View之前已經加到一個父控件中,否則報異常
		if (parent != null) {
			ViewGroup group = (ViewGroup) parent;
			group.removeView(imageView);
		}
		container.addView(imageView);
		return imageView;
	}
}


佈局文件:(圓點的就不貼了,可看demo)

<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"
    tools:context=".MainActivity" >

   <android.support.v4.view.ViewPager
       android:id="@+id/viewPager"
       android:layout_width="wrap_content"
       android:layout_height="200dp"
       >
   </android.support.v4.view.ViewPager>
<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center_horizontal"
    android:layout_alignBottom="@id/viewPager"
    android:layout_marginBottom="10dp"
    >
    <ImageView 
        android:id="@+id/dot1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        
        android:src="@drawable/dot_layout"/>
    <ImageView 
        android:id="@+id/dot2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:layout_margin="5dp"
        android:src="@drawable/dot_layout"/>
    <ImageView 
        android:id="@+id/dot3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:layout_margin="5dp"
        android:src="@drawable/dot_layout"/>
    <ImageView 
        android:id="@+id/dot4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:layout_margin="5dp"
        android:src="@drawable/dot_layout"/>
    
    
</LinearLayout>
</RelativeLayout>

點擊獲取:源碼demo





發佈了38 篇原創文章 · 獲贊 60 · 訪問量 16萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章