android viewpager广告栏左右预览上下一张图片实现

android viewpager广告栏左右预览上下一张图片实现

主要实现的效果看下图：

实现的原理是，用一个HorizontalScrollView包含一个linearlayout，linearlayout包含要显示的各张图片。控制HorizontalScrollView的滑动范围和一次滑动的距离，以便模仿出viewpager的距离。

主要代码如下：

package com.example.bannerdemo;

import android.graphics.Bitmap;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.app.Fragment;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.QueueProcessingType;

public class BannerFragement extends Fragment implements OnClickListener {

	public static DisplayImageOptions options;
	private OnSingleTouchListener onSingleTouchListener;
	private String[] mImageUrls;
	private String[] mRemarks;
	private TextView tv_remark;
	private LinearLayout ll_content;
	private HorizontalScrollView hsv_content;
	private RelativeLayout rl_left_tip, rl_right_tip;
	private int mPosition = 0;
	private float mViewpagerItemWidth = 0;
	private float mMarginLeft = 0;
	private boolean mCanMoveAuto = true;
	private float mDownX = 0;
	private int mChange = 0;
	private static final int MessageNext = 1000;
	private static final int MessageNextFromTouch = 1001;
	private RadioGroup rg_indicate;
	private boolean mIsFirst = true;
	private ImageView[] mImageViews;

	public BannerFragement() {

	}

	public BannerFragement(String[] images, String[] titles, String[] remarks,
			OnSingleTouchListener onSingleTouchListener) {
		mImageUrls = images;
		mRemarks = remarks;
		this.onSingleTouchListener = onSingleTouchListener;
	}

