1. 程式人生 > >Android開發之實現圖片自動滾動顯示標籤的ViewPager

Android開發之實現圖片自動滾動顯示標籤的ViewPager

      Android中實現圖片自動滾動的效果非常的常見,我們可以自己動畫去實現功能。但是在Android中提供了一個ViewPager類,實現了滾動效果,在Android的extras目錄下android-support-vx.jar中,x代表版本4,7等等。使用時我們需要android.support.v4.view.ViewPager的viewPager標籤。

程式碼非常的簡單,不用解釋:

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="200dip" />

    <LinearLayout
        android:layout_alignBottom="@id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#33000000"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/image_desc"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/app_name"
            android:textColor="@android:color/white"
            android:textSize="18sp" />

        <LinearLayout
            android:id="@+id/point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="horizontal"
             >
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

Activity程式碼如下:

package com.andy.viewpagedemo;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

	private ViewPager viewPager;
	private LinearLayout point_group;
	private TextView image_desc;

	// 圖片資源id
	private final int[] images = { R.drawable.a, R.drawable.b, R.drawable.c,
			R.drawable.d, R.drawable.e };
	// 圖片標題集合
	private final String[] imageDescriptions = { "鞏俐不低俗,我就不能低俗",
			"撲樹又回來啦!再唱經典老歌引萬人大合唱", "揭祕北京電影如何升級", "樂視網TV版大派送", "熱血屌絲的反殺" };

	private ArrayList<ImageView> imageList;
	// 上一個頁面的位置
	protected int lastPosition = 0;

	// 判斷是否自動滾動viewPager
	private boolean isRunning = true;
	private Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			// 執行滑動到下一個頁面
			viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
			if (isRunning) {
				// 在發一個handler延時
				handler.sendEmptyMessageDelayed(0, 2000);
			}

		};
	};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		viewPager = (ViewPager) findViewById(R.id.viewPager);
		point_group = (LinearLayout) findViewById(R.id.point_group);
		image_desc = (TextView) findViewById(R.id.image_desc);
		image_desc.setText(imageDescriptions[0]);

		// 初始化圖片資源
		imageList = new ArrayList<ImageView>();
		for (int i : images) {
			// 初始化圖片資源
			ImageView imageView = new ImageView(this);
			imageView.setBackgroundResource(i);
			imageList.add(imageView);

			// 新增指示小點
			ImageView point = new ImageView(this);
			LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(5,
					5);
			params.rightMargin = 20;
			point.setLayoutParams(params);
			point.setBackgroundResource(R.drawable.point_bg);
			if (i == R.drawable.a) {
				point.setEnabled(true);
			} else {
				point.setEnabled(false);
			}

			point_group.addView(point);
		}

		viewPager.setAdapter(new MyPageAdapter());
		// 設定當前viewPager的位置
		viewPager.setCurrentItem(Integer.MAX_VALUE / 2
				- (Integer.MAX_VALUE / 2 % imageList.size()));
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int position) {
				// 頁面切換後呼叫, position是新的頁面位置

				// 實現無限制迴圈播放
				position %= imageList.size();

				image_desc.setText(imageDescriptions[position]);

				// 把當前點設定為true,將上一個點設為false
				point_group.getChildAt(position).setEnabled(true);
				point_group.getChildAt(lastPosition).setEnabled(false);
				lastPosition = position;

			}

			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels) {
				// 頁面正在滑動時間回撥

			}

			@Override
			public void onPageScrollStateChanged(int state) {
				// 當pageView 狀態發生改變的時候,回撥

			}
		});

		/**
		 * 自動迴圈: 1.定時器:Timer 2.開子執行緒:while true迴圈 3.ClockManger
		 * 4.用Handler傳送延時資訊,實現迴圈,最簡單最方便
		 * 
		 */

		handler.sendEmptyMessageDelayed(0, 2000);

	}

	@Override
	protected void onDestroy() {
		// 停止滾動
		isRunning = false;
		super.onDestroy();
	}

	private class MyPageAdapter extends PagerAdapter {
		// 需要實現以下四個方法

		@Override
		public int getCount() {
			// 獲得頁面的總數
			return Integer.MAX_VALUE;
		}

		@Override
		public boolean isViewFromObject(View view, Object object) {
			// 判斷view和Object對應是否有關聯關係
			if (view == object) {
				return true;
			} else {
				return false;
			}
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			// 獲得相應位置上的view; container view的容器,其實就是viewpage自身,
			// position: viewpager上的位置
			// 給container新增內容
			container.addView(imageList.get(position % imageList.size()));

			return imageList.get(position % imageList.size());
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			// 銷燬對應位置上的Object
			// super.destroyItem(container, position, object);
			container.removeView((View) object);
			object = null;
		}

	}

}

其效果如下: