viewpager实现广告滑动及文字滑动和下方点的选中状态改变

2025-02-14 技术教程

效果如图：

首先说下方的这几个点，这个点不是图片效果，而是Android自带的shape画的椭圆，使椭圆的宽高一样，就变成原型，然后设置颜色即可。

这2个点的代码如下：

红色点的代码

<?xmlversion="1.0"encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><sizeandroid:width="8dp"android:height="8dp"/><solidandroid:color="#ff00"/></shape>

灰色点的代码

整体思路：

1、要展示viewpager,就要先把图片获取，图片是放在drawable-hdpi里的5张图片。

2、把图片放到一个list里，这个类似listview

3、利用viewpager的适配器，展示图片

4、在图片的适配器里根据位置加载每个图片资源，同时把图片下方的文字和选中的点显示

5、同时在适配器里要销毁已经隐藏的图片占用的资源

6、截止上一步，已经可以滑动图片了，但是图片滑动时，文字和点没有跟着变化，此时需要利用viewpage人的滑动监听，来处理文字变化和点的变化

7、viewpager有一个

viewpager.addOnPageChangeListener(newMyOnPageChangeListener());

监听，就new一个内部类，在内部类里通过图片滑动时的回调方法来实现。具体代码如下

MainActivity.java

packagecom.yuanlp.viewpager;importandroid.support.v4.view.PagerAdapter;importandroid.support.v4.view.ViewPager;importandroid.support.v7.app.AppCompatActivity;importandroid.os.Bundle;importandroid.util.Log;importandroid.view.View;importandroid.view.ViewGroup;importandroid.widget.ImageView;importandroid.widget.LinearLayout;importandroid.widget.TextView;importjava.util.ArrayList;importjava.util.List;publicclassMainActivityextendsAppCompatActivity{privatestaticfinalStringTAG="MainActivity";privateViewPagerviewpager;privateTextViewtv_title;privateLinearLayoutll_point_group;privateList<ImageView>p_w_picpathviews;//存放p_w_picpathview的集合，以便后期放入pageadapter中//图片资源IDprivatefinalint[]p_w_picpathIDs={R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e};//图片标题集合privatefinalString[]p_w_picpathDescriptions={"硅谷拔河比赛","凝聚你我，放飞梦想","抱歉，满座了","七月热浪滔天","加油努力学习"};//上一次点位高亮显示的位置privateintprePosition=0;//为了使广告隔段时间自动切换下一张图片，需要在此用到HandlerprivateHandlerhandler=newHandler(){@OverridepublicvoidhandleMessage(Messagemsg){intitem=viewpager.getCurrentItem()+1;viewpager.setCurrentItem(item);//延迟发消息handler.sendEmptyMessageDelayed(0,4000);}};@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);viewpager=(ViewPager)findViewById(R.id.viewpager);tv_title=(TextView)findViewById(R.id.tv_title);ll_point_group=(LinearLayout)findViewById(R.id.ll_point_group);p_w_picpathviews=newArrayList<ImageView>();MyPagerAdapterpagerAdapter=newMyPagerAdapter();for(inti=0;i<p_w_picpathIDs.length;i++){//在这里把p_w_picpath一个一个new出来ImageViewp_w_picpathView=newImageView(this);//这里引用图片设置为背景而不是src，是因为src可能会导致填充不完全p_w_picpathView.setBackgroundResource(p_w_picpathIDs[i]);//添加到集合p_w_picpathviews.add(p_w_picpathView);//添加点ImageViewpoint=newImageView(this);point.setBackgroundResource(R.drawable.selectors);LinearLayout.LayoutParamsparams=newLinearLayout.LayoutParams(8,8);//2个参数是宽和高if(i==0){point.setEnabled(true);//默认第0个显示红色选中}else{point.setEnabled(false);//其他为灰色params.leftMargin=8;//设置和左边的为8个像素的间距}point.setLayoutParams(params);//添加到线性布局里ll_point_group.addView(point);}viewpager.setAdapter(pagerAdapter);//设置viewpage页面滑动的监听viewpager.addOnPageChangeListener(newMyOnPageChangeListener());//设置中间位置,保证页面刚开始时，可以从左向右滑动intitem=Integer.MAX_VALUE/2-Integer.MAX_VALUE/2%p_w_picpathviews.size();//保证是p_w_picpathviews的长度的整数倍viewpager.setCurrentItem(item);//设置默认文本时第0个文本内容tv_title.setText(p_w_picpathDescriptions[prePosition]);//延迟发消息，触发上面的handler内部类，来自动切换图片handler.sendEmptyMessageDelayed(0,4000);}/***页面滑动监听类*/classMyOnPageChangeListenerimplementsViewPager.OnPageChangeListener{/***页面滚动时，回调该方法*@paramposition当前的页面位置*@parampositionOffset滑动了页面的百分之多少*@parampositionOffsetPixels//屏幕上滑动了多少个像素*/@OverridepublicvoidonPageScrolled(intposition,floatpositionOffset,intpositionOffsetPixels){}/***当某个页面被选中了的时候回调，即焦点图片*@paramposition焦点图片的位置*/@OverridepublicvoidonPageSelected(intposition){intrealPosition=position%(p_w_picpathviews.size());//这是因为在下方的适配器里，把数量无限大了，左右滑动时，会超出list数组的范围，报越界错误//设置文本变化tv_title.setText(p_w_picpathDescriptions[position]);//把上一个高亮的为灰色，把当前的设置为红色ll_point_group.getChildAt(prePosition).setEnabled(false);ll_point_group.getChildAt(position).setEnabled(true);prePosition=position;}/***滑动的过程中回调,状态的变化*静止到滑动，滑动到静止，静止到拖拽*@paramstate*/@OverridepublicvoidonPageScrollStateChanged(intstate){}}classMyPagerAdapterextendsPagerAdapter{@Override/***得导图片总数*/publicintgetCount(){returnInteger.MAX_VALUE;//设置无限多，方便左右无限滑动}/***相当于getview方法，*@paramcontainer本质上是viewpage人自身*@paramposition当前实例化页面的位置*@return*/@OverridepublicObjectinstantiateItem(ViewGroupcontainer,intposition){intrealPosition=position%(p_w_picpathviews.size());//获取真正的位置ImageViewp_w_picpathView=p_w_picpathviews.get(position);Log.e(TAG,"instantiateItem:当前的位置"+position+"--------"+p_w_picpathView);container.addView(p_w_picpathView);//添加到viewpager中returnp_w_picpathView;}/***比较view和object是否是同一个实例*@paramview页面*@paramobject是上面的方法instantiateItem返回的结果*@return*/@OverridepublicbooleanisViewFromObject(Viewview,Objectobject){returnview==object;}/***释放资源*@paramcontainer是viewpager*@paramposition要释放的位置*@paramobject要释放的页面*/@OverridepublicvoiddestroyItem(ViewGroupcontainer,intposition,Objectobject){container.removeView((View)object);Log.e(TAG,"destroyItem:释放资源的位置"+position+"-------object");}}}