前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【ViewPager的学习】二、添加图片描述及指示点动态改变

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

作者头像
张拭心 shixinzhang
发布2022-11-30 16:44:28
6290
发布2022-11-30 16:44:28
举报
文章被收录于专栏:拭心的安卓进阶之路

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

效果如下:

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

代码语言:javascript
复制
<?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>

这是选中时白色指示点的代码,未选中灰色的只是color不同。

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

代码语言:javascript
复制
<?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>

建立好指示点资源文件后就可以创建:

代码语言:javascript
复制
 @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);
		}

一定要记得当前View(此时是pointGroup)所在的parent是LinearLayout,所以在设置参数时要调用LineayLayout.LayoutParams。记住:与父ViewGroup相关联。

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

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

代码语言:javascript
复制
/**
         * 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的图片描述以及指示点状态动态改变。

效果如下:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-04-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档