滑动更改图片,底部有点点导航

本文详细介绍了指引页面的布局设计,包括使用XML和Java代码实现ViewPager、LinearLayout等组件,通过循环遍历图片资源并创建视图集合,为每张图片添加对应的小圆点指示器,并实现了点击事件监听以切换展示图片。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

xml:

<ViewPager
                    android:id="@+id/guidePages"
                    android:layout_width="fill_parent"
                    android:layout_height="250dip" />
                <LinearLayout
                    android:id="@+id/viewGroup"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_marginBottom="10dp"
                    android:gravity="center_horizontal"
                    android:orientation="horizontal" >

java:
private ChildViewPager viewPager;
	private ArrayList<View> pageViews;
	private ImageView imageView;
	private ImageView[] imageViews;
	// 包裹滑动图片LinearLayout
	private ViewGroup main;
	// 包裹小圆点的LinearLayout
	private ViewGroup group;
	@SuppressWarnings("unused")
	private TextView content;
		int[] img = new int[] { R.drawable.view1, R.drawable.view2,
				R.drawable.view3, R.drawable.view4, R.drawable.view5, R.drawable.view6 };
		pageViews = new ArrayList<View>();
		for (int i = 0; i < img.length; i++) {
			LinearLayout layout = new LinearLayout(this);
			LayoutParams ltp = new LayoutParams(LayoutParams.FILL_PARENT,
					LayoutParams.FILL_PARENT);
			final ImageView imageView = new ImageView(this);
			imageView.setScaleType(ScaleType.FIT_XY);
			imageView.setImageResource(img[i]);
			layout.addView(imageView, ltp);
			pageViews.add(layout);
		}
		imageViews = new ImageView[pageViews.size()];
		group = (ViewGroup)findViewById(R.id.viewGroup);
		viewPager = (ChildViewPager)findViewById(R.id.guidePages);
		content = (TextView) findViewById(R.id.photo_content);

		/**
		 * 有几张图片 下面就显示几个小圆点
		 */

		for (int i = 0; i < pageViews.size(); i++) {
			LinearLayout.LayoutParams margin = new LinearLayout.LayoutParams(
					LinearLayout.LayoutParams.WRAP_CONTENT,
					LinearLayout.LayoutParams.WRAP_CONTENT);
			// 设置每个小圆点距离左边的间距
			margin.setMargins(10, 0, 0, 0);
			imageView = new ImageView(ViewDetailsActivity.this);
			// 设置每个小圆点的宽高
			imageView.setLayoutParams(new LayoutParams(15, 15));
			imageViews[i] = imageView;
			if (i == 0) {
				// 默认选中第一张图片
				imageViews[i].setBackgroundResource(R.drawable.nowview);
				content.setText(viewcontent[0]);
			} else {
				// 其他图片都设置未选中状态
				imageViews[i].setBackgroundResource(R.drawable.otherview);
			}
			group.addView(imageViews[i], margin);
		}
		// 给viewpager设置适配器
		viewPager.setAdapter(new GuidePageAdapter());
		// 给viewpager设置监听事件
		viewPager.setOnPageChangeListener(new GuidePageChangeListener());

// 指引页面数据适配器
	class GuidePageAdapter 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) {
			return super.getItemPosition(object);
		}

		@Override
		public void destroyItem(View arg0, int arg1, Object arg2) {
			((ViewPager) arg0).removeView(pageViews.get(arg1));
		}

		@Override
		public Object instantiateItem(View arg0, int arg1) {
			((ViewPager) arg0).addView(pageViews.get(arg1));
			return pageViews.get(arg1);
		}

		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {

		}

		@Override
		public Parcelable saveState() {
			return null;
		}

		@Override
		public void startUpdate(View arg0) {

		}

		@Override
		public void finishUpdate(View arg0) {

		}
	}

	// 指引页面更改事件监听器
	class GuidePageChangeListener implements OnPageChangeListener {

		@Override
		public void onPageScrollStateChanged(int arg0) {

		}

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

		}

		@Override
		public void onPageSelected(int arg0) {
			// 遍历数组让当前选中图片下的小圆点设置颜色
			for (int i = 0; i < imageViews.length; i++) {
				imageViews[arg0].setBackgroundResource(R.drawable.nowview);
				content.setText(viewcontent[arg0]);

				if (arg0 != i) {
					imageViews[i].setBackgroundResource(R.drawable.otherview);
				}
			}
		}
	}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值