东莞做网站推广,软件工程哪个学校最好,模板网站首页设计,百度产品有哪些在淘宝等电商的APP首页经常能看到大幅的广告位#xff0c;通常有多幅经常更新的图片用于展示促销信息#xff0c;如下图所示#xff1a; 通常会自动滚动#xff0c;也可以根据手势滑动。我没有研究过人家的APP是通过什么实现的#xff0c;可能有第三方已经封装好的控件可以… 在淘宝等电商的APP首页经常能看到大幅的广告位通常有多幅经常更新的图片用于展示促销信息如下图所示 通常会自动滚动也可以根据手势滑动。我没有研究过人家的APP是通过什么实现的可能有第三方已经封装好的控件可以直接使用也可能通过webview来实现毕竟在网页上也有很多类似的内容。如果有高手经验丰富不妨指点一二。不管别人怎样今天我准备自己动手做一个其实也不是特别复杂的。 我主要使用的实现方法是Android自带的ViewPager控件这个控件主要用于实现屏幕水平切换有自带的动画效果。Android官网上有使用教程http://developer.android.com/training/animation/screen-slide.html当然下文会有相一致的说明。 然后就开始动手实现这个图片滑动效果吧。 1. 首先解释一下ViewPager的使用过程通常来说ViewPager可以和Fragment结合起来用每次ViewPager滑动也就是展示一个新的Fragment。Fragment里面就是我们需要展现的内容。而这滑动的动画就交给ViewPager来实现。所以第一步我们需要设置好Fragment的内容新建一个布局文件这里只需要展示一张图即可当然可以根据自己的需要进行改变 RelativeLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent ImageViewandroid:idid/iv_main_picandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:contentDescriptionstring/main_imageandroid:scaleTypefitXY //RelativeLayout 2. 然后建立Fragment类。 import android.support.v4.app.Fragment;
......public class PictureSlideFragment extends Fragment {Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View v inflater.inflate(R.layout.fragment_picture_slide, container, false);return v;}} 3. 在Activity布局文件的合适位置加入ViewPager控件。 android.support.v4.view.ViewPagerandroid:idid/pagerandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent / 4. 在Activity中得到这个ViewPager并且为其设置Adapter: private ViewPager mPager;Override
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mPager (ViewPager) findViewById(R.id.pager);mPagerAdapter new PictureSlidePagerAdapter(getSupportFragmentManager());mPager.setAdapter(mPagerAdapter);
} 5. 这个Adapter继承自FragmentStatePagerAdapter其中getCount()返回的值是一共需要显示的内容数是个常数: private class PictureSlidePagerAdapter extends FragmentStatePagerAdapter {public PictureSlidePagerAdapter(FragmentManager fm) {super(fm);// TODO Auto-generated constructor stub}Overridepublic Fragment getItem(int arg0) {// TODO Auto-generated method stubreturn new PictureSlideFragment();}Overridepublic int getCount() {// TODO Auto-generated method stubreturn NUM_PIC;}} 6. 到目前为止所有的内容都和官方的教程一致。如果你在Fragment中的那个ImageView通过android:src属性设置图片会实现数张静态图片滑动的效果。这离我们的目标还有一些区别 1图片需要能够动态改变而不是固定的内容 2每张图片需要有点击的响应 3一般情况下需要实现循环滚动即滑到最后一张图时继续滑动会回到第一张图 4图片要能够自动滚动 5图片下方需要有显示第几张图的指示小圆点。 7. 接下来我们朝着目标继续努力。首先是图片的变化。观察上述Adapter的实现方法可以发现getItem()方法每次返回的都是一个Fragment的实例需要显示多少个Fragment这个方法就会执行多少遍。但我们发现每次创建新的Fragment都没有区别直接new一个了事因此我们需要改写这个创建新Fragment实例的方法以实现每次新建的Fragment实例都不一样。在我们的Fragment类中补充如下内容 private int mIndex;public static PictureSlideFragment newInstance(int index) {PictureSlideFragment f new PictureSlideFragment();Bundle args new Bundle();args.putInt(index, index);f.setArguments(args);return f;}Overridepublic void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);mIndex getArguments() ! null ? getArguments().getInt(index) : 1;} 这个叫做newInstance的方法主要功能也是创建一个Fragment实例和直接new的区别是传递进来一个index参数这个参数在onCreate()方法中被获得。然后我们将Adapter的getItem()改写为如下 Overridepublic Fragment getItem(int arg0) {// TODO Auto-generated method stubreturn PictureSlideFragment.newInstance(arg0);} 每次getItem都将Item的序号传递到新建的Fragment然后再Fragment中根据需要设定不同的内容。真正实现的时候可以在Fragment中加入从网络获取图片的操作。 8. 图片的点击响应。这个比较简单在Fragment中获得ImageView控件然后设置onClick监听器即可。就不给出代码了。 9. 图片的循环滚动。一般的ViewPager不能实现内容的循环滚动即第一张向左滑或者最后一张向右滑都会到顶显示到顶的效果。如果要从ViewPager自身入手加入这功能需要对这个控件进行改写比较麻烦这里我从stackoverflow上找到了一种比较聪明的办法。 要实现几张图的循环滚动其实只需要满足视觉效果就可以了。比如有三张图ABC要实现A-B-C-A-B......以及C-B-A-C-B...这样的循环实际上可以这样实现 提供5张图分别是C A B C A其中C和CA和A完全相同当滑到C时自动切换到C当滑到A时自动切换到A并且这个切换过程没有动画于是使用者体验出来的感觉就是A B C三张图在循环滚动了。 于是我们为ViewPager添加setOnPageChangeListener方法 mPager.setOnPageChangeListener(new OnPageChangeListener() {Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stub}Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}Overridepublic void onPageScrollStateChanged(int state) {// 当到第一张时切换到倒数第二张当到最后一张时切换到第二张if (state ViewPager.SCROLL_STATE_IDLE) {int curr mPager.getCurrentItem();int lastReal mPager.getAdapter().getCount() - 2;if (curr 0) {mPager.setCurrentItem(lastReal, false);} else if (curr lastReal) {mPager.setCurrentItem(1, false);}}}}); 覆写的onPageScrollStateChanged方法在滑动内容改变时调用在其中实现C和CA和A的切换。 10. 图片的自动滚动这里我使用了timer启动线程来实现定时器线程每隔5秒发送消息UI线程捕获消息并调用ViewPager.setCurrentItem(currentItem1, true)方法滚动到下一张图片。代码就不赘述了。这里有个体验细节就是当使用者用手指滑动时定时器需要取消防止自动滑动和手指滑动发生冲突。这个我在Fragment的ImageView的onTouchListener中实现 mMainImage.setOnTouchListener(new OnTouchListener() {Overridepublic boolean onTouch(View v, MotionEvent event) {if (event.getAction() MotionEvent.ACTION_DOWN) {((MainActivity)getActivity()).getTimer().cancel();} else if (event.getAction() MotionEvent.ACTION_CANCEL) {((MainActivity)getActivity()).startSwitchImage();}return false;}}); 11. 图片序号的指示也就是图片下方的几个小圆点这个实现比较简单首先在Activity的布局文件中添加几个图片因为这几个小圆点本身不能随ViewPager移动因此不能放在Fragment布局中。切换内容也就是切换显示不同颜色小圆点的位置这个方法同样可以在onPageScrollStateChanged方法中调用。注意一些细节因为之前为了实现循环滚动而多用了两个Fragment而显示的小圆点数量不能增加因此需要调整好对应的序号。代码也不再赘述了。 最终的效果如下图所示美食有木有。总结一下整个过程并不复杂就是一些细节需要仔细推敲。虽然做法可能有非主流的地方但实现的效果跟别人的几乎完全一致这样就行啦 另外这样的实现方法也不是完全没有值得改进的地方比如图片自动滚动的延时还不能自定义。ViewPager没有现成的方法用来自改变自动滚动延时如果需要自定义就要自己改写这个控件啦有兴趣的可以研究一下 转载于:https://www.cnblogs.com/lcyty/p/3648679.html
