掌上旅游app项目的总结（一）首页滚屏

掌上旅游app项目的总结（一）首页滚屏

首先在项目中该xml的文件名是fragment_first_fragment。
其中滚屏部分的代码如下：

<android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:layout_below="@id/titleLinear" />

很明显可以知道使用的是ViewPager这个组件。接下来看这个fragment的具体实现java代码，
实现的文件名是FirstFragment.java。下面我截取出滚屏部分主要代码实现：

// 图片资源id
	private final int[] images = { R.drawable.fragment_first_image_tu1,
			R.drawable.fragment_first_image_tu2,
			R.drawable.fragment_first_image_tu3, R.drawable.fragment_first_image_tu4, R.drawable.fragment_first_image_tu5 };
	// 图片标题集合
	private final String[] imageDescriptions = { "1", "2", "3", "4", "5" };

	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, 5000);
			}
		}
	};

很明显这里主要是设置好图片资源和对应的图片id并存进相应的数组内，然后设置一个handler来进行滑动处理和自动延时播放。

然后是初始化图片资源的代码：

// 初始化图片资源
		imageList = new ArrayList<ImageView>();
		for (int i : images) {
			// 初始化图片资源
			ImageView imageView = new ImageView(getActivity());
			imageView.setBackgroundResource(i);
			imageView.setId(i);
			imageView.setOnClickListener(new pagerImageOnClick());
			imageList.add(imageView);
			
			// 添加指示小点
			ImageView point = new ImageView(getActivity());
			LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
					32, 32);
			params.rightMargin = 20;
			params.bottomMargin = 10;
			point.setLayoutParams(params);
			point.setBackgroundResource(R.drawable.yuanw);
			if (i == R.drawable.fragment_first_image_tu1) {
				// 默认聚焦在第一张
				point.setBackgroundResource(R.drawable.yuanb);
				point.setEnabled(true);
			} else {
				point.setEnabled(false);
			}

			point_group.addView(point);
		}

在这里，我们把数据存进Imageview里面，并且添加上点击事件 pagerImageOnClick()，稍后会有这个方法
的代码介绍。再把这些imageview都存进ArrayList的泛型数组中。然后就是设置指示小点了，这里我们把这个小点保存进一个LinerLayout布局的容器当中。

这里就到最重要的适配器的设置了：

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

			@Override
			public void onPageSelected(int position) {
				// 页面切换后调用， position是新的页面位置

				// 实现无限制循环播放
				position %= imageList.size();

				image_desc.setText(imageDescriptions[position]);

				// 把当前点设置为true,将上一个点设为false；并设置point_group图标
				point_group.getChildAt(position).setEnabled(true);
				point_group.getChildAt(position).setBackgroundResource(
						R.drawable.yuanb);// 设置聚焦时的图标样式
				point_group.getChildAt(lastPosition).setEnabled(false);
				point_group.getChildAt(lastPosition).setBackgroundResource(
						R.drawable.yuanw);// 上一张恢复原有图标
				lastPosition = position;
				
			}

			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels) {
				// 页面正在滑动时间回调

			}

			@Override
			public void onPageScrollStateChanged(int state) {
				// 当pageView 状态发生改变的时候，回调

			}
		});


		handler.sendEmptyMessageDelayed(0, 5000);
		return view;
	}

最后，就是MyPageAdapter适配器的代码：

public class MyPageAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			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;
		}

	}

好了，这样就可以实现5张图片的自动滚动播放，还能自己手动切换。