android viewpager 滑动分页以及禁止划屏 (模拟新浪)

在第一篇中,我介绍了ViewPager的应用以及禁用滑向下一页.

这一篇将之加工一下,模拟实现新浪里面的功能,vierpager 分页.

在新浪微博消息一栏中是这样的(注意看title):

上部分页栏可以用gridview来实现,不过为了省事在这就用textview代替了.

贴出代码:

/***
 * ViewPager
 * 
 * @author zhangjia
 * 
 */
public class MainActivity extends ActivityGroup implements OnClickListener {
	private LinearLayout layout;// title
	private ViewPager pager;
	private ArrayList pageViews;
	private LinearLayout layout2;
	private ArrayList imageViews;
	private LinearLayout linearLayout;
	private String title[] = { "one", "two", "three" };
	private TextView textView;
	private ArrayList arrayList;// 用于装载view
	private final int linerlayout_height = 80;

	/***
	 * init title and pageview
	 */
	void Init() {
		arrayList = new ArrayList();
		// 获取屏幕宽度
		int width = getWindowManager().getDefaultDisplay().getWidth()
				/ title.length;
		for (int i = 0; i < title.length; i++) {
			textView = new TextView(this);
			textView.setText(title[i]);
			textView.setWidth(width);
			textView.setHeight(linerlayout_height - 10);
			textView.setTextSize(20);
			textView.setTextColor(color.black);
			textView.setGravity(Gravity.CENTER);
			textView.setId(i);
			textView.setPadding(5, 5, 5, 5);
			textView.setOnClickListener(this);
			linearLayout.addView(textView);
			arrayList.add(textView);
		}

		pageViews = new ArrayList();
		View view00 = getLocalActivityManager().startActivity("activity01",
				new Intent(this, NullActivity.class)).getDecorView();
		View view01 = getLocalActivityManager().startActivity("activity01",
				new Intent(this, MainActivity1.class)).getDecorView();
		View view02 = getLocalActivityManager().startActivity("activity02",
				new Intent(this, MainActivity2.class)).getDecorView();
		View view03 = getLocalActivityManager().startActivity("activity02",
				new Intent(this, MainActivity3.class)).getDecorView();
		View view04 = getLocalActivityManager().startActivity("activity01",
				new Intent(this, NullActivity.class)).getDecorView();
		pageViews.add(view00);
		pageViews.add(view01);
		pageViews.add(view02);
		pageViews.add(view03);
		pageViews.add(view04);
	}

	void Init_Point() {
		imageViews = new ArrayList();
		ImageView imageView;
		for (int i = 0; i < pageViews.size(); i++) {
			imageView = new ImageView(this);
			imageView.setLayoutParams(new LayoutParams(5, 5));
			imageView.setBackgroundResource(R.drawable.d1);
			LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
					new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,
							LayoutParams.WRAP_CONTENT));
			layoutParams.leftMargin = 20;
			layoutParams.rightMargin = 20;
			layout2.addView(imageView, layoutParams);
			// 第一个和最后一个让她消失
			if (i == 0 || i == pageViews.size() - 1) {
				imageView.setVisibility(View.GONE);
			}
			if (i == 1) {
				imageView.setBackgroundResource(R.drawable.d2);
			}
			imageViews.add(imageView);

		}
	}

	public void draw_Point(int index) {
		for (int i = 1; i < imageViews.size(); i++) {

			if (index == i) {
				imageViews.get(i).setBackgroundResource(R.drawable.d2);
			} else
				imageViews.get(i).setBackgroundResource(R.drawable.d1);

		}

	}

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setTitle("jjhappyforever...");
		setContentView(R.layout.main);
		pager = (ViewPager) findViewById(R.id.vp_contains);
		layout2 = (LinearLayout) findViewById(R.id.iv_image);
		linearLayout = (LinearLayout) findViewById(R.id.mian);
		// 创建linerlayout的大小
		LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
				new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,
						LayoutParams.FILL_PARENT));
		layoutParams.height = linerlayout_height;
		linearLayout.setLayoutParams(layoutParams);

		Init();
		Init_Point();
		pager.setAdapter(new myPagerView());

		arrayList.get(0).setBackgroundResource(
				R.drawable.renren_sdk_pay_repair_btn_down);
		pager.setCurrentItem(1);

		pager.setOnPageChangeListener(new OnPageChangeListener() {
			@Override
			public void onPageSelected(int arg0) {
				draw_Point(arg0);// 描绘分页点,一定要写在这里.

				// Toast.makeText(MainActivity.this, ""+arg0, 1000).show();
				// 如果是第一屏或者是最后一屏禁止滑动,其实这里实现的是如果滑动的是第一屏则跳转至第二屏,如果是最后一屏则跳转到倒数第二屏.
				if (arg0 == imageViews.size() - 1 || arg0 == 0) {
					if (arg0 == 0) {
						pager.setCurrentItem(arg0 + 1);// 第二屏 会再次实现该回调方法实现跳转.
						imageViews.get(1).setBackgroundResource(R.drawable.d2);
					} else {
						pager.setCurrentItem(arg0 - 1);// 倒数第二屏
						imageViews.get(arg0 - 1).setBackgroundResource(
								R.drawable.d2);
					}
				} else {
					//一定要卸载else里面,viewpager挺变态的,写在外面,(在你在最左边往左拉的时候会执行两次,最右边也是.)
					setBackgroud(arg0 - 1);
					Toast.makeText(MainActivity.this, "" + arg0, 1000).show();
				}
			}

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

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {

			}
		});
	}
    /***
     * 对title 选项卡处理
     * @param index
     */
	public void setBackgroud(int index) {
		for (int i = 0; i < arrayList.size(); i++) {
			
			arrayList.get(i).setBackgroundDrawable(new BitmapDrawable());

			if (i == index)
				arrayList.get(index).setBackgroundResource(
						R.drawable.renren_sdk_pay_repair_btn_down);
		}

	}
    /***
     * viewpager 的数据源
     * @author zhangjia
     *
     */
	class myPagerView extends PagerAdapter {
		// 显示数目
		@Override
		public int getCount() {
			return pageViews.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public int getItemPosition(Object object) {
			// TODO Auto-generated method stub
			return super.getItemPosition(object);
		}

		@Override
		public void destroyItem(View arg0, int arg1, Object arg2) {
			// TODO Auto-generated method stub
			((ViewPager) arg0).removeView(pageViews.get(arg1));
		}

		/***
		 * 获取每一个item, 类于listview中的getview
		 */
		@Override
		public Object instantiateItem(View arg0, int arg1) {
			((ViewPager) arg0).addView(pageViews.get(arg1));
			return pageViews.get(arg1);
		}

	}
    /***
     * 点击事件
     */
	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case 0:
			setBackgroud(0);
			pager.setCurrentItem(1);
			break;
		case 1:
			setBackgroud(1);
			pager.setCurrentItem(2);
			break;
		case 2:
			setBackgroud(2);
			pager.setCurrentItem(3);
			break;

		default:
			break;
		}
	}
}
上面就是所有的代码,其实看起来有点小多,不过都挺容易理解的.还有就是前面我写过一片关于viewpager的介绍,这里也就不过多讲解了.详细请下载源码看吧.

样本示例:

第一屏左垃 第一屏 滑向第二屏


第二屏 第三屏 第三屏右拉(会缩回)

源码下载




你可能感兴趣的:(移动开发)