ViewPager和开源控件CirclePageIndicator使用记录

最新推荐文章于 2024-04-07 03:13:45 发布

JinRunLiCool

最新推荐文章于 2024-04-07 03:13:45 发布

阅读量2.9k

点赞数

分类专栏： android控件使用文章标签： viewpager 控件开源 utf-8 android

本文链接：https://blog.csdn.net/JinRunLiCool/article/details/41243861

版权

android控件使用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

由于最近工作的需要，需要设计一个第一次安装app的导航页。一共有四个导航图片作为背景，在导航下面有小圆圈作为导航提示（就是CirclePageIndicator完成的工作）。背景并不是直接加入到viewpager中的，在viewpager中是另外一个简单的布局，背景需要在导航页面滑动后渐变替换。可能这么说还是不太清楚。我想画一个图来展示下这个层次关系。

上面还是非常的粗糙，请见谅。当然在作为帧布局背景的里面是由一个Linerlayout中的一个imageview来完成的，为什么这样是因为这里有一个特殊的原因，一会儿说到了再解释吧。

说得不太清楚，还是直接上布局代码吧：

首先是导航activity的主布局文件：guid_page.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" >
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
		
        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            >
            <ImageView
		        android:id="@+id/guid_image_view"
		        android:layout_width="fill_parent"
		        android:layout_height="fill_parent"
		        android:src="@drawable/appintro1"
		        android:scaleType="centerCrop"
		        />
        </LinearLayout>
        
        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
		
        <FrameLayout
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_gravity="bottom|center_horizontal" >
			
            <com.viewpagerindicator.CirclePageIndicator
                android:id="@+id/dot_marks"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="10dip" />
        </FrameLayout>
    </FrameLayout>

</LinearLayout>

然后是ViewPager内容的布局，这个比较简单直接放得文本：guid_page_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relatlayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#00000000"
            android:orientation="vertical"
            android:gravity="bottom"
            >
             <TextView
		        android:id="@+id/guid_title_text"
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
				android:textColor="@color/guid_content_text_color"
				android:textSize="@dimen/guid_content_text_size"
		        />
             
            <TextView
		        android:id="@+id/guid_content_text"
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
				android:textColor="@color/guid_content_text_color"
				android:textSize="@dimen/guid_content_text_size"
				android:layout_margin="20dp"
		        />
        </LinearLayout>
     
</LinearLayout>

通过布局代码应该很容易看明白这个布局关系了，重点是这个滑动中的一些动作的问题。

要让ViewPager能够在滑动事自动去加载滑动页的内容，是在pagerAdapter中去完成的，简单的就是这样，贴段代码：

@Override
	public Object instantiateItem(ViewGroup container, final int position) {
		View imageLayout = inflater.inflate(R.layout.guid_page_detail, container, false);	
		Log.i("splashAdapter", "------->currentPostion:"+position);
		
		
		TextView title = (TextView)imageLayout.findViewById(R.id.guid_title_text);
		TextView content = (TextView)imageLayout.findViewById(R.id.guid_content_text);
		
		int titleId = (int) _Data.get(position).get("title");
		int contentId = (int) _Data.get(position).get("content");
		
		title.setText(titleId);
		content.setText(contentId);
		
		container.addView(imageLayout);
		
		
		return imageLayout;
	}

其他的都是数据的初始化，和isViewFromObject(View view, Object object) 和 destroyItem(View container, int position, Object object)的内容，这里就不说了。这里我们主要解决有CirclePageIndicator时滑动监听的情况。

在需要对viewPager的滑动页面内容进行动态加载的都在这里完成，出来的效果会根据你的滑动而加载，每次加载当前页前后页的内容，这样在滑动的时候才会出现这样的效果，第一页的内容和第二页的内容同时出现。

因为我们这次的背景并不是滑动时背景同时滑动，而是在页面切换后改变背景，所以我们需要监听viewpager的改变也就是setOnPageChangeListener(new ViewPager.OnPageChangeListener() {};

我们在activity中直接监听在根据当前页的position来设置页面按理说是没有问题的，但是我们使用了CirclePageIndicator，

guidViewPager = (ViewPager)guidView.findViewById(R.id.view_pager);	
		
		guidPageIndicator = (CirclePageIndicator)guidView.findViewById(R.id.dot_marks);		
		guidAdapter = new GuidViewPagerAdapter(this, guidViewPager, guidViewPager, handler);
		guidViewPager.setAdapter(guidAdapter);
		
		<span style="color:#ff0000;">guidPageIndicator.setViewPager(guidViewPager);</span>

当我们将CirclePageIndicator绑定到viewpager的时候在CirclePageIndicator中包含了setOnPageChangeListener(new ViewPager.OnPageChangeListener() {};对viewpager状态的监听，那么我们再对ViewPager进行监听的时候就一定会产生冲突。事实当然也确实是这样的。这个时候似乎变得很麻烦了，既然已经有了一个监听，那么我们是不是要去重载CirclePageIndicator来改写里面的监听内容呢，当然无疑这么做是可行的，但是这样的工作量应该会不少，毕竟这样需要去读一读CirclePageIndicator的代码。

这个时候我们换一个角度来看一下，我们其实只需要监听获取到当前的显示的页面的position通过这个值来选择当前需要加载显示的背景图片。Indicator和viewpager的页面既然是一一对应的，那么监听它的位置信息所得到的position应该是和viewpager的页面position值一样的。想到这里呢我们就有了一个可行的方法，就是通过CirclePageIndicator的setOnPageChangeListener来改变背景的图片颜色。上段代码吧：

private void setContent(){
		LayoutInflater layoutInflater = LayoutInflater.from(mContext);
		View guidView = layoutInflater.inflate(R.layout.guid_page, null);
		
		imageView = (ImageView)guidView.findViewById(R.id.guid_image_view);
		
		guidViewPager = (ViewPager)guidView.findViewById(R.id.view_pager);	
		
		guidPageIndicator = (CirclePageIndicator)guidView.findViewById(R.id.dot_marks);		
		guidAdapter = new GuidViewPagerAdapter(this, guidViewPager, guidViewPager, handler);
		guidViewPager.setAdapter(guidAdapter);
		
		guidPageIndicator.setViewPager(guidViewPager);
		guidPageIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int position) {
				switch (position) {
				case 0:
					imageView.setImageResource(R.drawable.appintro1);
					break;
				case 1:
					imageView.setImageResource(R.drawable.appintro2);
					break;
				case 2:
					imageView.setImageResource(R.drawable.appintro3);
					break;
				case 3:
					imageView.setImageResource(R.drawable.appintro4);
					break;
				default:
					break;
				}
				
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});
		
		this.setContentView(guidView);
	}

总得就是这样，其实只是为了记录下，虽然没有什么难度，当作对自己的鼓励吧。第一次用网络博客编辑实在是不太习惯，要是你能看到这里，那我必须对你表示感谢了。