【ViewPager的学习】二、添加图片描述及指示点动态改变

标签：android   viewpager   

第一节已经简单实现了ViewPager，但是实际应用中常常需要在图片资源底部添加一些图片描述信息，还有一些指示点。

效果如下：

指示点可以用shape生成一个简单的原点，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <size android:width="5dp" android:height="5dp"/>
    <solid android:color="#aaFFFFFF"/>
</shape>

然后再在res/drawable下建立一个point.xml文件，用于处理不同状态下显示的指示点样式：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- android:state_enabled 与 ImageView.setEnabled 相关联 -->
    <item android:drawable="@drawable/point_nomal" android:state_enabled="false" />
    <item android:drawable="@drawable/point_choose" android:state_enabled="true"/>
</selector>

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        point_group = (LinearLayout) findViewById(R.id.point_group);
        image_desc = (TextView) findViewById(R.id.image_desc);
        imageList = new ArrayList<ImageView>();
        
        for (int i = 0; i < imageIds.length; i++) {
        	//初始化图片资源
        	ImageView im = new ImageView(this);
			im.setBackgroundResource(imageIds[i]);
			imageList.add(im);		
			//添加指示点
			ImageView point = new ImageView(this);
			//配置参数信息
			<span style="color:#ff6600;">LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
					LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
			params.rightMargin = 20;
			//指示点添加参数
			point.setLayoutParams(params)</span>;
			//设置指示点图片
			point.setBackgroundResource(R.drawable.point_bg);
			//设定第一个为白色，其他为灰色
			if(i == 0){
				point.setEnabled(false);
			}else{
				point.setEnabled(true);
			}
			point_group.addView(point);
		}

设置好指示点后，如何控制动态更新呢？就是切换到第二个页面，第二个的指示点变白，第一个从白变成灰色?

ViewPager有个setOnPageChangeListener方法，在ViewPager切换时调用，我们在这个方法中实现描述信息和指示点状态的动态改变：

/**
         * ViewPager滑动时调用
         */
        viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
        	/**
        	 * 页面滑动时调用
        	 */
			@Override
			public void onPageSelected(int position) {
				//position求余，为了循环滑动
				position = position%imageList.size();		
				//设置文字描述内容
				image_desc.setText(descrip[position]);
				//改变指示点状态,让当前为false,改变上一个为true
				point_group.getChildAt(position).setEnabled(false);
				point_group.getChildAt(lastposition).setEnabled(true);
				lastposition = position;
			}
			
			/**
			 * 页面正在滑动时回调，比较少用
			 */
			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels) {
				// TODO 自动生成的方法存根
				
			}
			
			/**
			 * 页面状态发生改变时回调，也比较少用
			 */
			@Override
			public void onPageScrollStateChanged(int state) {
				// TODO 自动生成的方法存根
				
			}
		});

效果如下：

【ViewPager的学习】二、添加图片描述及指示点动态改变

标签：android   viewpager   

原文地址：http://blog.csdn.net/u011240877/article/details/45372545