Android学习小Demo（10）ToDoList的改进版之ViewPager显示多个图片

在TodoList增强版的增加界面上，为了显示图片，我是挖了两块地方，放了两个ImageButton，来显示图片，而且限制了最多只能放两张图片。当两个View都放置图片之后，我就会把“Gallery”和"Camera"的两个按钮给隐藏掉，如下图红框显示中，已经没了：

但是这样，一方面不好看，也不人性呀（=_=!! 一切需求都是从人自身出发的。），在上一章的末尾，我当时建议说可以放一个3D画廊，来展示图片，这样的话，就可以放多张图片了，还好看一点，也不用说去隐藏那两个按钮了，对吧。

所以昨天晚上呢，回来之后就改了一下，利用ViewPager来实现多张图片展现的效果，如下：

从上面的gif图片中，我们可以看到，但添加多张图片的时候，能够在下方形成一个画廊的效果，我们左右拉动图片来看我们添加进去的图片，效果是不是好了很多呢？

下面我们就从代码里面来讲讲是怎么做的吧。

首先，我们来看布局：

    <LinearLayoutandroid:id="@+id/flGalleryContainer"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="4"android:layout_marginBottom="5dp"android:gravity="center"  android:clipChildren="false"android:layerType="software"android:orientation="horizontal" ><android.support.v4.view.ViewPagerandroid:id="@+id/vpGallery"android:layout_width="150dp"android:layout_height="match_parent"           android:clipChildren="false" /></LinearLayout>

我们在这个位置放一个Layout（什么样的Layout都可以，我原来是用一个FrameLayout的，但代码中有点问题，我以为是它的问题，就改成LinearLayout，然后就忘了改回去了。）

Layout里面会放一个ViewPager（这是v4 支持包里面提供的，在2.x的机器上是没有这个控件的）。

1）在这里，其实我们是利用到了view的clipChildren属性，我们在这里要把它设置为false，如下，为什么呢？

        android:clipChildren="false"

因为如果clipChildren属性设置为true,就表明我们要将children给clip掉，就是说对于子元素来说，超出当前view的部分都会被切掉，那我们在这里把它设置成false，就表明超出view的部分，不要切掉，依然显示。

那为什么我们要设置这个属性呢？那是因为对于ViewPager控件来说，它只显示当前页(page)的View，轮到下一个view，就是下一页了，所以对于ViewPager本身这个控件来说，它永远只显示一个View，也就是一张图片。

2）另外，看如下代码：

        android:layerType="software"

这个是设置层的属性为软件层，因为从4.0之后，android是默认启动硬件加速的，而硬件加速对clip等操作是有影响的，会出一些bug，所以如果我们在自定义View样式中，用到clip等操作，对于4.0以上的android，我们需要将它的硬件加速关掉，不然是会出问题的，具体问题我忘了，不过这跑题了，sorry。

3）最后在这布局上还有一点要注意，我们要把ViewPager的宽度设置比父控件的小，这样两边才有空间去让view跑出viewpager，从而显示多个图片。

好了，下面我们来看看java的代码：

     vpGallery = (ViewPager)findViewById(R.id.vpGallery);galleryPagerAdapter = new GalleryPagerAdapter(imageViews);vpGallery.setAdapter(galleryPagerAdapter);vpGallery.setOnPageChangeListener(this);vpGallery.setOffscreenPageLimit(3);vpGallery.setPageMargin(5);if(imageViews.size() > 1){vpGallery.setCurrentItem(1);}flGalleryContainer = (LinearLayout)findViewById(R.id.flGalleryContainer);flGalleryContainer.setOnTouchListener(new OnTouchListener() {           @Overridepublic boolean onTouch(View v, MotionEvent event) {return vpGallery.dispatchTouchEvent(event);}});

4）其实ViewPager跟ListView和GridView这样的东西是同一个道理的，只是ListView和GridView是一次显示多个item,而ViewPager是像页一样，一次展现一页而已。相似的，也要定义一个Adapter来作为跟数据的接口，其中imageViews存放的就是这个任务所相关的图片了。

关于Adapter的代码，大家等一下在源代码里面看吧，这里就不放了，占地方。

5）既然是画廊，每次展现的图片肯定是要几张的对吧，那么我们就必须在这里利用下面这个函数来指定缓存几张图片，这样才有东西可以show，不会一拉过来，竟然是空白的。

vpGallery.setOffscreenPageLimit(imageViews.size());

