带导航点的ViewPager

2019独角兽企业重金招聘Python工程师标准>>>

此处为显示的布局：

<!-- lang: xml -->

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/navigation_page"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <LinearLayout
        android:id="@+id/viewGroup"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >
    </LinearLayout>
</RelativeLayout>

</LinearLayout>

此处为ViewPager中显示的布局:

<!-- lang: xml -->
<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/img_navigation_page" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY"/>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/img_cancel"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_btn_chat_text" />

    <Button
        android:id="@+id/btn_enter"
        android:layout_width="80dp"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="80dp"
        android:background="@drawable/invite_btn_bg"
        android:text="@string/trend_navigation"
        android:textColor="@color/red"
        android:textSize="15sp"
        android:visibility="invisible" />
</RelativeLayout>

</FrameLayout> 代码部分： /** 装分页显示的view的数组 */ private ArrayList<View> pageViews; private ImageView imageView;

/** 将小圆点的图片用数组表示 */
private ImageView[] imageViews;

// 包裹小圆点的LinearLayout
private LinearLayout mViewPoints;

    //初始化要显示的页面，添加到view集合中
private void init(Context context) {
	// 将要分页显示的View装入数组中
	pageViews = new ArrayList<View>();
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
}

//初始化显示的控件，有viewpager和显示导航点的linearlayout private void initView(Context context,View v) {

	// 创建imageviews数组，大小是要显示的图片的数量
	imageViews = new ImageView[pageViews.size()];
	// 实例化小圆点的linearLayout和viewpager
	 mViewPoints = (LinearLayout) v.findViewById(R.id.viewGroup);
	 mViewPager = (ViewPager) v.findViewById(R.id.navigation_page);

	// 添加小圆点的图片
	for (int i = 0; i < pageViews.size(); i++) {
		imageView = new ImageView(context);
		// 设置小圆点imageview的参数
		LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
				10, 10);
		layoutParams.setMargins(5, 0, 5, 0);
		imageView.setLayoutParams(layoutParams);// 创建一个宽高均为20 的布局
		// 将小圆点layout添加到数组中
		imageViews[i] = imageView;
		// 默认选中的是第一张图片，此时第一个小圆点是选中状态，其他不是
		if (i == 0) {
			imageViews[i]
					.setBackgroundResource(R.drawable.indicator_normal_pressed);
		} else {
			imageViews[i]
					.setBackgroundResource(R.drawable.indicator_normal);
		}

		// 将imageviews添加到小圆点视图组
		mViewPoints.addView(imageViews[i]);
	}
	// 设置viewpager的适配器和监听事件
	mViewPager.setAdapter(new NavigationPageAdapter());
	mViewPager.setOnPageChangeListener(new NavigationPageChangeListener());

}
    //设置要显示的pageradapter类
private class NavigationPageAdapter extends PagerAdapter {

	// 销毁position位置的界面
	@Override
	public void destroyItem(View v, int position, Object arg2) {
		((ViewPager) v).removeView((View) arg2);
	}

	// 获取当前窗体界面数
	@Override
	public int getCount() {
		return pageViews.size();
	}

	// 初始化position位置的界面
	@Override
	public Object instantiateItem(View v, int position) {
		View contentView = pageViews.get(position);
                /**
                      *显示页面的相关操作
                      **/
		((ViewPager) v).addView(contentView, 0);
		return pageViews.get(position);
	}

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

	@Override
	public void startUpdate(View arg0) {
	}

	@Override
	public int getItemPosition(Object object) {
		return super.getItemPosition(object);
	}

}
    //设置viewpager滑动的事件，实现导航点的滚动

private class NavigationPageChangeListener implements OnPageChangeListener {

	@Override
	public void onPageScrollStateChanged(int arg0) {
	}

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

	@Override
	public void onPageSelected(int position) {
		for (int i = 0; i < imageViews.length; i++) {
			imageViews[position]
					.setBackgroundResource(R.drawable.indicator_normal_pressed);
			// 不是当前选中的page，其小圆点设置为未选中的状态
			if (position != i) {
				imageViews[i]
						.setBackgroundResource(R.drawable.indicator_normal);
			}
		}
	}

}

转载于:https://my.oschina.net/u/1409622/blog/178881