	private Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			switch (msg.what) {
			case MessageNext:
				handler.sendEmptyMessageDelayed(MessageNext, 4 * 1000);// 设置延迟时间，此处是5秒
				if (!mCanMoveAuto) {
					return;
				}
				if (mPosition == 0 && mIsFirst) {
					mIsFirst = false;
					if (getActivity() == null) {
						return;
					}
					int x = (int) (mViewpagerItemWidth - mMarginLeft);
					hsv_content.smoothScrollBy(x, 0);
				} else {
					mPosition++;
					gotoNextPage();
				}
				break;
			case MessageNextFromTouch:
				mPosition = mPosition + mChange;
				gotoNextPage();
				break;
			default:
				break;
			}

		};
	};

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.ac_image_pager, null);

		options = new DisplayImageOptions.Builder().showImageOnLoading(R.drawable.loading)
				.showImageForEmptyUri(R.drawable.loading).showImageOnFail(R.drawable.loading).cacheInMemory(true)
				.cacheOnDisc(true).considerExifParams(true).bitmapConfig(Bitmap.Config.RGB_565).build();
		ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(getActivity())
				.threadPriority(Thread.NORM_PRIORITY - 2).denyCacheImageMultipleSizesInMemory()
				.discCacheFileNameGenerator(new Md5FileNameGenerator()).tasksProcessingOrder(QueueProcessingType.LIFO)
				.build();
		ImageLoader.getInstance().init(config);

		tv_remark = (TextView) view.findViewById(R.id.tv_remark);
		ll_content = (LinearLayout) view.findViewById(R.id.ll_content);
		rg_indicate = (RadioGroup) view.findViewById(R.id.rg_indicate);

		hsv_content = (HorizontalScrollView) view.findViewById(R.id.hsv_content);
		hsv_content.setOnTouchListener(new OnTouchListener() {

			@Override
			public boolean onTouch(View v, MotionEvent event) {
				if (event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_CANCEL) {
					mCanMoveAuto = true;
					mChange = 0;
					if (event.getX() - mDownX > 100) {
						mChange--;
					} else if (event.getX() - mDownX < -100) {
						mChange++;
					}
					handler.sendEmptyMessage(MessageNextFromTouch);
					handler.removeMessages(MessageNext);
					handler.sendEmptyMessageDelayed(MessageNext, 4 * 1000);
				} else if (event.getAction() == MotionEvent.ACTION_DOWN || event.getAction() == MotionEvent.ACTION_MOVE) {
					if (mCanMoveAuto) {
						mDownX = event.getX();
					}
					mCanMoveAuto = false;
				}
				return false;
			}
		});

		rl_left_tip = (RelativeLayout) view.findViewById(R.id.rl_left_tip);
		rl_left_tip.setOnClickListener(this);
		rl_right_tip = (RelativeLayout) view.findViewById(R.id.rl_right_tip);
		rl_right_tip.setOnClickListener(this);

		mViewpagerItemWidth = getActivity().getResources().getDimension(R.dimen.viewpager_width);
		DisplayMetrics dm = new DisplayMetrics();
		// 取得窗口属性
		getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
		// 窗口的宽度
		int screenWidth = dm.widthPixels;
		mMarginLeft = (screenWidth - mViewpagerItemWidth) / 2;

		if (mImageUrls != null) {
			mIsFirst = true;
			tv_remark.setText(mRemarks[0]);
			int length = mImageUrls.length;
			for (int i = 0; i < length; i++) {
				if (i == 0) {
					addViewToLL(length - 1);
					addViewToLL(0);
				} else if (i == length - 1) {
					addViewToLL(i);
					addViewToLL(0);
				} else {
					addViewToLL(i);
				}

				RadioButton radioButton = new RadioButton(getActivity());
				radioButton.setButtonDrawable(R.drawable.selector_banner_piont);
				LayoutParams params = new LayoutParams(20, 20);
				rg_indicate.addView(radioButton, params);
				if (i == 0) {
					radioButton.setChecked(true);
				}
			}
			handler.sendEmptyMessageDelayed(MessageNext, 500);
		}
		return view;
	}

	private void addViewToLL(final int position) {
		LayoutParams params = new LayoutParams(
				(int) getActivity().getResources().getDimension(R.dimen.viewpager_width), LayoutParams.MATCH_PARENT);
		ImageView imageView = new ImageView(getActivity());
		imageView.setScaleType(ScaleType.FIT_XY);
		ImageLoader.getInstance().displayImage(mImageUrls[position], imageView, options, null);
		ll_content.addView(imageView, params);
		imageView.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				onSingleTouchListener.onSingleTouch(position);
			}
		});
	}

	/**
	 * 单击
	 */
	public void onSingleTouch(int position) {
		if (onSingleTouchListener != null) {
			onSingleTouchListener.onSingleTouch(position);
		}
	}

	/**
	 * 创建点击事件接口
	 * 
	 * @author wanpg
	 * 
	 */
	public interface OnSingleTouchListener {
		public void onSingleTouch(int position);
	}

	public void setOnSingleTouchListener(OnSingleTouchListener onSingleTouchListener) {
		this.onSingleTouchListener = onSingleTouchListener;
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.rl_left_tip:
			handler.removeMessages(MessageNext);
			handler.sendEmptyMessageDelayed(MessageNext, 4 * 1000);
			mPosition--;
			gotoNextPage();
			break;
		case R.id.rl_right_tip:
			handler.removeMessages(MessageNext);
			handler.sendEmptyMessageDelayed(MessageNext, 4 * 1000);
			mPosition++;
			gotoNextPage();
			break;
		default:
			break;
		}
	}

	private void gotoNextPage() {
		if (mPosition == 0) {
			mPosition = mImageUrls.length;
		} else if (mPosition == mImageUrls.length + 1) {
			mPosition = 1;
		}
		int x = (int) (mViewpagerItemWidth * mPosition - mMarginLeft);
		if (mPosition > 0 && mPosition < rg_indicate.getChildCount() + 1) {
			((RadioButton) rg_indicate.getChildAt(mPosition - 1)).setChecked(true);
			tv_remark.setText(mRemarks[mPosition - 1]);
		}
		hsv_content.smoothScrollTo(x, 0);
	}

}

可运行的demo项目下载： 点击打开链接