6）需要把父控件的触摸响应函数传给ViewPager，如下：

     flGalleryContainer.setOnTouchListener(new OnTouchListener() {           @Overridepublic boolean onTouch(View v, MotionEvent event) {return vpGallery.dispatchTouchEvent(event);}});

这是因为，我们在滑动图片的时候，不会总是点着ViewPager来左右滑动，我们也会点击旁边的空白处来滑动的，这个时候，我们必须把这种滑动的响应函数交给ViewPager来处理，ViewPager就会以为是自己在滑动，才会对应地将下一页的View给带出来，不然的话，父控件点它自己的空间，ViewPager在中间的是不知道的。

7）我们还可以看到，设置了一个OnPageChangeListener给这个ViewPager呢，如下所示：

vpGallery.setOnPageChangeListener(this);

而我们也在下面实现了它的接口方法，如下：

 @Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {if(flGalleryContainer != null){flGalleryContainer.invalidate();}}@Overridepublic void onPageSelected(int arg0) {}
}

在这里，我们只实现了其中一个方法，当页面在滑动的时候，不断地刷新viewPager父控件，这是因为ViewPager里面的View画到外面出来之后，外面的Layout不知道有东西放到它上面去了，所以需要强制去刷新一下，让layout重新画一下，才能将ViewPager跑到它外面的那部分图片给画到Layout上。

关于ViewPager实现画廊的效果大概就是这样了，不过我觉得这个效果其实也只是一般，比较麻烦。

不知道大家有没有看过我前面一篇博客：

Android学习小demo（3）自定义ViewGroup 利用 scroller 实行屏幕滚动

在里面我实现了如下一个效果：

这是一个自定义的控件，我觉得用这个来实现画廊效果，可能效果会更好呀，还能够加上自己的动画效果，多好看呀，是不！

关于TodoList增强版，大家请看：

Android学习小Demo（10）ToDoList的加强版

源代码请点击下载

Android学习小Demo（10）ToDoList的改进版之ViewPager显示多个图片相关推荐

Android学习小Demo（10）ToDoList的加强版
前两天去超市逛东西,问老板娘这个东西多少钱,那个东西多少钱,但是一两分钟后就搞混了,当时就想,我不是写了一个todo的吗,可以再拍照放上去,这样就有对比啦! 于是兴冲冲地赶回家,把功能给实现了,虽然这 ...
Android学习小Demo（9）一个To Do List的实现
记得看过一篇文章,是说一个人临走之前,列下了想做的最后100件事情,然后拿着这张便签,一件一件地去实现.又想起乔布斯说,如果今天是你的最后一天,你会怎么过? 我有很多事情想做,想写很多的文章,但是时间 ...
Android学习小Demo（12）TodoList实现ListView的分组实现
很多情况下, 我们想要ListView上面展示的东西是可以分组的,比如联系人列表,国家列表啊,这样看起来数据的展现比较有层次感,而且也有助于我们快速定位到某一个具体的条目上,具体效果请看下图: 这是前 ...
Android学习小Demo（11）一个显示行线的自定义EditText
今天在处理一个EditText的时候,想着把EditText做成像一本作业本上的纸一样,每一行都可以由线条隔开,具体效果如下: 1)最开始的思路一开始的想法是很简单的,找出每一行的高度,然后一行一行 ...
Android学习小Demo（13）Android中关于ContentObserver的使用
在一些应用上,比如手机银行,QQ,微信等,很多时候我们都需要通过发送验证码到手机上,然后把验证码填上去,然后才能成功地继续去做下面一步事情. 而如果每次我们都要离开当前界面,然后去查收短信,记住验证码 ...
Android学习小Demo（14）Android中关于PopupWindow的使用
在一些场景中,我们希望能够点击按钮, 然后弹出一个菜单,而这个菜单是显示在屏幕的中央的,那么在Android中可以通过PopupWindow来实现这个效果. 具体效果如下图: 如上图中,我们点击&qu ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...
Android计步器小Demo
描述 android计步器的实现,自定义的一个弧形进度条,记步通过手机的传感器来实现,也就是说不支持传感器的机子(应该很老的了吧)就没有效果.看看效果图: 自定义View public class S ...
MATLAB信号处理---学习小案例(10)---Z反变换
定义X(z)X(z)X(z)的Z反变换(IZT)为x(n)=12πj∮CX(z)zn−1dzx(n)=\frac{1}{2\pi j} \oint_{C}X(z)z^{n-1}dzx(n)=2πj1 ...

Android学习小Demo（10）ToDoList的改进版之ViewPager显示多个图片

Android学习小Demo（10）ToDoList的改进版之ViewPager显示多个图片相关推荐

最新文章

热门文章