安卓ViewPager系列自定义效果,助你打造炫酷轮播图——索引。
2017-10-01 14:23
393 查看
大家好,我是安卓小菜,在接下来的博客里将为大家带来ViewPager一系列的效果集锦。俗话说万事开头难,第一次写博客分享自己的所得,我也在脑海里构思良久要如何去展示去表达,既不会过于细节导致内容臃肿,也不会过于片面引得读者摸不着头脑。所以,我决定借鉴前辈的方案,在某系列博客之前做一个相关的索引,把将要展示的内容的主题展示在这里,方便读者根据需要一步一步有条不紊的学习。最后,既然是分享博客那就是大家一起学习,如果我的博客真的能帮助大家学到一点东西我很开心,如果我有讲解错误或不妥的地方也很欢迎大家指出,互相学习!
前言:你若花开,清风自来。
图片相册加载效果》
《安卓ViewPager系列自定义效果,助你打造炫酷轮播图——ViewPager 无限循环+自动轮播效果》
《安卓ViewPager系列自定义效果,助你打造炫酷轮播图——ViewPager 3d画廊效果》
《安卓ViewPager系列自定义效果,助你打造炫酷轮播图——ViewPager+RadioButton+Fragment 实现底部导航栏效果》
和之前说的一样,通过左右滑动的手势可以切换View并且提供了一个默认的切换动画,是不是很炫酷呢?当然这只是最基本的动画,后面还有更炫的3d翻转。
PagerAdapter适配器只需要覆盖getCount,isViewFromObject,instantiateItem,destroyItem四个方法即可。具体每个方法的意义上面的注释上都有。
有了适配器以后,我们就可以为ViewPager填充数据了。接下来我们在xml文件里给Activity添加一个ViewPager。
在项目中使用gilde:
接下来我们看看使用glide加载图片到底有多简洁:
我们来看一个使用Glide加载图片的小例子:
好了简单的使用就介绍到这里,当然glide的强大远远不在于此对这个库有兴趣的同学请自行google,本文就不占篇幅详解啦~
jar包地址:http://download.csdn.net/download/qq_34122135/10005088
当photoview和viewpager相结合使用,就可以实现图片相册浏览的效果。下面演示下photoview的基本使用:
通过双击或者手势能放大和缩下图片,并且可以拖动去查看细节。使用方法如下:
好了,今天的博客就写到这里了,接下来的国庆假期中,在不影响正常休息的情况下 尽量把这个系列写完。有什么讲述不对的地方请您指出,有迷惑的地方也可以留言发问,我看到会第一时间回复。最后,谢谢大家的支持,谢谢!!!
前言:你若花开,清风自来。
系列文章
《安卓ViewPager系列自定义效果,助你打造炫酷轮播图——ViewPager+Glide+PhotView图片相册加载效果》
《安卓ViewPager系列自定义效果,助你打造炫酷轮播图——ViewPager 无限循环+自动轮播效果》
《安卓ViewPager系列自定义效果,助你打造炫酷轮播图——ViewPager 3d画廊效果》
《安卓ViewPager系列自定义效果,助你打造炫酷轮播图——ViewPager+RadioButton+Fragment 实现底部导航栏效果》
ViewPager概述
ViewPager是安卓自带的一个ViewGroup控件在V4包下面,ViewPager中可以管理多个view,不同的view之间通过左右滑动切换,并提供了类似于轮播图一样的默认动画。我们在实际的开发中大部分情况下都是使用ViewPager实现的轮播图效果,ViewPager和ListView一样通过适配器填充数据,不仅如此ViewPager还可以和Fragment搭配使用,使用ViewPager来管理Fragment的生命周期是比较推荐的一种做法。ViewPager的默认效果图:和之前说的一样,通过左右滑动的手势可以切换View并且提供了一个默认的切换动画,是不是很炫酷呢?当然这只是最基本的动画,后面还有更炫的3d翻转。
ViewPager简单使用
之前我们讲过,ViewPager要添加子View和ListView一样是需要使用适配器来填充数据的只是使用的适配器不同,适配器负责将数据源绘制成View然后添加到ViewPager中去。所以一个适配器中我们需要两个东西,一是数据源 用来提供我们需要填充的数据,我们例子中的数据源就是指2张图片btimap的集合,二是Context上下文对象我们知道安卓里的布局加载和实例化View都是需要使用的Context对象的。有了这两个对象,我们就可以自定义适配器了。接下来我们继承下ViewPager的PagerAdapter这个抽象类。PagerAdapter适配器:
public class ViewPageAdapter extends PagerAdapter{ //图像数据集合 private List<Bitmap> mImages; //上下文对象 private Context mContext; public ViewPageAdapter(List<Bitmap> images, Context mContext) { this.mImages = images; this.mContext = mContext; } //这里返回的是ViewPager的子View数,ViewPager会根据这个值创建子View的数量 //我们就让他返回集合的长度 @Override public int getCount() { return mImages.size(); } /** * 用于判断当前view和object是否有关联 * 谷歌推荐以view作为key,object是下面instantiateItem的返回值就是添加进去的view * 所以这里直接判断view和object是否相等 * @param view * @param object 下面instantiateItem()返回的object * @return */ @Override public boolean isViewFromObject(View view, Object object) { return view == object; } /** * 实例化显示的View对象并返回一个与该view相关的key * 这里直接返回该view作为key * @param container * @param position * @return */ @Override public Object instantiateItem(ViewGroup container, int position) { //通过代码方式得到一个ImageView对象,需要传入Context对象 ImageView imageView = new ImageView(mContext); //将bitmap放到imageView中去 imageView.setImageBitmap(mImages.get(position)); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); //上面我们只是得到了一个ImageView对象,接下来我们还需要把ImageView添加到ViewPager中去 container.addView(imageView); //返回该view作为与之关联的key return imageView; } /** * 从ViewPager中移除一个view * @param container * @param position * @param object */ @Override public void destroyItem(ViewGroup container, int position, Object object) { //这里的object还是一个key,但是我们返回的key就是一个ImageView所以直接移除这个object即可 container.removeView((View) object); } }
PagerAdapter适配器只需要覆盖getCount,isViewFromObject,instantiateItem,destroyItem四个方法即可。具体每个方法的意义上面的注释上都有。
有了适配器以后,我们就可以为ViewPager填充数据了。接下来我们在xml文件里给Activity添加一个ViewPager。
activity_view_pager_demo.xml:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.zcy.hnkjxy.demo.ViewPagerDemoActivity"> <android.support.v4.view.ViewPager android:id="@+id/vpImages" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout>很简单,只需要在根布局下面放一个ViewPager标签给个ID值和宽高就ok了,接下来我们在Activity中去使用它们。
ViewPagerDemoActivity.java
public class ViewPagerDemoActivity extends AppCompatActivity { //ViewPager对象 private ViewPager mVpImages; //ViewPager的适配器 private ViewPageAdapter mAdapter; //Bitmap集合 private List<Bitmap> mImages; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_view_pager_demo); //1.首先创建一个放bitmap的集合 mImages = new ArrayList<>(); //2.通过BitmapFactory将资源文件转化为Bitmap对象,然后将Bitmap对象添加到集合里 mImages.add(BitmapFactory.decodeResource(getResources(),R.drawable.xz_five)); mImages.add(BitmapFactory.decodeResource(getResources(),R.drawable.xz_two)); //3.实例化适配器,传入我们的数据集合和Context对象。 mAdapter = new ViewPageAdapter(mImages,this); //4.通过findViewById获得viewPager对象 mVpImages = (ViewPager) findViewById(R.id.vpImages); //5.为该ViewPager设置我们的适配器 mVpImages.setAdapter(mAdapter); } }这里就是跟着注释的5步走就完成了ViewPager的数据填充,需要注意的是使用BitmapFactory将资源文件转化为Bitmap时,不能选择太大的图片,否则会造成内存溢出(oom)错误。因为这里主要讲ViewPager的基本使用,所以未对图片的加载作处理,在下面的内容中会介绍如何用主流的图片加载框架去加载图片。
Glide简单介绍
这里我们只简单介绍下glide,对这个库感兴趣的同学可以自行google。在项目中使用gilde:
dependencies { compile 'com.github.bumptech.glide:glide:3.5.2' compile 'com.android.support:support-v4:22.0.0' }使用项目的build.gradle中添加如上代码,然后同步一下即可。
什么是glide
glide是谷歌主推的一个图片加载库,它以强大的图片加载功能和简洁的使用方式,迅速成为总多图片加载库中的佼佼者。接下来我们看看使用glide加载图片到底有多简洁:
Glide.with(context) .load("http://inthecheesefactory.com/uploads/source/glidepicasso/cover.jpg") .into(ivImg);你没看错就是三行代码!如果不是刻意写成这样,仅仅只需要一行代码即可完成图片加载!而且这还是一个功能健壮的图片加载,支持缓存,支持git动态图,支持本地资源和网络资源加载,支持和Activity或者Fragment生命周期绑定!!!下面我们一步步看下每个参数的含义,with()中传入的是上下文对象,当我们传入的是fragment或者activity时Glide还会自动绑定他们的生命周期,避免资源浪费。第二个load()方法中传入的是资源的地址,可以是网络资源也可以是本地的资源。第三个into()从字面来理解是加入到一个对象里,没错就是这样,这里需要不图片加载到那个控件里就给传入哪个控件。所以这一行的代码意思是:把地址是 http://inthecheesefactory.com/uploads/source/glidepicasso/cover.jpg的图片加载到ivImg这个控件里去。有没有很爽!?完全不要考虑其他的东西,Glide全在内部处理好了!!!
我们来看一个使用Glide加载图片的小例子:
activity_glide_image.xml
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.zcy.hnkjxy.demo.GlideImageActivity"> <ImageView android:id="@+id/imgGlid" android:layout_width="match_parent" android:layout_height="match_parent" /> <Button android:id="@+id/btnLoadImage" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="加载图片"/> </FrameLayout>在xml文件里我们就放一个用来存放图片的imageView和一个开始的按钮,这里我们可以看到明明设置了imageView为match_parent为何加载的效果却没有全屏呢?是因为Glide会自动计算imageView的大小并将图片合适的加载进去,如果我们给imageView设置一个
android:scaleType="fitXY"//属性则会全屏显示。
GlideImageActivity.java
public class GlideImageActivity extends AppCompatActivity { private ImageView imageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_glide_image); //获取imageView对象 imageView = (ImageView) findViewById(R.id.imgGlid); //给按钮添加单击事件,当单击按钮时开始加载图片。 findViewById(R.id.btnLoadImage).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Glide.with(GlideImageActivity.this).load("http://inthecheesefactory.com/uploads/source/glidepicasso/cover.jpg").into(imageView); } }); } }是不是很简单?附上一个设置了android:scaleType="fitXY"的效果
好了简单的使用就介绍到这里,当然glide的强大远远不在于此对这个库有兴趣的同学请自行google,本文就不占篇幅详解啦~
PhotoView简单介绍
github地址:https://github.com/chrisbanes/PhotoViewjar包地址:http://download.csdn.net/download/qq_34122135/10005088
什么是photoivew
photoview是安卓上的一个开源图片控件,它继承自ImageView。实现了手势放大缩小图片,并可以和ViewPager一起使用不冲突的强大控件。当photoview和viewpager相结合使用,就可以实现图片相册浏览的效果。下面演示下photoview的基本使用:
通过双击或者手势能放大和缩下图片,并且可以拖动去查看细节。使用方法如下:
<!--使用PhotoView作为图片的容器,记住要设置为src不要设置为background--> <uk.co.senab.photoview.PhotoView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/xz_three"/>设置src属性不要设置background
好了,今天的博客就写到这里了,接下来的国庆假期中,在不影响正常休息的情况下 尽量把这个系列写完。有什么讲述不对的地方请您指出,有迷惑的地方也可以留言发问,我看到会第一时间回复。最后,谢谢大家的支持,谢谢!!!
相关文章推荐
- 《安卓ViewPager系列自定义效果,助你打造炫酷轮播图——ViewPager+Glide+PhotView 图片相册加载效果》
- Android从零开搞系列:自定义View(11)使用ViewPager打造轮播广告条
- 移动开发----巧用ViewPager 打造不一样的广告轮播切换效果
- Android从零开搞系列:自定义View(13)新消息小圆点效果
- 【安卓】如何制作Spinner的Hint提示效果,并自定义Spinner样式
- Android 自定义 ViewPager 打造千变万化的图片切换效果
- Android 自定义 ViewPager 打造千变万化的图片切换效果
- Android 自定义 ViewPager 打造千变万化的图片切换效果
- Android自定义控件系列五:自定义绚丽水波纹效果
- Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果
- Android 自定义 ViewPager 打造千变万化的图片切换效果
- Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果
- ViewPager系列之-仿掌上英雄联盟皮肤浏览效果
- 自定义LinearLayout实现RatingBar效果,打造一个评分控件
- Android 自定义 ViewPager 打造千变万化的图片切换效果
- 巧用ViewPager 打造不一样的广告轮播切换效果
- Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7)
- 安卓自定义shape并实现带有阴影的按钮背景效果
- 安卓中自定义view控件代替radiogroup实现颜色渐变效果的写法
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)